JavaScriptでテトリスを作る #1
この記事では、JavaScriptとHTML5のCanvasを使って、シンプルなテトリスゲームを作成していきます。プログラミング初心者の方でも理解できるよう、一歩ずつ丁寧に説明していきます。
必要な知識
この記事を進める前に、以下の基本的な知識があると理解しやすくなります：
- HTML の基本構造
- JavaScript の基本文法（変数、配列、オブジェクト）
- Canvas の概念（描画領域として使用）
プロジェクト構成
今回作成するテトリスゲームのファイル構成は非常にシンプルです：
tetris/
├── index.html
└── script.js
2つのファイルだけでテトリスゲームを作成できます！
HTMLファイルの作成
まずは、ゲームを表示するためのHTMLファイルを作成します。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
</head>
<body>
<canvas id="canvas" width="320" height="640"></canvas>
<script src="script.js"></script>
</body>
</html>
HTMLの解説
-
<canvas>要素：ゲームの描画に使用する画布です -
width="320" height="640"：キャンバスのサイズを指定（縦横比 1:2） -
<script src="script.js">：JavaScriptファイルを読み込みます
Canvasの初期設定
次に、JavaScriptでCanvasを操作するための基本設定を行います。
script.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
コードの解説
-
document.getElementById("canvas")：HTMLのcanvas要素を取得 -
getContext("2d")：2D描画用のコンテキストを取得 -
fillStyle = "#000"：塗りつぶしの色を黒に設定 -
fillRect()：キャンバス全体を黒で塗りつぶし
ゲームグリッドの設定
テトリスのゲーム盤面を定義します。
script.js
const GRID_COLS = 10;
const GRID_ROWS = 20;
const CELL_SIZE = canvas.width / GRID_COLS;
設定値の説明
-
GRID_COLS：横のマス数（テトリスは通常10マス） -
GRID_ROWS：縦のマス数（テトリスは通常20マス） -
CELL_SIZE：1マスのピクセルサイズ（320÷10=32px）
テトロミノの形状定義
テトリスの落下ブロック（テトロミノ）の形状を定義します。
script.js
const tetrominoShapes = {
I: [
[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0],
],
O: [
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
],
T: [
[0, 0, 0, 0],
[0, 1, 0, 0],
[1, 1, 1, 0],
[0, 0, 0, 0],
],
S: [
[0, 0, 0, 0],
[0, 1, 1, 0],
[1, 1, 0, 0],
[0, 0, 0, 0],
],
Z: [
[0, 0, 0, 0],
[1, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0],
],
J: [
[0, 0, 0, 0],
[1, 0, 0, 0],
[1, 1, 1, 0],
[0, 0, 0, 0],
],
L: [
[0, 0, 0, 0],
[0, 0, 1, 0],
[1, 1, 1, 0],
[0, 0, 0, 0],
],
};
テトロミノの種類
テトリスには7種類の基本形状があります：
- I：棒状（4マス一直線）
- O：正方形（2×2の四角）
- T：T字型
- S：S字型（右向き）
- Z：Z字型（左向き）
- J：J字型（左向きL字）
- L：L字型（右向きL字）
各形状は4×4の格子で表現され、1がブロック部分、0が空白部分を表します。
テトロミノの色設定
各テトロミノに色を割り当てます。
script.js
const tetrominoColors = {
I: "cyan",
O: "yellow",
T: "purple",
S: "green",
Z: "red",
J: "blue",
L: "orange",
};
色の選択理由
これらの色は一般的なテトリスゲームで使用される標準的な色です。各テトロミノを区別しやすくするために、異なる色が割り当てられています。
第1回のまとめ
今回は、テトリスゲーム作成の基礎部分を実装しました：
- プロジェクト構成の設定
- HTMLファイルの作成（Canvas要素の配置）
- Canvasの初期化と背景の描画
- ゲームグリッドの設定
- テトロミノの形状と色の定義
次回の記事では、実際にテトロミノを画面に描画し、動かす処理を実装していきます。
動作確認
現在の段階では、ブラウザで index.html を開くと、黒い四角形（ゲーム画面）が表示されるはずです。まだゲームとしての機能はありませんが、これがテトリスゲームの土台となります。