週アスでスーパーマリオが作れる！

雑誌サブスクサービスでは、現在は楽天マガジン、以前はdマガジンを利用していました。

しかし、どちらとも、プログラミング関係の雑誌がほぼない状態です。

そんな中、唯一といってよいであろう、

毎回様々な分野のJavaScriptプログラムを紹介してくれる週アスは

毎回楽しみにしていました。

しかし、分野が様々過ぎて、あまり興味のない分野のJavaScriptが書かれていることも多く

あまり過度な期待はせずに、見逃さないようにだけしていました。

しかし

今回の最新号の「JavaScriptの部屋」は、なんと、なんと

スーパーマリオの作り方！

リンク

「プラットフォームゲーム」というジャンルを扱う、ということで

代表的なゲームとしてスーパーマリオを挙げられているのですが、

良くあるキャラクターがジャンプしたり、落ちないように進む、そんなゲームの作り方を

紹介してくれています。

 以前の記事の中で、個人サイトでマリオのゲームの作り方を

紹介してくれているところがあり

そこで少しずつ写経していたのですが、

今回は週アスでも取り上げてもらえました。

これはもう家宝ものです。

まず、プログラムの行数がHTMLタグ含めて164行！

その中で、操作キャラだけでなく、ブロックやアイテム表示も含めた表示までやってくれている。

素晴らしい。。

恐らく、コード量を減らすため、初見ではわかりづらい書き方のもあると思いますが

コメントもふんだんにあるので

JavaScript学習中の方でも問題なく読み取れそう。

唯一の欠点（？）が、プログラムがインターネット上になく、

自分のPCで動かす場合は写経しないといけないこと。

いや、むしろ写経することで、さらに自分の力になる。

これは欠点ではない。

一応、インターネット上ない、と書きましたが、

以前は公式サイトがあったようです。

2017年のころから始まっていたんですね。

ここでもコード自体は画像になっているので、写経が必要です。

これを見ていると、私が作りたかったもう一つのジャンルもありました。

キーボード入力を早くする、タイピングゲームを作ろう

もしパソコンが初めての子供に、私が作ったタイピングゲームをやってもらい

キータッチを勉強させることができたら、、、、

いや、もっといいタイピングゲームはいっぱいあると思うのですが、、、、

夢が膨らみます。

もしよろしければ、アスキーNo.1430(2023年3月14日発行)　見てみてください！

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

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

今まで：

    マリオを作る

これから：

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

    ２．自分のキャラを動かす

    ３．敵を出して動かす

    ４．当たり判定をつける

    ５．フィールド・障害物を出す

    ６．ジャンプする

    ７．障害物との当たり判定

    ８．得点カウント・表示

    ９．ゲームオーバー条件の作成

    １０．クリア条件の作成

うまくいくかな、、、、

javascriptでマリオを作る part6

 

前回の続きです。

右上ジャンプがなんとなくできたのですが、まだまだ「マリオ」らしくありません。

プログラミングの世界で、現実世界っぽく動かすのはいろいろ工夫が必要ですね。。。

結局いろいろ修正しないと改善しない、、、

今回は修正箇所の主な部分をご説明して、ソースを添付します。

１．加速度は小数で微調整

方向キーを外した時に慣性の法則＋摩擦力っぽく、動くゆっくり止まるものが作りたかったのですが、加速度を管理する変数に、「小数点で加減算する」

もともと加速度を管理する変数時は整数値を代入して試していましたが、

これがハマりポイントでした。

どうしても動きが荒くなり、動きが速すぎて画面外に出たりしていました。

よって、以下のspeed_x 変数のように、小数点を含んだ数値を扱うことで

荒い動きは改善されました。

if(speed_x>=1){

    speed_x -= 0.5;

}else if(speed_x <= -1){

    speed_x += 0.5;

}else{

２．左右の動きは、スピードが落ち着くまではフラグを変えない

左右のキーを押したとき、すぐにフラグをOFFにしていました。

加速を考えない動きであればそれで事足りるのですが、

ゲームとなると話は別です。

今回は、スピードが０になったとき、左右のフラグもOFFにしました。

「ジャンプ中」を判定する変数は複数存在しており、
見づらかったので整理しました。

今回の動きはこちらとなります。

最後のほうでやっと斜めジャンプができました。

ソースはこちらです。

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に加えるだけ。

どうなるかな。。。

び、びみょう。。。

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

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

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

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

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

ソースはこちらです。

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
		}

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

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

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

今回のソースはこちら。

javascriptでマリオを作る part3

 

前回は、一回ジャンプしたら、着地するまでは再ジャンプできない、をしました。

今回は、いよいよ「ジャンプらしい動き」にしていきたいと思います。

javascriptでマリオを作る part2

 

前回の続きです。

このままでは、毎回土管にぶつかってゲームオーバーして、鳥がかわいそうなので、土管を出さないようにしたいと思います。

javascriptでマリオを作る part1

 

マリオのようなゲームを作りたい

子供のころからずっと思っていました。

ただ、毎日の忙しさを理由に、どんどん先延ばしにしていました。