月別: 2018年4月

今回は、マリオとマップチップとして描画されたコインの取得を行います。

プログラムの全体の中身ですが、コインとされるマップチップとマリオのマップチップ座標が
触れた際に、コインのマップチップを描画されないマップチップに変換することで、
コインを背景から消します。

マリオでは、コインを100枚貯めると1upするので、その処理をコインを取った後に
行うようにします。

解説

コインとの当たり判定などを書くので、mario.jsを開いてください。

mario.js

まず、メンバー変数にコインの数を保存するcoinNumと
プレイヤーの残機を保存するplayerNumを定義します。

// chapter30
this.coinNum = 0;
this.playerNum = 3;

次にコインのマップチップとマリオとの当たり判定関数を書きます。
関数名をcollisionWithMapItemとして、引数にマップチップを受け取るようにします。

まず、マリオのマップチップの上下左右4つの点のマップチップ座標が、
コインのマップチップと当たり判定があるかをを調べるために、
forループを使いたいので、ローカル変数の配列にマップ座標を格納します。

var mapsX = [this.rightMapX,this.leftMapX];
var mapsY = [this.upMapY,this.downMapY];

続いて、forループでコインとの当たり判定があるかチェックします。

マップチップがコインのマップチップかを判定する
isCoinMapをCollisionUtils内に別途定義しますので、開いてください。

CollisionUtils.js

この関数はコイン用のマップチップ番号である33だったらtrueを返します。

/**
  引数のマップチップ番号が
  コインのマップチップかどうか返す

  mapNumber : マップチップ番号
*/
function isCoinMap(mapNumber){
  if(mapNumber == 33){
    return true;
  }
  return false;
}

続いて、対象のマップチップを空のマップチップにする関数も書きます。
空として描画しないマップチップ番号に入れ替えます。

/**
  対象のマップチップに空のマップに入れ替える

  map : マップチップ配列
  mapX : map indexX
  mapY : map indexY
*/
function replaceEmptyMap(map,mapX,mapY){
  map[mapY][mapX] = NOT_DRAW_MAP;
}

mario.jsに戻って、続きを書いていきます。

mario.js

当たり判定が行われた際に、マップからコインを消す処理と
マリオが持っているコインの数を増やす処理をコインとの当たり判定があった後に書きます。
コインをとった時の処理をgetCoin()として後で書きます。

/**
  アイテムマップチップオブジェクトとの当たり判定
  map : マップチップ
*/
Mario.prototype.collisionWithMapItem = function(map){
  var mapsX = [this.rightMapX,this.leftMapX];
  var mapsY = [this.upMapY,this.downMapY];
  for(var y = 0;y < 2;++y){
    for(var x = 0;x < 2;++x){
      // コインとの当たり判定
      if(isCoinMap(map[mapsY[y]][mapsX[x]])){
        // マップチップと空のマップを入れ替える
        replaceEmptyMap(map,mapsX[x],mapsY[y]);
        // コインを取得した時の処理
        this.getCoin();
      }
    }
  }
}

続いて、getCoin関数の中身を書きます。
マリオと同じように100枚コインを取得したら1upさせるようにします。

/**
  コインを取得した時の処理
*/
Mario.prototype.getCoin = function(){
  // コインを100枚とったら1upさせる
  if(++this.coinNum >= 100){
    this.coinNum = 0;
    this.playerNum++;
  }
}

これで、コインを取得する処理を書き終えたので、
update関数内に埋め込んで有効化します。

Mario.prototype.update = function(mapChip){
	if(!this.isDead()){
	  // マップ座標の更新
	  this.updateMapPosition();
		// 左キーが押されている状態
		if(gLeftPush){
	    if(gSpacePush){
	        this.setIsDash(true);
			    this.moveX(mapChip,-DASH_SPEED);
	    }
	    else{
	      this.setIsDash(false);
	      this.moveX(mapChip,-NORMAL_SPPED);
	    }
		}
		// →キーが押されている状態
		if(gRightPush){
	    if(gSpacePush){
	        this.setIsDash(true);
			    this.moveX(mapChip,DASH_SPEED);
	    }
	    else{
	      this.setIsDash(false);
	      this.moveX(mapChip,NORMAL_SPPED);
	    }
		}

	  // ジャンプ動作
	  if(gUpPush){
	    // ジャンプ設定をオンにする
	    this.setJumpSettings(gSpacePush);
	  }
	  // ジャンプ処理
	  this.jumpAction(gUpPush,mapChip);
    // マップチップアイテムオブジェクトとの当たり判定
    this.collisionWithMapItem(mapChip);
	  // scroll処理
	  this.doMapScrollX();
	}
	// 死亡後処理
	this.deadAction();
}

index.htmlファイルを開いてコインが取得できるか確認してみてください。

全体のソースコードはgithubから確認してください。