みなさんこんにちは！
「JavaScriptでゲームを作りまくったらプログラミングを習得できるのか」という挑戦をしているプログラミング初心者です。
2つ目のゲームを作成したので、参考サイトや感想を述べたいと思います。
あくまで勉強の記録のような記事であり、このサイトを見てもJavaScriptができるようになるわけではないのでご注意ください。
1つ目のゲームはオセロ↓
2つ目のゲームはテトリス
2つ目のゲームにはテトリスを選びました。
テトリスも私が好きなゲームの一つで、高校時代の休み時間にはスマホでテトリスゲームばかりしていましたね。
コードの意味を理解しようとしながら、4時間ほどで完成させました。
完成形↓
キーボードで操作しています。
参考サイト↓
ほとんど参考サイト通りですが、
- 矢印ボタンのテキスト選択を無効
- 矢印ボタンクリックのカーソルを指に
以上の点でアレンジ？を加えました。
JavaScriptをもっとできるようになったら、次の2点を改善したいです。
- ホールドボックスの実装
- 落ちる場所がわかりやすいように格子を描く
テトリスを作って学んだJavaScriptの知識
Canvas
まずは、JavaScriptにはCanvasというものがあることを学びました。
Canvasは動的に図を描くときに用います。
Canvasは次の手順で描いていきます。
Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。
- HTMLで、<canvas>要素の幅と高さ、および、id名を指定する
- getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする
- canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する
引用：http://www.htmq.com/canvas/002.shtml
たしかに今回のテトリスでは、htmlに
というコードを書きました。
そしてJavaScriptで描画機能を有効化。
- this.stageCanvas = document.getElementById("stage");
- let context = canvas.getContext("2d");
これによってテトリスを描けるようになるのですね。
なるほど。
class
htmlにもclassがありましたが、JavaScriptでもclassが出てきました。
しかし、2つのclassは違う意味のようです。
JavaScriptのclassはオブジェクトの設計書のような役割を担います。
テトリスの作成では
- class Tetris{ }
というコードを描きました。
{ }の中に定義を書けば、何回でも同じ構造のオブジェクトを容易に書けるようです。
正直4割くらいの理解です、、、。
また他のゲーム作成で出てくることを期待します笑。
window.onkeydown = (e) => { }
キーが押されたときに{ }内のイベントを実行します。
これはわかった気がします。
他にも知らないことがたくさんありましたが、書ききれないので3つに絞りました。
JavaScript初心者がテトリスを作った感想
正直、テトリスはJavaScript初心者にとって難しすぎたと思います。
興味本位で作成してみましたが、5割ほどの理解です。
オセロ作成の難易度が★★☆☆☆なら、テトリスは★★★★☆くらいに感じました。
そのため、JavaScript初心者の人にはおすすめしません。
ただ、テトリスが好きな私としてはけっこう楽しめました。
テトリスが好きな人は作ってみてもいいかもしれません。