3Dテトリスの完成

index.html


const start = () => {
    if (gameState === 'initial' || gameState === 'stop') {
        dropBlock();
        gameState = 'running';
    }
};

ゲームの状態が initial か stop であれば、落下ブロックを落とし始めます。それ以外の状態ではなにもしません。

全体のマス目をべて透明にする関数

index.html


const stop = () => {
    if (gameState === 'running') {
        clearTimeout(timeoutId);
        gameState = 'stop';
    }
};

ゲームの状態が running であれば落下ブロックを落とすのを止めます。

全体のマス目をべて透明にする関数

index.html


const reset = () => {
    if (!(gameState === 'initial')) {
        clearTimeout(timeoutId);
        // すべてのマス目を非表示にする
        resetSquares();
        // 新しい落下ブロックを生成する
        initBlock();
        gameState = 'initial';
    }
};

ゲームの状態が initial 以外であれば初期状態に戻します。

すべてのマス目を非表示にする関数

index.html


const resetSquares = () => {
    for (let y = 0; y < fullHeightLength; y++) {
        for (let z = 0; z < widthLength; z++) {
            for (let x = 0; x < widthLength; x++) {
                squares[y][z][x].material = fixedBlockMaterial;
                squares[y][z][x].visible = false;
            }
        }
    }
};

すべてのマス目のマテリアルを fixedBlockMaterial にして、 visible = false に設定します。

イベントリスナーとして登録する

index.html


document.getElementById('start-button').addEventListener('click', start);
document.getElementById('stop-button').addEventListener('click', stop);
document.getElementById('reset-button').addEventListener('click', reset);

ゲームを初期化して完成

index.html


init3D();
initSquares();
initBlock();

落下ブロックの形を変えてテストする

今のままだと複数の層を消すとき、ちゃんと動作するか確認しずらいです。

そこで blockShapeList を次のように変更してテストしてみます。

index.html


        const blockShapeList = [
            [
                [
                    [1, 1, 1],
                    [1, 1, 1],
                    [1, 1, 1],
                ],
                [
                    [1, 1, 1],
                    [1, 1, 1],
                    [1, 0, 1], //ここに一つだけ0がある
                ],
                [
                    [1, 1, 1],
                    [1, 1, 1],
                    [1, 1, 1],
                ],
            ],
        ];

オリジナルの3Dテトリスを作ろう

blockShapeList を変更することで落下ブロックを自由にいくつでも作ることができます。落下ブロックの一辺の長さを変えるときは、 blockSideLength の値も変更してください。

dropInterval を小さくすると落下ブロックの落ちるスピードが速くなります。

widthLength と heightLength を変更することでステージを大きさを変えることができます。

たとえば、widthLength を40、 heightLength を50にしたとすると、40×40×50で8万個のThree.jsのオブジェクトを生成することになります。場合によっては動作が重くなってしまうこともあります。

スコアを表示してブロックを消すごとにスコアが上がっていくようにしてみても面白いと思います。

3Dテトリスの完成

落下ブロックを落とし始める関数

全体のマス目をべて透明にする関数

全体のマス目をべて透明にする関数

すべてのマス目を非表示にする関数

イベントリスナーとして登録する

ゲームを初期化して完成

落下ブロックの形を変えてテストする

オリジナルの3Dテトリスを作ろう