2022年2月22日火曜日

javascriptでマリオを作る part7 挫折 そして、、、

 

久しぶりのマリオ更新です。


今度は土管に当たり判定をつけたいと思います。


と書き進めようとしたのですが、


できませんでした。。。


当たり判定をつけて、やりたかったことは以下です。

・土管に当たったらそれ以上進めないようにする

・土管の上に乗れる(透き通らない)

・土管に押されて画面左に挟まったらゲームオーバー


しかし、

ぶつかったときにどう振舞うか

→土管の左端にぶつかったら強制スクロールなので土管に押されて左にずれる

までは行けたのですが、


土管が飛び越えられない


判断条件と、土管にぶつかって先に進めないときの条件は以下で書きました。

if( bX + bird.width >= pipe[i].x && bY + bird.height <= pipeSouth.height && bX >= 0){

  bX = pipe[i].x - bird.width;

}


皆さんに状況を説明するため、図でも書いてみました。




bX + bird.width >= pipe[i].x

で、自分が土管の左側以上の座標になったら、座標を土管の左側の座標と一緒にして、「押された」感を出す


bY + bird.height <= pipeSouth.height

で、土管以上の高さでジャンプしたら、上記の土管の押された感を脱却する

です。

でも、、、何度ジャンプしても飛び越えられませんでした。

その日は修正を断念して、翌日チャレンジするもまたダメ。

他のこともいろいろしたい、

「もうだめだ」

そう思いました。


この記事も、「もう修正できない」ということを報告するつもりで書き始めました。

ただ、、

この「できない」状況を説明するため、先ほどの図を描いていたところ、

おかしなところに気づきました。


自分が土管の高さと一緒になるのは、

以前は 

自分:bY + bird.height 

土管:pipeSouth.height

と考えていました。

これは左下が原点で、右がX座標、上がY座標 と考えたときには正しいです。

よく学校の授業で習うときのかたちですね。


でも、たしか原点は左上で(0,0)、そこから右がX座標、下がY座標 が、プログラミングの世界ではよくある方式。

もしそうだとすると、、、

自分:bY + bird.height 

土管:pipe[i].y


これをもとに修正すると、、、、

if( bX + bird.width >= pipe[i].x && bY + bird.height >= pipe[i].y && bX >= 0){

  bX = pipe[i].x - bird.width;

}


・・・・

ジャンプしたらちょっと右に行けました。

ただ、土管をすり抜けてしまうので、乗りたいです。

座標の原点と方向に注意しながら、、、やっていたのですが、、、


やっぱりわからん


ギブアップです。


そもそも、サンプルコードでいい感じに動いていたコードを

理解しないまま進めていったのがだめだったと思います。

※念のため共有します。(ちゃんと動かないです)


どこを触るとどうなってしまうのか。

納得できないまま進めても

事故が起きるだけです。


仕事でも、よくわからないまま修正して、本番環境で問題を起こすケースが

多くみられます。


自分はなるべくそうならないように、事前に確認するほうなのですが

まさかプライベートで同じ過ちを起こしてしまうとは、、、


しかし、自分の記事を書いていて思い出しました。

カントの言葉を思い出しました。


一番よいのは、対象を十か十二ぐらいの小さな個々の詩にわけて描くことだろうね。(中略)こんな風にこまぎれにわけていけば、仕事は楽になるし、対象の様々な面の特徴をずっとよく表現できるね。その逆に、大きな全体を丸ごと包括的につかもうとすると、必ず厄介なことになって、完璧なものなんて、まず出来っこないさ。

齋藤孝 座右のゲーテ P14


私も、対象を分けていきたいと思います。


今まで:

    マリオを作る


これから:

    1.ステージと自分のキャラを表示する

    2.自分のキャラを動かす

    3.敵を出して動かす

    4.当たり判定をつける

    5.フィールド・障害物を出す

    6.ジャンプする

    7.障害物との当たり判定

    8.得点カウント・表示

    9.ゲームオーバー条件の作成

    10.クリア条件の作成


うまくいくかな、、、、