HTMLとJavaScriptで作るテトリス：詳細なステップバイステップガイド

はじめに
JavaScriptでテトリスを作成する方法
テトリス開発のプロセス
応用例と発展的な機能
1. スマホ対応
2. 追加機能の実装
まとめ
よくある質問
結論

はじめに

テトリスは、シンプルながらも奥深いゲームで、多くのプログラマーにとって初めてのプロジェクトとして人気があります。このゲームは、1984年にアレクセイ・パジトノフによって開発され、以来、さまざまなプラットフォームで愛され続けています。本記事では、HTMLとJavaScriptを用いてPCで動作するテトリスを作成する方法を詳しく解説します。コードの詳細な説明は行いませんが、開発プロセスの各ステップで重要なポイントや役立つヒントを提供します。

テトリスの魅力は、そのシンプルさと中毒性にあります。プレイヤーは落下するブロック（テトリミノ）を回転させ、ラインを埋めて消していくという簡単なルールに基づいています。このプロジェクトを通じて、JavaScriptの基本的なスキルを磨くだけでなく、ゲーム開発の楽しさも体験できます。

テトリスを作成するには、まずJavaScriptの基本知識が必要です。特に、変数の宣言、配列の操作、Mathオブジェクトのメソッド、DOM操作などが重要です。また、基本的な開発環境を整えることも不可欠です。HTMLファイルを作成し、キャンバス要素を用意してJavaScriptファイルをリンクするところから始めます。

さらに、ゲームの進行を管理するためのタイマーの使い方や、テトリミノの生成、配置、衝突判定、消去、ゲームオーバーの条件設定なども学びます。これらのステップを一つずつ解説しながら、テトリスを完成させるための具体的なアドバイスを提供します。

この記事を通じて、テトリスの基本的な仕組みを理解し、自分だけのオリジナルテトリスを作成する手助けとなることを目指しています。プログラミング初心者から中級者まで、幅広い層に向けた内容となっていますので、ぜひ最後までお楽しみください。次に、JavaScriptの基本知識から始めていきましょう。

JavaScriptでテトリスを作成する方法

JavaScriptの基本知識

テトリスを作成する前に、まずはJavaScriptの基本知識を復習しておきましょう。テトリスのようなゲームを作成するには、いくつかの重要な概念を理解しておく必要があります。以下に、特に重要なポイントを挙げます。

変数の宣言: JavaScriptには、var, let, constという3つの異なる方法で変数を宣言できます。varは関数スコープであり、古いコードでよく見られますが、現在はletやconstが推奨されます。letはブロックスコープを持ち、再代入が可能です。constは再代入が不可能な定数を宣言するために使用されます。テトリスでは、状態を保持するためにこれらの変数を適切に使い分けることが重要です。
配列の操作: テトリスのゲームボードは二次元配列で表現されます。配列の初期化や操作方法を理解しておくことは不可欠です。たとえば、配列の初期化方法や、特定の位置に値を挿入する方法、二次元配列を操作するためのループ処理などを学びましょう。
Mathオブジェクトのメソッド: ランダムなテトリミノの生成には、Math.random()を使います。また、整数を扱う際にはMath.floor()が便利です。これらのメソッドを駆使して、ゲームのランダム要素を実装します。
DOM操作: ゲームのインターフェースを操作するために、DOM(Document Object Model)の操作方法も理解しておく必要があります。特に、document.getElementByIdやinnerHTMLを使って、ゲームの表示を更新する方法を学びましょう。また、ボタンの実装やイベントリスナーの設定も重要な要素です。
これらの基本知識をしっかりと理解した上で、実際にテトリスの作成に取り組んでいきます。次に、開発環境の構築と基本設定について説明します。

環境構築と基本設定

テトリスを作るためには、基本的な開発環境を整える必要があります。以下の手順に従って、環境を構築しましょう。

HTMLファイルの作成:

まず、テトリスのゲーム画面を表示するためのHTMLファイルを作成します。このファイルには、キャンバス要素を用意します。キャンバスは、テトリスのゲームボードを描画するための領域です。以下は基本的なHTMLファイルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テトリス</title>
</head>
<body>
    <canvas id="tetris" width="300" height="600"></canvas>
    <script src="tetris.js"></script>
</body>
</html>

JavaScriptファイルのリンク:

次に、JavaScriptファイルをHTMLにリンクします。上記の例では、<script src="tetris.js"></script>タグを使用してtetris.jsという名前のJavaScriptファイルを読み込んでいます。このファイルにゲームロジックを記述します。

これで基本的な環境構築は完了です。次に、キャンバスの設定と描画について説明します。

キャンバスの設定と描画

テトリスのゲーム画面を描画するために、HTMLのキャンバス要素を使用します。キャンバスは、2Dグラフィックスを描画するための非常に便利なツールであり、テトリスのようなゲームを作成する際には欠かせない要素です。このセクションでは、キャンバスの設定方法と、テトリミノを描画する具体的な方法について説明します。

Contextオブジェクトの取得

キャンバスに描画を行うためには、まずキャンバス要素のcontextオブジェクトを取得する必要があります。contextオブジェクトは、キャンバスに描画を行うためのメソッドやプロパティを提供します。以下のコードは、HTMLファイルからキャンバス要素を取得し、そのcontextオブジェクトを取得する方法を示しています。

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

このコードでは、getElementByIdメソッドを使用してHTML内のキャンバス要素を取得し、getContext('2d')メソッドを使用して2D描画コンテキストを取得しています。このコンテキストを使用して、キャンバス上に図形を描画したり、テキストを表示したりすることができます。

描画メソッドの活用

次に、キャンバスにテトリミノを描画する方法を説明します。テトリミノは、ゲーム中に落下するさまざまな形状のブロックです。これらのブロックをキャンバスに描画するためには、fillRectメソッドを使用します。

以下は、簡単な四角形をキャンバスに描画する例です。

context.fillStyle = 'blue';
context.fillRect(10, 10, 30, 30);

fillStyleプロパティは、描画する図形の色を設定します。fillRect(x, y, width, height)メソッドは、指定した位置とサイズの矩形を描画します。この例では、青色の四角形が描画されます。

テトリミノの描画

テトリスでは、複数のブロックから構成されるテトリミノを描画する必要があります。テトリミノの形状は、二次元配列として定義されることが一般的です。以下は、テトリミノの形状を定義し、それをキャンバスに描画する例です。

const tetromino = [
    [1, 1, 1],
    [0, 1, 0]
];

function drawTetromino(tetromino, offsetX, offsetY) {
    context.fillStyle = 'blue';
    tetromino.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value) {
                context.fillRect((offsetX + x) * 30, (offsetY + y) * 30, 30, 30);
            }
        });
    });
}

drawTetromino(tetromino, 5, 5);

このコードでは、tetromino配列をループ処理し、valueが1である位置に四角形を描画します。offsetXとoffsetYは、テトリミノの位置を指定するためのオフセット値です。drawTetromino関数を呼び出すことで、キャンバス上にテトリミノを描画できます。

描画の更新

ゲームの進行中にテトリミノが移動したり回転したりするため、描画を更新する必要があります。これを実現するためには、まずキャンバスをクリアし、その後に新しい位置にテトリミノを描画します。以下のコードは、キャンバスをクリアしてからテトリミノを描画する方法を示しています。

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function updateCanvas() {
    clearCanvas();
    drawTetromino(tetromino, offsetX, offsetY);
}

// テトリミノを移動させる際にキャンバスを更新
offsetX++;
updateCanvas();

clearRectメソッドは、指定した矩形領域をクリアします。updateCanvas関数を呼び出すことで、キャンバスをクリアし、新しい位置にテトリミノを描画します。これにより、テトリミノの動きがスムーズに表示されます。

まとめ

ここまでで、HTMLのキャンバス要素を使用してテトリスのゲーム画面を描画する方法について説明しました。キャンバスの設定、テトリミノの描画、そして描画の更新の基本を理解することで、テトリスの基礎部分が完成します。次に、テトリミノの動きと回転について学び、さらにゲームの進行を管理する方法を詳しく見ていきましょう。

テトリミノの動きと回転

テトリミノの動きや回転を実装するには、JavaScriptのイベントリスナーを使います。テトリスでは、テトリミノを左右に移動させたり、下に落としたり、回転させたりする操作が必要です。このセクションでは、これらの操作をどのように実装するかを詳しく説明します。

矢印キーによる移動

テトリスでは、プレイヤーが矢印キーを使ってテトリミノを左右に移動させることができます。JavaScriptのkeydownイベントを使用して、この操作を実装します。

まず、keydownイベントリスナーを追加します。これにより、ユーザーがキーボードの矢印キーを押したときに特定の関数が呼び出されます。

document.addEventListener('keydown', handleKeyPress);

function handleKeyPress(event) {
    if (event.key === 'ArrowLeft') {
        moveTetromino(-1);
    } else if (event.key === 'ArrowRight') {
        moveTetromino(1);
    } else if (event.key === 'ArrowDown') {
        dropTetromino();
    }
}

このコードでは、handleKeyPress関数が呼び出され、押されたキーに応じてテトリミノを移動させます。moveTetromino関数はテトリミノを左右に移動させ、dropTetromino関数はテトリミノを下に落とします。

次に、moveTetromino関数を実装します。この関数は、現在のテトリミノの位置を更新し、新しい位置にテトリミノを描画します。

let offsetX = 5;
let offsetY = 0;

function moveTetromino(direction) {
    offsetX += direction;
    updateCanvas();
}

function dropTetromino() {
    offsetY++;
    updateCanvas();
}

このコードでは、direction引数が-1の場合は左に、1の場合は右にテトリミノを移動させます。また、dropTetromino関数はテトリミノを1行下に移動させます。

回転の制御

テトリスでは、テトリミノを回転させることも重要な操作です。テトリミノの回転を実装するには、テトリミノの形状を表す二次元配列を回転させる必要があります。ここでは、90度回転させる関数を実装します。

function rotateTetromino() {
    const N = tetromino.length;
    const newTetromino = [];
    for (let y = 0; y < N; y++) {
        newTetromino[y] = [];
        for (let x = 0; x < N; x++) {
            newTetromino[y][x] = tetromino[N - 1 - x][y];
        }
    }
    tetromino = newTetromino;
    updateCanvas();
}

document.addEventListener('keydown', event => {
    if (event.key === 'ArrowUp') {
        rotateTetromino();
    }
});

このコードでは、rotateTetromino関数がテトリミノの二次元配列を90度回転させます。ArrowUpキーが押されたときにこの関数が呼び出されます。

画面内での回転と回転制限の設定

テトリミノが画面の端で回転する際に、画面外に出ないようにする必要があります。このためには、回転後の位置をチェックし、必要に応じて位置を調整します。

function rotateTetromino() {
    const N = tetromino.length;
    const newTetromino = [];
    for (let y = 0; y < N; y++) {
        newTetromino[y] = [];
        for (let x = 0; x < N; x++) {
            newTetromino[y][x] = tetromino[N - 1 - x][y];
        }
    }
    if (isValidPosition(newTetromino, offsetX, offsetY)) {
        tetromino = newTetromino;
        updateCanvas();
    }
}

function isValidPosition(tetromino, offsetX, offsetY) {
    for (let y = 0; y < tetromino.length; y++) {
        for (let x = 0; x < tetromino[y].length; x++) {
            if (tetromino[y][x] && (offsetX + x < 0 || offsetX + x >= canvas.width / 30 || offsetY + y >= canvas.height / 30)) {
                return false;
            }
        }
    }
    return true;
}

このコードでは、isValidPosition関数がテトリミノの新しい位置が有効かどうかをチェックします。無効な場合は、回転をキャンセルします。

まとめ

テトリミノの動きと回転を実装することで、テトリスの基本的な操作が実現されます。キーボードのイベントリスナーを使ってテトリミノを操作し、適切に位置をチェックして描画を更新することが重要です。次に、ゲームの進行管理について学び、ゲーム全体のフローを完成させましょう。

ゲームの進行管理

テトリスのゲームの進行を管理するためには、ゲームの状態を追跡し、定期的に画面を更新する必要があります。これは、テトリミノの落下速度を制御し、ゲームオーバーの条件を設定するために重要です。ここでは、タイマーを使用してゲームの進行を管理する方法と、setIntervalおよびclearIntervalの使い方について説明します。

タイマーの設定

テトリスでは、テトリミノが一定の間隔で下に落ちていきます。この落下を実現するために、JavaScriptのsetInterval関数を使用します。この関数は、指定した時間間隔で指定した関数を繰り返し実行します。

以下のコードは、1秒ごとにテトリミノを1行下に移動させるタイマーを設定する例です。

let dropInterval = 1000;
let dropTimer = setInterval(dropTetromino, dropInterval);

function dropTetromino() {
    offsetY++;
    if (!isValidPosition(tetromino, offsetX, offsetY)) {
        offsetY--;
        placeTetromino();
        resetTetromino();
    }
    updateCanvas();
}

このコードでは、dropTetromino関数が1秒ごとに呼び出され、テトリミノを1行下に移動させます。isValidPosition関数は、テトリミノが新しい位置に配置できるかどうかをチェックし、配置できない場合はテトリミノを元の位置に戻して新しいテトリミノを生成します。

setIntervalとclearIntervalの使い方

ゲームの進行を制御するために、setIntervalを使用してテトリミノの落下を管理します。また、特定の条件が満たされたときにタイマーを停止するためにclearIntervalを使用します。たとえば、ゲームオーバー時にはタイマーを停止する必要があります。

以下のコードは、ゲームオーバー時にタイマーを停止する例です。

function gameOver() {
    clearInterval(dropTimer);
    alert('ゲームオーバー');
}

function checkGameOver() {
    if (!isValidPosition(tetromino, offsetX, offsetY)) {
        gameOver();
    }
}

このコードでは、gameOver関数がタイマーを停止し、ゲームオーバーのメッセージを表示します。checkGameOver関数は、テトリミノが新しい位置に配置できない場合にゲームオーバーをチェックします。

テトリミノの配置とリセット

テトリミノが底に達したり、他のブロックと衝突した場合は、新しいテトリミノを生成する必要があります。これを実現するために、テトリミノを固定し、新しいテトリミノを生成する関数を作成します。

function placeTetromino() {
    tetromino.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value) {
                board[y + offsetY][x + offsetX] = value;
            }
        });
    });
}

function resetTetromino() {
    tetromino = getRandomTetromino();
    offsetX = 5;
    offsetY = 0;
    if (!isValidPosition(tetromino, offsetX, offsetY)) {
        gameOver();
    }
}

このコードでは、placeTetromino関数が現在のテトリミノをボードに固定し、resetTetromino関数が新しいテトリミノを生成します。新しいテトリミノが配置できない場合は、ゲームオーバーとなります。

以上のように、タイマーを使用してテトリミノの落下を制御し、特定の条件でタイマーを停止することでゲームの進行を管理します。また、テトリミノが固定された際には、新しいテトリミノを生成し、ゲームを続行します。これにより、テトリスの基本的なゲームループが完成します。

まとめ

ゲームの進行管理は、テトリスのようなゲームを作成する際の重要な要素です。タイマーを使用してテトリミノの落下を制御し、ゲームオーバーの条件を設定することで、ゲームのフローを管理できます。次は、テトリミノの生成と配置、衝突判定とラインの消去、ゲームオーバーの条件について詳しく見ていきましょう。

テトリス開発のプロセス

テトリミノの生成と配置

テトリミノをランダムに生成する方法は、JavaScriptのMathオブジェクトを利用します。具体的には、以下のコードを使用してランダムなテトリミノを生成します。

const tetrominoes = 'IJLOSTZ';
function getRandomTetromino() {
    const randomIndex = Math.floor(Math.random() * tetrominoes.length);
    return tetrominoes[randomIndex];
}

このコードでは、テトリミノの種類を表す文字列からランダムに1つの文字を選び、それに基づいてテトリミノを生成します。生成されたテトリミノは、ゲームボードの上部中央に配置されます。

let currentTetromino = getRandomTetromino();
let currentX = Math.floor(boardWidth / 2) - 1;
let currentY = 0;

衝突判定と消去

衝突判定は、テトリミノが他のブロックやボードの端に接触したかどうかをチェックする重要な機能です。以下のコードは、衝突判定の基本的な実装例です。

function checkCollision(x, y, shape) {
    for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col] && 
                (board[y + row] && board[y + row][x + col]) !== 0) {
                return true;
            }
        }
    }
    return false;
}

この関数は、テトリミノが指定された位置に配置可能かどうかをチェックし、配置不可能な場合はtrueを返します。

ラインの消去は、ゲームの進行をスムーズに保つために不可欠です。以下のコードは、ラインの消去とスコア管理の実装例です。

function removeFullLines() {
    let linesRemoved = 0;
    for (let row = board.length - 1; row >= 0; row--) {
        if (board[row].every(cell => cell !== 0)) {
            board.splice(row, 1);
            board.unshift(new Array(boardWidth).fill(0));
            linesRemoved++;
        }
    }
    return linesRemoved;
}

function updateScore(lines) {
    const points = [0, 40, 100, 300, 1200];
    score += points[lines];
    linesCleared += lines;
}

このコードでは、ボード全体をチェックし、満たされたラインを消去し、新しいラインを追加します。消去されたライン数に応じてスコアが更新されます。

ゲームオーバーの条件

ゲームオーバーは、テトリミノがスタート位置で衝突した場合に発生します。以下のコードは、ゲームオーバーの判定を行います。

function isGameOver() {
    return checkCollision(currentX, currentY, currentTetromino);
}

function gameOver() {
    if (isGameOver()) {
        clearInterval(gameInterval);
        alert('ゲームオーバー！');
    }
}

この関数は、テトリミノが生成された直後に衝突が検出された場合にゲームオーバーを宣言します。

これらの実装を通じて、テトリスのゲーム開発のプロセスをより詳細に理解できるようになりました。テトリミノの生成と配置、衝突判定とラインの消去、そしてゲームオーバーの条件をしっかりと実装することで、スムーズで楽しめるゲーム体験を提供できます。

デバッグとトラブルシューティング

デバッグとトラブルシューティングは、テトリスを開発する上で非常に重要なステップです。ここでは、一般的な問題とその解決方法について詳しく説明します。

一般的な問題と対策

1. テトリミノが正しく表示されない

問題: テトリミノがキャンバス上に正しく表示されない、または期待通りに動かない場合があります。
対策: まず、テトリミノの描画関数を確認し、正しい座標とサイズで描画されているかをチェックします。次に、テトリミノの配列が正しく定義されているかを確認します。

function drawTetromino(tetromino, offsetX, offsetY) {
    context.fillStyle = 'blue';
    tetromino.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value) {
                context.fillRect((offsetX + x) * tileSize, (offsetY + y) * tileSize, tileSize, tileSize);
            }
        });
    });
}

2. 衝突判定が正しく機能しない

問題: テトリミノが他のブロックやボードの端と衝突する際に正しく判定されない場合があります。
対策: 衝突判定関数をデバッグし、正しい座標と範囲でチェックされているか確認します。必要に応じて、デバッグ用のログを追加して、判定の流れを追跡します。

function checkCollision(x, y, shape) {
    for (let row = 0; row < shape.length; row++) {
        for (let col = 0; col < shape[row].length; col++) {
            if (shape[row][col] && 
                (board[y + row] && board[y + row][x + col]) !== 0) {
                console.log(`Collision at (${x}, ${y})`);
                return true;
            }
        }
    }
    return false;
}

3. ラインの消去が正しく行われない

問題: ラインが完全に埋まっても消去されない場合があります。
対策: ライン消去のロジックを再確認し、条件が正しく評価されているかを確認します。また、ライン消去後にボードが正しく更新されているかをチェックします。

function removeFullLines() {
    let linesRemoved = 0;
    for (let row = board.length - 1; row >= 0; row--) {
        if (board[row].every(cell => cell !== 0)) {
            board.splice(row, 1);
            board.unshift(new Array(boardWidth).fill(0));
            linesRemoved++;
        }
    }
    console.log(`${linesRemoved} lines removed`);
    return linesRemoved;
}

デバッグのテクニック

1. コンソールログを活用する

デバッグ中にJavaScriptのconsole.logを多用して、変数の値や関数の実行状況を確認します。これにより、どこで問題が発生しているかを特定しやすくなります。

2. デバッガを使用する

ブラウザのデベロッパーツールを使って、コードをステップ実行し、変数の値を確認します。特に、ブレークポイントを設定して問題の発生箇所を詳細に調べます。

3. コードを小分けにしてテストする

大きな機能を一度に実装するのではなく、小さな部分ごとに実装してテストします。これにより、どの部分に問題があるのかを特定しやすくなります。

よくある問題の解決方法

問題: テトリミノが画面外に出てしまう

解決方法: isValidPosition関数を使用して、テトリミノがボード内に収まるように位置を調整します。

問題: ゲームが突然終了する

解決方法: ゲームオーバーの判定条件を見直し、適切なタイミングで判定されているか確認します。

function isGameOver() {
    if (!isValidPosition(currentTetromino, currentX, currentY)) {
        clearInterval(gameInterval);
        alert('ゲームオーバー！');
    }
}