スポンサーリンク
スポンサーリンク

【Part1】JavaScriptでテトリスを作ろう!

目指していくテトリス

このシリーズで目指していくテトリスは、このようなものになります。

このシリーズを通してテトリスの作り方を学んでいくことによって、この画像と同じものを作ることができます。

 

テトリス

↑こちらのリンクで遊べます。是非遊んでみてください!

作成するファイル

今回作成するテトリスでは、「index.html」と「main.js」という2つのファイルを作成します。

「index.html」にHTMLのコードを書いて、ブラウザに表示する内容を設定します。

そして、メインで記述を行なっていくのがこの「main.js」。

この「main.js」にはJavaScriptのコードを記述していき、Canvasと呼ばれる描画領域内で動く様々な処理を作っていきます。

Canvasをブラウザに表示する

(index.html)

Canvasの設置

Canvasを使うことによって、ブラウザ上に様々なものを描画することができます。

そのCanvasの設置を行う場合は「canvasタグ」を用いて、「id」や「width」などの属性と呼ばれるものの値を設定します。

この場合は、「id」を「canvas」という名前にし、「幅:600」「高さ:600」で背景が黒のCanvasに設定しています。

 

そしてこれで「index.html」の編集は終わりです。

ここからは「main.js」の編集を行なっていきます。

 

メインループの作成

Canvasとコンテキストの取得

(main.js)

「getElementById」関数を用いて、引数にIDを指定することによってエレメント(この場合はCanvas」を取得することができます。

また、コンテキストはCanvasの「getContext」関数を用いて取得します。

このコンテキストを用いて、色の設定や矩形の描画、文字の描画などをCanvasに対して行うことができます。

 

メインループの作成

(main.js)

 

「requestAnimationFrame」関数を使うことによって毎秒約60回の一定間隔で「main」関数をループさせることができます。

 

定数の設定

定数は慣例的に、プログラムの一番上に記述をしていきます。

幅・高さの設定

(main.js)

 

ブロックの幅・高さ(マス数)

(main.js)

 

ブロックの種類

テトリスでは以下の7種類のブロックを使用します。

なので、この7種類と、4つの回転パターンの計28種類のブロックを定義していきます。

(main.js)

 

非常に長いですが、先ほどの画像のブロックを順番に4種類の回転を定義しているだけです。

この場合、各ブロックは「4×4」の領域で定義をし、ブロックがないところは「0」を、ブロックがあるところは「1」と定義します。

 

今回は以上となりますが、次回からフィールドの描画に移っていき、より本格的なテトリス作成をしていきます。

 

次回

【Part2】JavaScriptでテトリスを作ろう!

コメント