JavaScriptで遊ぶ【5】

皆さん、こんにちは。

今日はブロック崩しゲームを作ります。
MDNのレッスンを参考に制作させていただきます。

今なお人気の古典的ゲーム

ブロック崩しゲームっていつからあるんだろうと思ったら、
1976年みたいですね。

ブロックくずしとしての最初に発売されたゲーム作品は、アタリによるオリジナルの『ブレイクアウト』である。

『ブレイクアウト』は1976年にアタリが発売。

https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%8F%E3%81%9A%E3%81%97

そんなに昔から！
私が生まれる前からあったのですね。

でも不思議な中毒性があって、なんかやってしまう魅力がありますね。

そして、古典的なゲームであっても作るのは結構大変なんだなということが、
プログラミングを学び始めてわかってきました。

学習用メモ

今回の内容は、ちょっと難しめです。

canvas（グラフィックキャンバス要素）

まずはCanvasとは何かについてを知っておきましょう。Canvasは、HTML5とJavaScriptを使ってブラウザ上で図を描くための仕様です。HTML5という現在主流になっているHTMLのバージョンでのみ、Canvasは使うことが出来ます。

https://www.sejuku.net/blog/85550

図を描いたり動かしたりできるということですね。
こんな感じで。

canvasの基本形

<canvas id="myCanvas" width="480" height="320"></canvas>

HTMLはシンプル。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

<script>タグにこれを書く。

描画ループ

function draw() {
    // 描画コード
}
setInterval(draw, 10);

これを使って動かしていく。
なるほど。

クリックイベントを無効にする

ゲームプレイ中にクリックイベントが効かないようにするには、
removeEventListenerを使う。

VS Codeのフォーマット（コード整形）

Shift+Alt+f

JavaScriptで作るブロック崩しゲーム

ゲームはこちらです。
スタートボタンを押して遊んでみてください。

まとめ

というわけで今回は、
MDNの「そのままのJavaScriptを使ったブロックくずしゲーム」の、
レッスンを参考にさせていただき制作しました。

まだまだ、使いこなすには練習が必要ですが、
JavaScriptも奥が深くて面白いですね！