プログラミング初心者がphina.jsでゲームを作る⑦

在宅さん

ゲームに必要な動きや素材の配置などができるようになってきたので、ゲームみたいに作っていこう!!

ブロックの配置

前回はStageSceneクラスに直接書いていましたが、ステージが増えるにつれStageSceneクラスに各ブロックの配置等を書くと、行が多くなってしまいます。そこでステージのブロックの配置、ゴール位置、初期プレイヤー位置を別クラスにまとめて１つのファイルで管理します。

class stage1 {
  constructor(){
  this.stagename="ステージ1";
  }
  ban_set(max_index){
  this.max_index=max_index;
  this.player_index_x=4;
  this.player_index_y=this.max_index-1;
  this.end_index_x=this.max_index-1;
  this.end_index_y=3;
  this.ban = new Array(this.max_index);//1:ブロック、2:プレイヤー、4:GOAL
  for (var x = 0; x < this.max_index; x++){
    this.ban[x] = new Array(this.max_index);
  }
  for (var p = 0; p < this.max_index; p++){
    for (var q = 0; q < this.max_index; q++){
      this.ban[p][q] =0;
    }
  }
  this.Outside();
  this.ban[this.player_index_x][this.player_index_y]=2;
  this.ban[this.end_index_x][this.end_index_y]=4;
  this.ban[1][5] =1;
  this.ban[2][2] =1;
  this.ban[1][4] =1;
  this.ban[3][9] =1;
  this.ban[4][1] =1;
  this.ban[4][5] =1;
  this.ban[5][9] =1;
  this.ban[8][7] =1;
  this.ban[6][9] =1;
  this.ban[7][1] =1;
  this.ban[7][6] =1;
  this.ban[9][5] =1;
  this.ban[9][10] =1;
  this.ban[2][7] =1;
  this.ban[7][2] =1;
  this.ban[10][10] =1;
}
  Outside() {
    for (var p = 0; p < this.max_index; p++){
      for (var q = 0; q < this.max_index; q++){
        if(p==0||p==(this.max_index-1)||q==0||q==(this.max_index-1)){
          this.ban[p][q] =1;
        }
      }
    }
  }
}
class stage2 {
  constructor(){
  this.stagename="ステージ2";
  }
  ban_set(max_index){
  this.max_index=max_index;
  this.player_index_x=9;
  this.player_index_y=3;
  this.end_index_x=this.max_index-1;
  this.end_index_y=3;
  this.ban = new Array(this.max_index);
  for (var x = 0; x < this.max_index; x++){
    this.ban[x] = new Array(this.max_index);
  }
  for (var p = 0; p < this.max_index; p++){
    for (var q = 0; q < this.max_index; q++){
      this.ban[p][q] =0;
    }
  }
  this.Outside();
  this.ban[this.player_index_x][this.player_index_y]=2;
  this.ban[this.end_index_x][this.end_index_y]=4;
  this.ban[1][5] =1;
  this.ban[2][2] =1;
  this.ban[1][4] =1;
  this.ban[3][9] =1;
  this.ban[4][1] =1;
  this.ban[4][5] =1;
  this.ban[5][9] =1;
  this.ban[8][8] =1;
  this.ban[6][9] =1;
  this.ban[7][1] =1;
  this.ban[7][6] =1;
  this.ban[9][5] =1;
  this.ban[9][10] =1;
  this.ban[2][7] =1;
  this.ban[7][2] =1;
  }
  Outside() {
    for (var p = 0; p < this.max_index; p++){
      for (var q = 0; q < this.max_index; q++){
        if(p==0||p==(this.max_index-1)||q==0||q==(this.max_index-1)){
          this.ban[p][q] =1;
        }
      }
    }
  }
}

SceneManagerで呼び出されたオプション値によって遷移するSceneを決定します。

phina.define("GameManager", {
  superClass: "ManagerScene",
  init: function(option) {
    this.superInit({
      startLabel:option.startLabel,
      scenes: [
        {
          className: 'stageScene',
          label: 'stage1',
          arguments: { stage: new stage1()},
          nextLabel: 'result',　
        },
        {
          className: 'stageScene',
          label: 'stage2',
          arguments: { stage: new stage2()},
          nextLabel: 'result',
        },
        {
          className: 'ResultScene',
          label: 'result',
        },
        {
          className: 'MainScene',
          label: 'main',
        },
      ]
    });
  },

呼び出す時は、オプション値をつけて指定のstageのSceneへ移動させます。
ゲーム内では、ボタンごとにstage_Labelを変えています。

    var button_stage1 = Button({
          x: main_scene.gridX.center(-4),
          y: main_scene.gridY.span(12),
          width: 150,
          height: 100,
          text: "STAGE1",
          fontSize: 18,
          fontColor: 'black',
    }).addChildTo(this)
    .onpush=function(){
          main_scene.app.replaceScene(GameManager({startLabel:'stage1'}));
    };

これでStageSceneにステージ情報を渡すことができました。
次にStageSceneで、先ほど渡したクラスを受け取り盤面をセットします。

phina.define("stageScene", {
  superClass: 'DisplayScene',
  init: function(options) {
    this.superInit({
      backgroundColor:'hsl(200, 80%, 64%)',//背景色設定
    });
    options = ({}).$safe(options,{stage: new stage2()});
    this.stage = options.stage;
    this.stage.ban_set(max_index);
　　ban = this.stage.ban;
    for (var p = 0; p < max_index; p++){
      for (var q = 0; q < max_index; q++){
        if(ban[p][q]==1){
            block(p,q,"black").addChildTo(this);
        }
        if(ban[p][q]==4){
            block(p,q,"yellow","GOAL").addChildTo(this);
        }
      }
    }
　  block(this.stage.player_index_x,this.stage.player_index_y,"yellow","START").addChildTo(this);
    this.player = player(this.stage.player_index_x,this.stage.player_index_y).addChildTo(this);//プレイヤ