javaScript 扫雷 beta0.1

最新推荐文章于 2023-07-01 14:05:13 发布

barryhappy

最新推荐文章于 2023-07-01 14:05:13 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript object image chrome table html

本文链接：https://blog.youkuaiyun.com/barryhappy/article/details/6332349

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的扫雷游戏项目。作者通过实践学习JavaScript，并分享了游戏的源代码和实现细节。文章涵盖了从游戏逻辑到界面设计的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我坚信——通过实践学习是最有效的方法。

javascript的书被我从图书馆借回来很久了，但一直没怎么看，那天突然见到我徒弟发表了一篇关于js围棋的博客：http://blog.youkuaiyun.com/JaneYiMi77/archive/2011/04/13/6321752.aspx 顿时感到后生可畏，心惊不已……一不小心被我徒弟超越了？微微冒汗……

于是痛心疾首，决定洗心革面、重新做人……上周五晚上开始，一边翻js的书，一边google……好在自己有C和java的基础，又做过java版的扫雷，经过呕心吐血两天，终于基本实现了javascript的扫雷。

初学js，所以代码拙劣之处难免，而且我使用Chrome测试的，后来发现IE9可以正常运行，但是IE8及以下不行（鄙视一下微软）。

先贴一下，会继续完善。

贴上下载地址： http://download.youkuaiyun.com/source/3203748

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>New Web Project</title> </head> <body bgcolor = "aaaa00" oncontextmenu="return false"> <h3 align="center">小老头扫雷创作中……</h3> <p id="numOfOpenedRect" style="font-size:20px" style="font-size:20px" align="center"> </p> <table id="table1" border=1 align="center" style="font-size:35px" bgcolor="AAAAAA"> </table> <script type="text/javascript" src="sweepBomb.js" src="sweepBomb.js"></script> </body> </html>

sweepBomb.js

/** * @autdor Barry */ var mybody = document.getElementsByTagName("body")[0]; //得到body var myTable = document.getElementById("table1");//得到表格 var countP = document.getElementById("numOfOpenedRect");//记录显示已经翻开的格子数 var countNumOfOpenedRect=0; var row = 5;//行 var col = 10;//列 var numOfBomb = 10;//总的炸弹数 var leftBombNum = numOfBomb; var image1 = "<img src="./images/smallIcon.png" mce_src="images/smallIcon.png" width='40' height='40'>"; var imageBomb = "<img src="./images/bomb.png" mce_src="images/bomb.png" width='40' height='40'>"; var imageBombForLabel = "<img src="./images/bombForLabel.gif" mce_src="images/bombForLabel.gif" width='40' height='40'>"; var imageFlag = "<img src="./images/flag_3.png" mce_src="images/flag_3.png" width='40' height='40'>"; var numIcon = new Array(); for (var i = 0; i <= 8; i++) { numIcon[i] = "<img src="./images/" + i + ".png" mce_src="images/" + i + ".png" width='40' height='40'>"; } countP.innerHTML = "已翻开的的格子:"+countNumOfOpenedRect+" 剩余雷数："+leftBombNum; var rects = createAndInitrects();//创建表格 choseBombs(rects, numOfBomb);//布雷，20个 showrects(rects);//显示表格 addListener(rects);//加入监听 /** * 一个格子对象 */ function Rect(x, y){ this.siteX = x, this.siteY = y, this.isBomb = false, // 是否是地雷 this.mytd = document.createElement("td"),// <td>元素 this.mytd.id = 100 * x + y, // mytd的id,在x,y都小于100时，可以被拆分还原成x和y this.status = "OPENED", // 当前状态 this.icon = image1, // 图标 this.roundBombNum = 0//周围的地雷数目 } /** * 将所有表格td加入监听事件 * @param {Object} rects */ function addListener(rects){ for (var i = 1; i <= row; i++) { for (var j = 1; j <= col; j++) { rects[i][j].mytd.addEventListener("mousedown", sweeping, false); } } } /** * 产生单击事件时执行此函数 * @param {Object} e */ function sweeping(e){ id = (window.event.srcElement ||e.target).parentNode.id; //单击图片时，获取其父节点的id（图片<img>的父节点是<td>） if (id == 0) { var id = ( window.event.srcElement ||e.target).id;//获取单击的方格id（<td>的id） } /* 将获取的id值拆分为坐标值x和y*/ var x = Math.round(id / 100); var y = id % 100; /*方格处于正常状态时*/ if (e.button==0 && rects[x][y].status == "NORMAL") {//e.button==0是为左键事件 if (rects[x][y].isBomb == false) {//点到的不是雷 openRect(x, y); } else {//点到的是雷 rects[x][y].mytd.innerHTML = imageBombForLabel; gameover();//结束 } countP.innerHTML = "已翻开的的格子:"+countNumOfOpenedRect+" 剩余雷数："+leftBombNum; if(countNumOfOpenedRect==row*col-numOfBomb){ youWin();//成功！ } }else if(e.button==2){//单击右键 if(rects[x][y].status == "NORMAL"){ rects[x][y].status ="FLAGED"; rects[x][y].icon = imageFlag; rects[x][y].mytd.innerHTML = imageFlag;//图标 leftBombNum--; } else if(rects[x][y].status == "FLAGED"){ rects[x][y].status = "NORMAL"; rects[x][y].icon = image1; rects[x][y].mytd.innerHTML = image1;//图标 leftBombNum++; } countP.innerHTML = "已翻开的的格子:"+countNumOfOpenedRect+" 剩余雷数："+leftBombNum; } } /** * 翻开一个格子，其坐标是(x,y) * @param {Object} x * @param {Object} y */ function openRect(x, y){ //alert(x+" "+y+rects[x][y].status); rects[x][y].status = "OPENED"; countNumOfOpenedRect++;//计数器加1 rects[x][y].icon = numIcon[rects[x][y].roundBombNum]; rects[x][y].mytd.innerHTML = rects[x][y].icon;//设置图标为数字 /*当前方格周围雷数为0，则翻开其周围8个，这个一个递归*/ if (rects[x][y].roundBombNum == 0) { if (rects[x + 1][y].status == "NORMAL") { openRect(x + 1, y); } if (rects[x - 1][y].status == "NORMAL") { openRect(x - 1, y); } if (rects[x + 1][y + 1].status == "NORMAL") { openRect(x + 1, y + 1); } if (rects[x - 1][y + 1].status == "NORMAL") { openRect(x - 1, y + 1); } if (rects[x][y + 1].status == "NORMAL") { openRect(x, y + 1); } if (rects[x + 1][y - 1].status == "NORMAL") { openRect(x + 1, y - 1); } if (rects[x - 1][y - 1].status == "NORMAL") { openRect(x - 1, y - 1); } if (rects[x][y - 1].status == "NORMAL") { openRect(x, y - 1); } } } /** * 结束 */ function gameover(){ alert("Game Over!!!/n按确定重新开始！！"); window.location.reload(); } function youWin(){ alert("恭喜你！/n按确定重新开始"); window.location.reload(); } /** * 布雷，在rects随即选中中产生n个炸弹 * @param {Object} rects * @param {Object} n */ function choseBombs(rects, n){ for (var i = 0; i < n;) { var x = Math.floor(Math.random() * row + 1); var y = Math.floor(Math.random() * col + 1); if (rects[x][y].isBomb == false) { rects[x][y].isBomb = true;//是否是雷的属性设为真 /* 周围8格的雷数加1*/ rects[x + 1][y].roundBombNum++; rects[x - 1][y].roundBombNum++; rects[x - 1][y + 1].roundBombNum++; rects[x + 1][y + 1].roundBombNum++; rects[x][y + 1].roundBombNum++; rects[x][y - 1].roundBombNum++; rects[x + 1][y - 1].roundBombNum++; rects[x - 1][y - 1].roundBombNum++; //rects[x][y].icon = imageBomb;//加上这句话可以显示出雷的位置，测试时用 i++; } } } /** * 创建并初始化表格 * 创建二维数组，每一个元素是一个单元格，创建的长度比实际要显示的多2行2列 */ function createAndInitrects(){ var rects = new Array();//第一维 for (var i = 0; i <= row + 1; i++) { var column = new Array();//第二维 for (var j = 0; j <= col + 1; j++) { column[j] = new Rect(i, j); } rects[i] = column; } return rects; } /** *显示单元格 */ function showrects(rects){ for (var i = 1; i <= row; i++) { var myTr = document.createElement("tr"); for (var j = 1; j <= col; j++) { myTr.appendChild(rects[i][j].mytd); rects[i][j].status = "NORMAL"; rects[i][j].mytd.innerHTML = rects[i][j].icon;//显示图标 } myTable.appendChild(myTr); } mybody.appendChild(myTable); } /** * 臭不要脸的IE */

在项目文件夹下有一个iamges文件夹。

包含图片 0.png、1.png……8.png 、bomb.png 、flag_3.png 、smallIcon.png、 bombForLabel.gif等

chrome下的运行效果：

Chrome下的效果