JavaScript 寫遊戲 : 俄羅斯方塊 (转)

发布时间：2023-05-14 10:29:00

俄羅斯方塊（Tetris）是一款非常經典的遊戲，它一開始在1984年由俄羅斯人阿列克謝·帕惕諾夫開發，自此以後就成為了各種設備上不可或缺的遊戲之一。今天我們就來嘗試用 JavaScript 寫一個俄羅斯方塊遊戲。

首先，我們需要創建一個 HTML 文件。在 HTML 文件中，我們需要建立一個遊戲區域，並在遊戲區域中顯示遊戲的狀態。遊戲區域可以使用一個 <div> 元素作為容器。

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        #game-board {
            border: 2px solid #000;
            width: 300px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script src="tetris.js"></script>
</body>
</html>

在 CSS 中，我們設置了 <div> 元素的樣式，使其具有一個黑色的邊框，寬度為 300 像素，高度為 600 像素。我們還包含了一個名為 tetris.js 的 JavaScript 文件，以便在其內容中編寫我們的遊戲代碼。

接下來，我們需要定義幾個變量和函數，以便在 JavaScript 代碼中描述遊戲的狀態和行為。

首先，我們需要定義方塊的形狀。每個方塊都可以用一個矩陣來描述，矩陣中的每個位置要么是空的，要么包含方塊的一部分。我們可以定義一些常量，來描述不同類型的方塊。

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

const O_BLOCK = [
    [2, 2],
    [2, 2]
];

const T_BLOCK = [
    [0, 3, 0],
    [3, 3, 3],
    [0, 0, 0]
];

const J_BLOCK = [
    [4, 0, 0],
    [4, 4, 4],
    [0, 0, 0]
];

const L_BLOCK = [
    [0, 0, 5],
    [5, 5, 5],
    [0, 0, 0]
];

const S_BLOCK = [
    [0, 6, 6],
    [6, 6, 0],
    [0, 0, 0]
];

const Z_BLOCK = [
    [7, 7, 0],
    [0, 7, 7],
    [0, 0, 0]
];

其中，I_BLOCK代表了I型方塊的形狀，O_BLOCK代表了O型方塊的形狀，其它同理。

下一步，我們需要創建一個函數，用於創建新的方塊。這個函數應該返回一個隨機的方塊形狀，以及方塊出現的初始位置。

function newBlock() {
    const blockTypes = [I_BLOCK, O_BLOCK, T_BLOCK, J_BLOCK, L_BLOCK, S_BLOCK, Z_BLOCK];
    const blockIndex = Math.floor(Math.random() * blockTypes.length);
    const block = blockTypes[blockIndex];
    const x = Math.floor((10 - block[0].length) / 2);
    const y = -block.length;
    return { shape: block, x: x, y: y };
}

在上面的代碼中，我們隨機選擇一種方塊形狀，並計算出該方塊的出現位置（位於遊戲區域的頂部中央）。最後，將方塊的形狀和位置打包成對象，並返回它。

在這個遊戲中，我們需要一個變量來保存當前方塊的狀態。我們還需要一個變量來保存遊戲區域中的狀態，以便在渲染時使用。

let currentBlock = newBlock();
let gameBoard = Array(20).fill().map(() => Array(10).fill(0));

我們使用 newBlock() 函数創建一個新的方塊，並將其分配給 currentBlock 變量。我們還使用 Array() 函数創建一個具有20行和10列的數組，該數組表示遊戲區域。每個元素的初始值都為 0，表示該位置沒有方塊。在遊戲進行時，該數組會隨著方塊的移動和堆疊而不斷更新。

接下來，我們可以定義函數 rotateBlock() 用於旋轉方塊。這個函數接受一個方塊對象作為參數，並返回一個新的方塊對象，其形狀為旋轉後的形狀。

function rotateBlock(block) {
    const len = block.shape.length;
    const newBlockShape = Array(len).fill().map(() => Array(len).fill(0));
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            newBlockShape[i][j] = block.shape[len - j - 1][i];
        }
    }
    return { shape: newBlockShape, x: block.x, y: block.y };
}

在這個函數中，我們創建了一個與原始方塊形狀大小相等的新數組 newBlockShape，並遍歷原始形狀中的每個元素。將每個元素旋轉90度（將行索引轉換為列索引，將列索引轉換為行索引），並將結果存儲在新數組中。最後，將新的形狀和原始方塊的位置打包，並返回一個新的方塊對象。

接下來，我們可以定義函數 moveBlock() 用於移動方塊。這個函數接受一個方塊對象和移動方向作為參數，並返回一個新的方塊對象，其位置已經更新。

function moveBlock(block, dx, dy) {
    return { shape: block.shape, x: block.x + dx, y: block.y + dy };
}

在這個函數中，我們只是返回一個新方塊對象，其位置等於原來的方塊位置加上給定的偏移量。

最後，我們需要定義邏輯 `