js實(shí)現(xiàn)簡單掃雷
更新時間：2020年11月27日 14:38:27 作者：窮酸的小明
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單掃雷的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)效果：
總體思想：這個掃雷難點(diǎn)主要就兩點(diǎn)：第一點(diǎn)就是雷的隨機(jī)分布，我這里使用js動態(tài)生成了10X10的table表格，然后設(shè)定生成20個雷，然后在生成每個格子代表的數(shù)字，雷我們用9表示，因?yàn)?-8要被其他非雷格子使用，然后我們只要一格是雷區(qū)那么周圍的格子都加一，這樣我們的雷區(qū)就生成好了，然后玩法的編寫主要難點(diǎn)就是在當(dāng)點(diǎn)擊數(shù)字為0時的格子時要把它周圍的0區(qū)也顯示出來，因此這里我們使用遞歸來實(shí)現(xiàn)
1、界面的生成
//生成界面
function init() {
document.write("<table border='1px' rules='all' cellpadding='10px '> ")
for (var i = 1; i < 11; i++) {
document.write("<tr>");
for (var j = 1; j < 11; j++) {
document.write("<td class='game'>" + arr3[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>")
var t = document.getElementsByTagName('table')[0];
var td = document.getElementsByTagName('td');
for (var i = 0; i < td.length; i++) {
td[i].style.background='#ffffff';
td[i].style.opacity = '0';
td[i].style.transition = 'all 4s'
}
//樣式添加
t.style.margin = '0px auto';
document.close()
}
2、我們表格是10X10的，但是后面的操作要計(jì)算每個格子的值，因此當(dāng)格子在邊界的話數(shù)組就會越界，所以我們這邊定義二維數(shù)組12X12來表示10X10的表格中的數(shù)值，雷我們隨機(jī)生成20個
//初始化數(shù)組
function initarr() {
var arr = new Array(12);
for (var i = 0; i < 12; i++) {
arr[i] = new Array(12);
for (var j = 0; j < 12; j++) {
arr[i][j] = 0;
}
}
return arr;
}
//隨機(jī)生成雷
function rangemine() {
var arr = initarr();
var num = 0;
for (var index = 0; index < 20; index++) {
while (true) {
var row = Math.floor(Math.random() * 10) + 1;
var col = Math.floor(Math.random() * 10) + 1;
if (arr[row][col] != 9) {
arr[row][col] = 9;
break;
}
}
}
return arr;
}
3、生成每塊對應(yīng)的數(shù)值我們實(shí)現(xiàn)方法為遍歷數(shù)組，如果為雷，則雷周圍的八塊的數(shù)值+1
//生成每塊所對應(yīng)的數(shù)字
function num() {
var arr2 = rangemine();
for (var i = 1; i < 11; i++) {
for (var j = 1; j < 11; j++) {
if (arr2[i][j] >= 9) {
arr2[i][j + 1] += 1;
arr2[i][j - 1] += 1;
arr2[i - 1][j] += 1;
arr2[i + 1][j] += 1;
arr2[i - 1][j + 1] += 1;
arr2[i - 1][j - 1] += 1;
arr2[i + 1][j - 1] += 1;
arr2[i + 1][j + 1] += 1;
}
}
}
for (var i = 1; i < 11; i++) {
for (var j = 1; j < 11; j++) {
if (arr2[i][j] > 8) {
arr2[i][j] = 9;
}
}
}
return arr2;
}
4、添加監(jiān)聽器，我這里添加了touch事件,touch事件只用于移動端，因此pc端要運(yùn)行要模擬移動端
//添加監(jiān)聽器
function gostart() {
var t = document.getElementsByTagName('td');
for (var i = 0; i < t.length; i++) {
{
t[i].addEventListener('touchstart', start);
t[i].addEventListener('touchend', end);
}
}
}
gostart();
//開始函數(shù)
function start(e) {
console.log((e.touches[0]));
var a = e.touches[0];
}
//結(jié)尾函數(shù)
function end(e) {
var a = e.touches[0];
mix(e.srcElement.parentElement.rowIndex + 1, e.srcElement.cellIndex + 1, e.srcElement.parentElement);
/* startgame(e.srcElement.parentElement.rowIndex,e.srcElement.cellIndex,e.srcElement); */
}
5、遞歸實(shí)現(xiàn)掃雷，對周圍沒有雷的格子進(jìn)行遞歸將其周圍也是0的格子展示出來
//遞歸消除點(diǎn)到0塊時顯露出其他的塊
function mix(x, y, e) {
var flag=0;
if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 0) {
//防止無限遞歸
e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
e.parentElement.rows[x - 1].cells[y - 1].innerHTML="";
e.parentElement.rows[x - 1].cells[y - 1].style.background = '#a4eaff';
arr3[x][y] = 10;
mix(x, y + 1, e);
mix(x, y - 1, e);
mix(x + 1, y, e);
mix(x - 1, y, e);
mix(x + 1, y + 1, e);
mix(x - 1, y + 1, e);
mix(x + 1, y - 1, e);
mix(x - 1, y - 1, e);
} else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] > 0 && arr3[x][y] < 9) {
//顏色變紅且透明度變?yōu)?
arr3[x][y]=-1;
e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
e.parentElement.rows[x - 1].cells[y - 1].style.backgroundColor = '#a4eaff';
//判斷是否結(jié)束
for(var i=1;i<arr3.length-1;i++){
for(var j=1;j<arr3[i].length-1;j++){
if(arr3[i][j]!=-1||arr3[i][j]!=9){
flag=1;
break;
}
}
}
if(flag==0){
alert('成功');
}
return;
} else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 9) {
alert('你踩到地雷啦?。?！');
arr3 = num();
//移除原來的表格
var s = document.getElementsByTagName('table')[0];
s.parentNode.removeChild(s);
init();
gostart();
}
}
6、全部js代碼：
function initarr() {
var arr = new Array(12);
for (var i = 0; i < 12; i++) {
arr[i] = new Array(12);
for (var j = 0; j < 12; j++) {
arr[i][j] = 0;
}
}
return arr;
}
//隨機(jī)生成雷
function rangemine() {
var arr = initarr();
var num = 0;
for (var index = 0; index < 20; index++) {
while (true) {
var row = Math.floor(Math.random() * 10) + 1;
var col = Math.floor(Math.random() * 10) + 1;
if (arr[row][col] != 9) {
arr[row][col] = 9;
break;
}
}
}
return arr;
}
//生成每塊所對應(yīng)的數(shù)字
function num() {
var arr2 = rangemine();
for (var i = 1; i < 11; i++) {
for (var j = 1; j < 11; j++) {
if (arr2[i][j] >= 9) {
arr2[i][j + 1] += 1;
arr2[i][j - 1] += 1;
arr2[i - 1][j] += 1;
arr2[i + 1][j] += 1;
arr2[i - 1][j + 1] += 1;
arr2[i - 1][j - 1] += 1;
arr2[i + 1][j - 1] += 1;
arr2[i + 1][j + 1] += 1;
}
}
}
for (var i = 1; i < 11; i++) {
for (var j = 1; j < 11; j++) {
if (arr2[i][j] > 8) {
arr2[i][j] = 9;
}
}
}
return arr2;
}
var arr3 = num()
//生成界面
function init() {
document.write("<table border='1px' rules='all' cellpadding='10px '> ")
for (var i = 1; i < 11; i++) {
document.write("<tr>");
for (var j = 1; j < 11; j++) {
document.write("<td class='game'>" + arr3[i][j] + "</td>");
}
document.write("</tr>");
}
document.write("</table>")
var t = document.getElementsByTagName('table')[0];
var td = document.getElementsByTagName('td');
for (var i = 0; i < td.length; i++) {
td[i].style.background='#ffffff';
td[i].style.opacity = '0';
td[i].style.transition = 'all 4s'
}
//樣式添加
t.style.margin = '0px auto';
document.close()
}
init();
//添加監(jiān)聽器
function gostart() {
var t = document.getElementsByTagName('td');
for (var i = 0; i < t.length; i++) {
{
t[i].addEventListener('touchstart', start);
t[i].addEventListener('touchend', end);
}
}
}
gostart();
//開始函數(shù)
function start(e) {
console.log((e.touches[0]));
var a = e.touches[0];
}
//結(jié)尾函數(shù)
function end(e) {
var a = e.touches[0];
mix(e.srcElement.parentElement.rowIndex + 1, e.srcElement.cellIndex + 1, e.srcElement.parentElement);
/* startgame(e.srcElement.parentElement.rowIndex,e.srcElement.cellIndex,e.srcElement); */
}
//遞歸消除點(diǎn)到0塊時顯露出其他的塊
function mix(x, y, e) {
var flag=0;
if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 0) {
//防止無限遞歸
e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
e.parentElement.rows[x - 1].cells[y - 1].innerHTML="";
e.parentElement.rows[x - 1].cells[y - 1].style.background = '#a4eaff';
arr3[x][y] = 10;
mix(x, y + 1, e);
mix(x, y - 1, e);
mix(x + 1, y, e);
mix(x - 1, y, e);
mix(x + 1, y + 1, e);
mix(x - 1, y + 1, e);
mix(x + 1, y - 1, e);
mix(x - 1, y - 1, e);
} else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] > 0 && arr3[x][y] < 9) {
//顏色變紅且透明度變?yōu)?
arr3[x][y]=-1;
e.parentElement.rows[x - 1].cells[y - 1].style.opacity = 1;
e.parentElement.rows[x - 1].cells[y - 1].style.backgroundColor = '#a4eaff';
//判斷是否結(jié)束
for(var i=1;i<arr3.length-1;i++){
for(var j=1;j<arr3[i].length-1;j++){
if(arr3[i][j]!=-1||arr3[i][j]!=9){
flag=1;
break;
}
}
}
if(flag==0){
alert('成功');
}
return;
} else if (x > 0 && x < 11 && y > 0 && y < 11 && arr3[x][y] == 9) {
alert('你踩到地雷啦?。?！');
arr3 = num();
//移除原來的表格
var s = document.getElementsByTagName('table')[0];
s.parentNode.removeChild(s);
init();
gostart();
}
}
7、總結(jié)
這次的掃雷最大的缺點(diǎn)就是不能保證第一次不點(diǎn)到雷，還有就是是否還沒有進(jìn)行測試。。因?yàn)槲乙矝]有玩過一整局可能會有些許小bug
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript parseInt與Number函數(shù)的區(qū)別
在js中，如果你使用parseInt("08"),一般都會認(rèn)為會返回8，然而實(shí)際上返回了0.但是用Number("08")返回的才是8.2010-01-01
今天小編就為大家分享一篇對layui中的onevent 和event的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript結(jié)合H5 canvas實(shí)現(xiàn)投籃小游戲的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
IE8提示Invalid procedure call or argument 異常的解決方法
某臺機(jī)器上，訪問公司的好幾個產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡化為2012-09-09
JavaScript實(shí)現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享
這篇文章主要介紹了JavaScript實(shí)現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享,本文給出了2種防嵌入方法,需要的朋友可以參考下2014-12-12
服務(wù)器安全設(shè)置的幾個注冊表設(shè)置...2007-07-07
基于javascript實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
js實(shí)現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果的方法,以完整實(shí)例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03
javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片上傳即時顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09