當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

用纯JavaScript制作扫雷游戏-1

發布時間：2023/12/10 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了用纯JavaScript制作扫雷游戏-1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網頁掃雷游戲 - part 1🥳

前些天在網上閑逛，偶然看到大神們制作的網頁版經典游戲掃雷，正好自己也在學習JavaScript，于是自己嘗試著做一個網頁版的掃雷游戲。

寫代碼之前

在寫代碼之前，需要對整個項目進行需求分析和實現順序。

確定頁面結構
實現基本頁面結構
實現基本頁面樣式
JavaScript實現基本邏輯

基本頁面結構

基本的頁面結構比較簡單，只需要幾個按鈕，再加個掃雷游戲主區域，頁腳需要顯示剩余的雷的數量。

按鈕區域
- 用來切換初級/中級/高級模式，以及重新開始按鈕。
主區域
- 用來游戲操作的區域，左鍵點擊顯示數字或雷，右鍵進行標記。
頁腳區域
- 顯示剩余的雷的數量。

代碼實現

game.html:

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js-掃雷游戲</title> </head> <body><div><div><button>初級</button><button>中級</button><button>高級</button><button>重新開始</button></div><div></div><div><span>剩余雷數：</span><span></span></div></div> </body> </html>

首先我把lang改成了中文(<html lang="zh">)，省的預覽的時候瀏覽器老是彈出是否翻譯。
body下有一個div，其中有三個div，即三個區域。

class屬性設置

接下來需要設置div的class屬性，方便后續操作。
其中在頁腳區域需要有兩個span，后面的一個span需要實時顯示剩余的雷的數量,所以需要單獨給個span，而且有id屬性-MineNum。
game.html:

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js-掃雷游戲</title> </head> <body><div class="main-body"><div class="btn-area"><button>初級</button><button>中級</button><button>高級</button><button>重新開始</button></div><div class="games-area"></div><div class="info-area"><span>剩余雷數：</span><span id="MineNum"></span></div></div> </body> </html>

基本頁面樣式

由于三個區域的順序是從上到下依次排序，需要對中，故使用flex布局很方便。

基本頁面樣式，game.css:

:root{--main: rgb(255, 193, 7);--mainActive: rgb(255, 193, 7, 0.8);--out: rgb(248, 219, 131);--red: #dc3545;--white: #fefefe;--black: #010101;--boxShadow: rgba(100,100,100,0.4);--btnBack: #f1f2f1; } .main-body{width: 100%;height: auto;background-color: var(--white);/* flex 布局 */display: flex;align-items: center;flex-direction: column; } .btn-area{margin: 10px 0; } /* 按鈕樣式 */ .btn-area button{padding: 5px 10px;outline: none;background: none;border: none;background-color: var(--main);border:3px solid var(--white);color: var(--white);font-size: 16px;cursor: pointer;transition: .3s ease-in-out;border-radius: 3px; } /* 按鈕-鼠標移入樣式 */ .btn-area button:hover{background-color: var(--mainActive); } /* 按鈕-鼠標按下去時樣式 */ .btn-area button:active{border: 3px solid var(--out);border-radius: 3px;background-color: var(--mainActive); } /* 按鈕按下之后的樣式 */ .btn-area button.active{background-color: var(--red); }.info-area{margin-top: 5px; }

當然，需要在html中引入：<link rel="stylesheet" href="game.css">

首先我在頁面中定義了一些顏色變量，方便顏色管理。

:root{--main: rgb(255, 193, 7);--mainActive: rgb(255, 193, 7, 0.8);--out: rgb(248, 219, 131);--red: #dc3545;--white: #fefefe;--black: #010101;--boxShadow: rgba(100,100,100,0.4);--btnBack: #f1f2f1; }

給到按鈕一個過度動畫效果：transition: .3s ease-in-out;

在瀏覽器打開查看效果：

最后

確定頁面結構
實現基本頁面結構
實現基本頁面樣式
JavaScript實現基本邏輯

接著——【網頁掃雷游戲 - part 2】

總結

以上是生活随笔為你收集整理的用纯JavaScript制作扫雷游戏-1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Unicode中文编码表
下一篇： Spring3向Spring4升级过程中