javascriptでマリオを作る part5

 

前回に引き続き5回目になりました。

まだまだマリオらしくなりませんね。

がんばろうっと。

今回から、アクションゲーム要素を少しずつ入れていきたいと思います。

まず、土管が上に出てスクロールしているのがもったいないので、

地上に少し出してみます。

186行目付近に、土管を表示するための処理があります。

pipeNorthが上から下に伸びる土管

pipeSouthが下から上に伸びる土管

なので、pipeNorthはいらない、pipeSouthをちょうどいい位置に表示します。

※今回からVisual Studio Codeを使ってみたいと思います。

まわりのひとがよくつかっているんですよね。。。

//            constant = pipeNorth.height+gap;

//            ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);

//            ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);

            ctx.drawImage(pipeSouth,pipe[i].x,220);

できたものがこちら

主人公がバンバン土管に当たってかわいそうです。

しかし、今のままだと、ジャンプは真上にしかできず、すぐ落ちてしまうので

土管を飛び越えることができません。

コンソールを見ると、ちゃんと→と↑はリアルタイムで認識してそうなので

入力上の問題はなさそうです。

また、自然界であれば、右に進んでいるときジャンプしたら、

さっきまで右に走っていた勢い分だけ、右にずれながらジャンプします。

慣性の法則ですね。

そういえば、普通にマリオが走っていても、十字キーを離したら、少し走った方向に進んでから止まりますね。速度の考え方を入れないのか、、、

物理の計算を使うと正確だとおもうのですが、時間を使った計算が面倒になりそうなので、

何とか簡単に済ませたいと思います。

同じ方向に押し続けると、ある一定までは上がる数を作り、

何もしなければその数は減っていくようにして、速度っぽく使いたいと思います。

speed という変数を用意して、右や左を押したときだけ数が増減するようにします。

あとは、もともと左右を押したら移動するdraw関数の中の処理で、speed変数を、主人公のX座標であるbXに加えるだけ。

どうなるかな。。。

び、びみょう。。。

今までに比べれば、ちょっとは慣性の法則っぽく見えますが、右と上の同時押しでの

斜め右上ジャンプができるときとできないときがありました。

できれば右に走っているときに上を押したら、右にずれながら上に行ってほしい、、、

もうちょっと微調整が必要のようです。

一旦今回はここまでにしようかな。。

ソースはこちらです。