MDN の動作サンプルを改造して遊ぶ

先日、MDN Web Docs で調べものをしているときに、
たまたま面白そうなサンプルを見つけました。

今日は、それを使って遊んでみたいと思います。

その前に、MDN Web Docs について分からない人向けに簡単に説明すると、
Mozilla.org による、Web技術者向けのドキュメントが集まったウェブサイトです。

MDN Web Docs (以前は MDN — Mozilla Developer Network と呼ばれていました) は、ウェブ技術とウェブを支えるソフトウェア、 CSS、 HTML、 JavaScript などについて学ぶための進化し続ける学習プラットフォームです。

MDN Web Docs について – MDN プロジェクト | MDN (mozilla.org)

私の中で、辞書変わりに常に開いておきたいサイトランキング1位に輝いています。
人によっては、読んでるだけで楽しい！ ワクワクする！ という噂もあります。

今回取り上げるサンプルと、元になるコードは以下にあります。
KeyboardEvent.code – Web APIs | MDN (mozilla.org)

“Try it out” と書かれた文字の下に、
黒い正方形と、その中にオレンジの二等辺三角形が描画されています。

コードを見ると、
オレンジの二等辺三角形は spaceship という名前のようです。
黒い四角は world。

私がつけたわけではありません。
が、ここに世界と、宇宙船が誕生したわけです。

ここからコードを追加し、
スペースキーを押すとショットを撃てるようにしたいと思います。

一部抜粋ですが、こんな感じに。

const spaceship = document.getElementById("spaceship");
const shot      = document.getElementById("shot");
const world     = document.querySelector('.world');
let isFiring    = false

function refresh() {
	let x = position.x - (shipSize.width/2);
	let y = position.y - (shipSize.height/2);
	let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15)";
	spaceship.setAttribute("transform", transform);

	if (isFiring) {
		let rad = angle * (Math.PI / 180);
		shotPosition.x += (Math.sin(rad) * shotMoveRate);
		shotPosition.y -= (Math.cos(rad) * shotMoveRate);
		let sx = shotPosition.x + (shipSize.width / 2);
		let sy = shotPosition.y + (shipSize.height / 2);
		shot.setAttribute("transform", 'translate(' + sx + ' ' + sy +')');

		if (isOutOfArea(sx, sy)) {
			isFiring = false;
		}
	} else {
		shotPosition.x = x;
		shotPosition.y = y;
	}
}
function isOutOfArea(x, y) {
	return (x < -1 || x > world.clientWidth || y < -1 || y > world.clientHeight);
}
setInterval(() => {
	refresh();
}, 33);

MDN のコードは、あくまでも KeyboardEvent のサンプルなので、
キーボードを押した際にしか処理が行われないようになっています。

これはこれで省エネなのですが、
この世界の神がキーボードを押している間しか時間が進みませんので、
いろいろと不都合です。

定期的に画面を描画し直すように変更しました。

次に、スペースキーで shot を発射するための処理を入れるのですが、
この宇宙船は、2次元平面上で回転します。

宇宙船の向きに合わせて前方に発射しましょう。

宇宙船と角度を合わせて、
座標を移動させるだけです。

無事、撃てるようになったら、
世界の領域を越えたショットを消すようにします。

宇宙の外に迷惑をかけてはいけません。

ここまでの動作サンプルを置いておきます。
下の枠内をクリックすると読み込みます。

推奨環境は Google Chrome、MS Edge です。

気付いた人もいらっしゃるかもしれませんが、
angle の値を使いまわしているため、
ショットを撃ったあとに回転するとショットがカーブします。
これはこれで面白いかと思い放置しています。

自機が動いてショットを撃つ。

これだけでも、
なんとなくゲームのような片鱗が見えてきたのではないでしょうか。

360度全方位の2Dシューティングゲーム (画面は3D) が
何年か前にありましたが、
ものすごく頑張ればそれに近いものが作れるかもしれません。

MDN にはいろいろな動作サンプルがあります。
あなたの求めるものが意外なところから見つかるかもしれません。

Tweet