與Vanilla JS和CSS製作基於瀏覽器的遊戲 - SitePoint

本文展示了僅使用香草JavaScript和CSS構建基於瀏覽器的標誌遊戲遊戲，展示了沒有外部庫或框架的現代Web技術的力量。讓我們逐步展開創建這個引人入勝的遊戲。

概念：

該遊戲提出了旗幟表情符號和多項選擇選項。玩家選擇一個國家，收到反饋並進行回合。

步驟1：基本結構

我們需要一個國家及其旗幟清單（使用表情符號）。一個簡單的接口顯示標誌和五個答案按鈕。 CSS使用網格佈局進行響應設計。項目結構包括一個HTML文件，一個包含鄉村數據的data.json文件，以及用於JavaScript，助手功能，CSS和圖像的文件夾。

步驟2：簡單的原型

我們使用fetch加載data.json ，然後開始遊戲。 startGame功能隨機將國家列表隨機，選擇答案，選擇四個國家，並使用標誌和答案按鈕更新DOM。 checkAnswer函數評估玩家選擇，提供反饋。 Fisher-Yates洗牌算法隨機使國家訂單隨機。

步驟3：模塊化代碼

為了改善代碼組織，我們將使用JavaScript模塊。 HTML導入step3.js ，該速度從單獨的文件中導入輔助函數（ loadCountries和shuffle ）。遊戲邏輯被封裝在Game類中，增強了數據完整性和可維護性。

步驟4：得分和比賽

現在， Game構造函數包括numTurns 。 DOM已更新以包括分數顯示，一個重播按鈕和遊戲屏幕。 start方法初始化了分數並轉動計數器，而nextTurn方法處理圓形進程，更新分數並觸發了所有轉彎時的遊戲範圍。 gameOver方法顯示最終分數。

步驟5：動畫

CSS動畫增強了用戶體驗。 KeyFrames為國家列表創建滑動動畫，在轉彎之間平穩地出現和消失。 animationend事件可確保平穩的過渡。

步驟6：最後一步

添加標題屏幕以提供上下文。根據最終分數實現播放器評級系統。添加動畫以慶祝正確的答案。

進一步的增強：

該文章提出了一些改進：

• 添加聲音效果。
• 使用網絡工人啟用離線遊戲。
• 將游戲統計數據存儲在本地存儲中。
• 添加社交媒體共享功能。

該教程有效地演示瞭如何使用最小的代碼創建功能和引人入勝的遊戲，從而突出了Vanilla JavaScript和CSS的功能。 CSS動畫的模塊化方法和使用展示了現代網絡開發的最佳實踐。

以上是與Vanilla JS和CSS製作基於瀏覽器的遊戲 - SitePoint的詳細內容。更多資訊請關注PHP中文網其他相關文章！