在之前的兩篇文章中，我們通過介紹 Web 語言的編程軟件與簡易的網(wǎng)頁編程實例來說明 HTML/CSS 和 JavaScript 的概況及關(guān)系。

如果還未了解過 Web 編程的小伙伴可以先參考前兩個文章：

新一代的 HTML+CSS+JavaScript IDE - Lightly

HTML / CSS / JS 編程入門 —— 制作可切換主題的簡單網(wǎng)頁

這一篇文章將進(jìn)一步深入使用 JavaScript 進(jìn)行編程，從零開始搭建簡易的俄羅斯方塊游戲。

目錄

1. 俄羅斯方塊游戲簡介

2. 俄羅斯方塊的游戲元素

3. 在 Lightly 進(jìn)行 HTML 和 CSS 的簡要設(shè)置

4. 使用 JavaScript 實現(xiàn)俄羅斯方塊游戲

5. 擴展作業(yè)

俄羅斯方塊簡介

俄羅斯方塊是一款由蘇聯(lián)軟件工程師制造的益智游戲。這款游戲誕生于 1984 年，期間曾被任天堂游戲買下版權(quán)，在當(dāng)年的任系掌機 GameBoy 中風(fēng)靡一時。

俄羅斯方塊的游戲邏輯十分簡單，只需要將掉落的方塊拼湊成完整的一行后，即可消除得分。隨著游戲升級，俄羅斯方塊掉落的速度也會逐漸增加，提升游戲難度和趣味性。時至今日，俄羅斯方塊仍舊是頗受歡迎的游戲，不同的游戲廠家也將俄羅斯方塊開發(fā)成符合現(xiàn)代化審美、具有多人聯(lián)機的休閑游戲。

俄羅斯方塊的游戲元素

在開始編寫俄羅斯方塊游戲之前，我們需要理清游戲的元素，以便后期編程參考：

俄羅斯方塊的種類

俄羅斯方塊根據(jù)形狀和方向的不同，大致可分為 7 種方塊：

在編寫代碼時，我們需要根據(jù)方塊所占的空間，通過 4x3（I 形方塊）、2x2（O 形方塊）和 3x3（其他方塊）在 JavaScript 中直接繪制。

思考題 - 既然其他方塊的高度都只占 2 格，為什么其他方塊不是通過 3x2 的占位符繪制？

俄羅斯方塊的操作

俄羅斯方塊的操作同樣十分簡單，我們只需要將方塊設(shè)定為自動跌落，并在鍵盤中設(shè)置方向鍵的功能就足以完成游戲。其中，左右鍵可左右移動方塊，上鍵可旋轉(zhuǎn)方塊，下鍵可加快方塊的掉落速度。當(dāng)然，你也可以在按鍵設(shè)置中添加其他功能，例如：使用空格鍵直接掉落。

HTML 和 CSS 的簡要設(shè)置

作為輕量且功能強大的集成開發(fā)工具，Lightly 同樣能勝任編寫俄羅斯方塊的任務(wù)。我們將使用 Lightly 的 HTML+CSS+JavaScript IDE，逐步制作并實時檢視代碼效果，完成俄羅斯方塊的開發(fā)。

制作俄羅斯方塊的重點在于使用 JavaScript 編程，因此俄羅斯方塊頁面的 HTML 和 CSS 非常簡單，只需要短短的幾行代碼即可。復(fù)習(xí)一下之前所學(xué)過的架構(gòu)、設(shè)計和功能原則，HTML 在這次的代碼中僅負(fù)責(zé)關(guān)聯(lián)和喚起 CSS 及 JavaScript 文本，而 CSS 只需要負(fù)責(zé)設(shè)置背景、畫布和按鈕的基本設(shè)計。

HTML 基本設(shè)置

CSS 基本設(shè)置

CSS 主要涵蓋頁面的基本設(shè)計，小伙伴可根據(jù)自己的喜好，在 Lightly 的 CSS 文件夾中找到 style.css 文件，然后嘗試參考 CSS 代碼調(diào)整字體、顏色、按鈕等。

使用 JavaScript 編寫俄羅斯方塊游戲

完成 HTML 和 CSS 設(shè)置后，我們便可以開始編寫 JavaScript 文本。如果沒有先對 HTML 和 CSS 進(jìn)行設(shè)置的話，編寫 JavaScript 時可能無法實時看到反饋。

基礎(chǔ)設(shè)置

在 Lightly 的 js 文件夾中找到 script.js 文件后，首先對非游戲相關(guān)的按鈕進(jìn)行設(shè)置。例如，設(shè)置 HTML 文件中的常數(shù)、添加“操作說明”按鈕彈出的模塊等。

繪制游戲范圍

我們的方塊將出現(xiàn)在這個游戲區(qū)域內(nèi)，同時也只能在這個區(qū)域內(nèi)移動：

繪制方塊

在開始繪制方塊前，我們需要先使用矩陣定義我們的方塊主體：

接著我們可以通過 function 函數(shù)，根據(jù)占位符繪制出方塊的形狀：

小伙伴可以嘗試動腦筋，畫出其他形狀的方塊。至于為什么其他形狀的方塊需要用 3x3 的占位符繪制，是因為這些形狀需要旋轉(zhuǎn)，必須為它們預(yù)留空間。只要將方塊占位符反向排列，我們就可以得到旋轉(zhuǎn)效果：

設(shè)置方塊掉落程序

俄羅斯方塊大約按照每秒一格的速度掉落，我們將掉落間隔設(shè)置為 1000 毫秒后，通過 function 開始正計時。每當(dāng)計時器大于 1000 毫秒后，便會運行 playerDrop() 程序，方塊往下掉落一格。

設(shè)置按鍵

俄羅斯方塊除了會自動掉落外，還需要設(shè)置按鍵讓玩家控制方塊的移動、旋轉(zhuǎn)和掉落速度等。在這個部分，我們可以通過監(jiān)聽鍵盤按鍵輸入來實現(xiàn)，然后根據(jù)相應(yīng)按鍵的 KeyCode 來判斷玩家按下的按鍵，最后返回相應(yīng)的操作。

設(shè)置得分系統(tǒng)

最后，我們設(shè)置程序判斷方塊是否占滿一整列，清空完整列并計入得分：

自此，你已經(jīng)掌握了制作俄羅斯方塊的基本知識，但知識總是需要實踐才能加以運用和鞏固。你可以選擇直接查看 Lightly 中的完整代碼進(jìn)行修改，也可以嘗試新建項目從零開始編寫，驗收你所學(xué)的知識，親手制作人生中的第一個游戲。

此外，你也可以在俄羅斯方塊中添加方塊預(yù)告、等級等功能，也可以進(jìn)一步完善 CSS 和 JavaScript，讓游戲界面和方塊變得更美觀。