javascriptでマリオを作る part4

 

前回の続きです。

キャラを動かしたい

いつまでもflappy birdベースのままではマリオにならない。

手を加えていきたいと思います。

前回言っていた

・自分で動きたい（今は土管が向かってくることで動いているように見えているだけ）

をやりたいと思います。

今の実装では、どうも、どのキーを押してもジャンプする模様。

左右行くためには、矢印キーそれぞれが押されたかどうかを判断できないといけません。

moveUp関数の中で、以下のコードを追記してみて、

テスト的に出していたログ出力を今回のものだけにしました。

		let key = '';
		switch (e.key) {
			case 'ArrowUp':
				key = '↑';
				break;
			case 'ArrowDown':
				key = '↓';
				break;
			case 'ArrowLeft':
				key = '←';
				break;
			case 'ArrowRight':
				key = '→';
				break;
		}     
		console.log('key: ' +key);

うまくいったようです。

では、右、左、それぞれ押したときに、鳥のX座標を加算、減算できるように

フラグを追加します。

	var flgLeftPress = 0;
	var flgRightPress = 0;

次に、キーボードの入力部分で、左右キーを押したときにフラグをON（＝１）にします。

	switch (e.key) {
		case 'ArrowUp':
			if(flgJumping == 0){
				flgJumping = 1;
				jInc = JFIRST;
			}        
			key = '↑';
			break;
		case 'ArrowDown':
			key = '↓';
			break;
		case 'ArrowLeft':
			key = '←';
			flgLeftPress = 1;
			break;
		case 'ArrowRight':
			key = '→';
			flgRightPress = 1;
			break;
	}        

最後にdraw関数の中で、左右キーを押したらそれぞれ10だけ動くように、bX変数の値を増減させます。 増減させた後は、フラグをOFF（＝０）に戻しておきます。

		if(flgLeftPress == 1){
			bX -= 10;
			flgLeftPress = 0;
		}
		if(flgRightPress == 1){
			bX += 10;
			flgRightPress = 0
		}

一応動きましたが、右と上同時押しで右斜めにジャンプできない、、、、

まだ改良が必要のようです。

あと、ソースがごちゃごちゃしてきたので、いつか整理したい、、、、

今回のソースはこちら。