當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

用纯JavaScript制作扫雷游戏-1

發(fā)布時(shí)間：2023/12/10 javascript 38 豆豆

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

網(wǎng)頁掃雷游戲 - part 1🥳

前些天在網(wǎng)上閑逛，偶然看到大神們制作的網(wǎng)頁版經(jīng)典游戲掃雷，正好自己也在學(xué)習(xí)JavaScript，于是自己嘗試著做一個(gè)網(wǎng)頁版的掃雷游戲。

寫代碼之前

在寫代碼之前，需要對(duì)整個(gè)項(xiàng)目進(jìn)行需求分析和實(shí)現(xiàn)順序。

確定頁面結(jié)構(gòu)
實(shí)現(xiàn)基本頁面結(jié)構(gòu)
實(shí)現(xiàn)基本頁面樣式
JavaScript實(shí)現(xiàn)基本邏輯

基本頁面結(jié)構(gòu)

基本的頁面結(jié)構(gòu)比較簡單，只需要幾個(gè)按鈕，再加個(gè)掃雷游戲主區(qū)域，頁腳需要顯示剩余的雷的數(shù)量。

按鈕區(qū)域
- 用來切換初級(jí)/中級(jí)/高級(jí) 模式，以及重新開始按鈕。
主區(qū)域
- 用來游戲操作的區(qū)域，左鍵點(diǎn)擊顯示數(shù)字或雷，右鍵進(jìn)行標(biāo)記。
頁腳區(qū)域
- 顯示剩余的雷的數(shù)量。

代碼實(shí)現(xiàn)

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>初級(jí)</button><button>中級(jí)</button><button>高級(jí)</button><button>重新開始</button></div><div></div><div><span>剩余雷數(shù)：</span><span></span></div></div> </body> </html>

首先我把lang改成了中文(<html lang="zh">)，省的預(yù)覽的時(shí)候?yàn)g覽器老是彈出是否翻譯。
body下有一個(gè)div，其中有三個(gè)div，即三個(gè)區(qū)域。

class屬性設(shè)置

接下來需要設(shè)置div的class屬性，方便后續(xù)操作。
其中在頁腳區(qū)域需要有兩個(gè)span，后面的一個(gè)span需要實(shí)時(shí)顯示剩余的雷的數(shù)量,所以需要單獨(dú)給個(gè)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>初級(jí)</button><button>中級(jí)</button><button>高級(jí)</button><button>重新開始</button></div><div class="games-area"></div><div class="info-area"><span>剩余雷數(shù)：</span><span id="MineNum"></span></div></div> </body> </html>

基本頁面樣式

由于三個(gè)區(qū)域的順序是從上到下依次排序，需要對(duì)中，故使用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; } /* 按鈕-鼠標(biāo)移入樣式 */ .btn-area button:hover{background-color: var(--mainActive); } /* 按鈕-鼠標(biāo)按下去時(shí)樣式 */ .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; }

當(dāng)然，需要在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; }

給到按鈕一個(gè)過度動(dòng)畫效果：transition: .3s ease-in-out;

在瀏覽器打開查看效果：

最后

確定頁面結(jié)構(gòu)
實(shí)現(xiàn)基本頁面結(jié)構(gòu)
實(shí)現(xiàn)基本頁面樣式
JavaScript實(shí)現(xiàn)基本邏輯

接著——【網(wǎng)頁掃雷游戲 - part 2】

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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