Html5 Canvas 扫雷 (IE9测试通过)

最新推荐文章于 2021-09-01 20:30:10 发布
最新推荐文章于 2021-09-01 20:30:10 发布
阅读量109 收藏
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/powertoolsteam/archive/2011/03/16/1985865.html
版权

扫雷是一个非常经典的游戏，记得在第一次接触的windows 3.22 上就有扫雷了，到现在的Win7，依然保留着这个经典的游戏，结合Html5 Canvas，模仿Win7的UI，将老板扫雷进行了升级。在 FireFox, Chrome, 和 IE9 下测试通过。
实现中设计的类: CellInfo, MineInfo, InfoProcess, CellRender, MineArea, GameInfo, GameStatus, Game, StorageInfo, GameStorage。
游戏界面:

GameMode:
Beginner 初级设置 Width:7 Height:7 Mine:10。
Intermediate 中级设置 Width:15 Height:15 Mine:40。
Expert 高级设置 Width:30 Height:15 Mine:99。
Random   随机模式。
CustomerSetting:    用户自定义扫雷的 Width Height Mine。
Performance Test:   测试游戏在浏览器上的反应。
Game Record:         游戏记录。
Pause: 暂停游戏。
Save: 存盘游戏。


当点击Save存盘后,在GameStorage下面会记录当前游戏的缩略图。鼠标进入存盘缩略图,当前缩略图高亮一个小红边,点击左键恢复存盘点,点击右键删除存盘点.
由于游戏中使用的图片比较多, 这个链接是AllInOne的地址: http://zhangsichu.com/html5/minesweeper/canvasminesweeperrelease.htm
所有内容都在这一个Html里，不包含外部链接。你可以直接保存这个网页，这样就可以随时玩了。


也可以下载未压缩版本：

附件:MineSweeper.rar

转载于:https://www.cnblogs.com/powertoolsteam/archive/2011/03/16/1985865.html

aasd6283356
关注
HTML5 canvas 扫雷
03-11
主要是通过canvas实现扫雷功能，主要是给感兴趣的研究，希望下载者评论。
canvas + jquery 实现扫雷小游戏
weixin_33853827的博客
04-22 233
游戏试玩 前言 这个小游戏主要思路是canvas与数组的映射，每一个小网格对应二维数组的一个元素，利用数组来存储网格的信息，如 某网格是否有雷，周围九宫格雷的个数，是否已经被打开 这里定义了三个数组 let gridStatus_arr = []; //存储格子身份状态，状态1为雷 let mineNum_arr = []; //存储格子周围八个格子雷的数量...
canvas+js实现简单的扫雷小游戏
zem
02-02 1426
扫雷小游戏作为windows自带的一个小游戏，受到很多人的喜爱，今天我们就来尝试使用h5的canvas结合js来实现这个小游戏。 要写游戏，首先要明确游戏的规则，扫雷游戏是一个用鼠标操作的游戏，通过点击方块，根据方块的数字推算雷的位置，标记出所有的雷，打开所有的方块，即游戏成功，若点错雷的位置或标记雷错误，则游戏失败。 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块，打开后若不是雷，...
javascript扫雷, canvas界面
翾的博客
06-16 840
巩固一下之前学的知识. 看如下的效果图. 功能描述: 基本游戏需求以及排行榜记录保存.主界面: 游戏界面: 游戏记录保存: 为了方便演示, 结束时提示保存记录, 正常输了的话提示重新开始游戏. 排行榜: 代码和教程都在github上: https://github.com/TheKiteRunners/Web-Sweep
H5 canvas实现经典扫雷小游戏
12-25
H5 Canvas实现经典扫雷小游戏，原创无注释，300行代码。鼠标左键扫雷，右键标记，按住滚轮可预览可点击的格子(同windows版本鼠标左右键同时按住)。主要功能都正常，可能有小bug，大家可以自行修改完善。
Html5 Canvas 扫雷.
03-21
Html5 Canvas 扫雷，供大家一起共同分享学习。
用于各个浏览器（IE）html2canvas不工作解决方案
10-15
用于各个浏览器（IE）html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用，但是IE浏览器无效，导入这个js后就OK啦
js+canvas实现简单扫雷小游戏
10-15
使用HTML5中的canvas元素与JavaScript可以实现一个简单的扫雷游戏。下面详细介绍如何使用这些技术实现扫雷小游戏。 ### HTML结构 首先，创建一个HTML文件，并在其中引入canvas元素用于绘图： ```html <!DOCTYPE...
学习记录，利用canvas写扫雷游戏
m0_61437084的博客
09-01 280
记录js学习后制作的第一关小游戏。 这里的代码还不够精简，许多地方偷懒没有封装，逻辑也有许多可以优化。 <body> 胜利条件,找出所有地雷并标记 <form action="javaScript:createContent()"> <div id="message" style="color: red; display: none;">地雷数量必须小于地图大小xy的平方</div> <br /&g
HTML5-Minesweeper, 使用jQuery和 HTML5 Canvas的扫雷游戏.zip
09-17
HTML5-Minesweeper, 使用jQuery和 HTML5 Canvas的扫雷游戏 HTML5-Minesweeper使用jQuery和 HTML5 Canvas的扫雷游戏。在线演示可以在 joeyvo找到。我是 me/html5-minesweeper 。现在，在 Chrome 实验的特性。关注 Twitte
h5手机源码格子酒店
08-10
h5手机源码格子酒店，纯html5代码h5手机源码格子酒店，纯html5代码h5手机源码格子酒店，纯html5代码
2048小游戏H5版本，添加canvas背景
09-26
集合JS,JQuery，Bootstrap等基本使用的2048小游戏 游戏画面已经优化，添加了画布的背景效果
HTML5 canvas乒乓球小游戏代码.zip
05-25
HTML5 canvas乒乓球小游戏代码，按任意键开始游戏，键盘方向键控制游戏，挡击对方小球，先得到5分获得胜利。
HTML+JavaScript实现扫雷小游戏
10-16
主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于H5 canvas API 编写的扫雷游戏第一部分：资源加载
weixin_33918114的博客
11-10 173
本游戏使用parcel构建的，parceljs.cn 这是一个0配置的构建工具 引入fs模块 用来加载资源文件，如：样式表，图片，html模板等 import fs from 'fs' 复制代码加载样式表 同步的方式读取样式表文件，如果样式表不存在，那么创建一个style元素，设置样式表内容，并添加到head的尾部 !function() { let styleStr = fs.readF...
布雷（扫雷游戏）
weixin_34115824的博客
08-06 371
扫雷啦！，这个游戏应该绝大数人都玩过，玩的时候很high,但是如果知道了游戏中的雷是怎么布置的，那么玩起来想必就更high啦。下面我们一起看看这么神奇的雷到底是怎么分布的？布雷的过程中有几个要点：取随机数作为雷的位置，让雷的位置可以随机分布；随机数不得重复，避免雷的数量减少；确定雷以外的地方应该显示的数字namespace prj布雷 { class Progra...
在 React 中使用 React-Redux 的示例
锋利的二丫
11-23 468
在 Create-React-App 中使用 React-Redux 的示例 在实现这个例子之前，请先去官网查看基本概念和 redux 的要素。 安装 npm i redux react-redux --save 配置 我们需要手动新建 状态管理的目录，一般情况下，我们会在 src 下新建一个store 的文件夹，来管理状态。 // store/reducer.js // 默认状态 const defaultState = { count: 0 }; // 用 reducer 来处理具体想要操作
html5 canvas 扫雷游戏代码
最新发布
06-11
好的，以下是一个简单的HTML5 Canvas 扫雷游戏的示例代码，希望能帮到您： ```html <!DOCTYPE html> <html> <head> <title>扫雷游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> // 初始化游戏 var grid = []; var gridSize = 10; var bombCount = 10; var cellSize = 30; for (var i = 0; i < gridSize; i++) { var row = []; for (var j = 0; j < gridSize; j++) { row.push({ x: j * cellSize, y: i * cellSize, width: cellSize, height: cellSize, isBomb: false, isRevealed: false, isFlagged: false, neighborCount: 0 }); } grid.push(row); } // 随机布置炸弹 for (var i = 0; i < bombCount; i++) { var row = Math.floor(Math.random() * gridSize); var col = Math.floor(Math.random() * gridSize); var cell = grid[row][col]; if (cell.isBomb) { i--; } else { cell.isBomb = true; } } // 计算每个格子周围的炸弹数量 for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var cell = grid[i][j]; if (!cell.isBomb) { var count = 0; for (var row = i - 1; row <= i + 1; row++) { for (var col = j - 1; col <= j + 1; col++) { if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) { if (grid[row][col].isBomb) { count++; } } } } cell.neighborCount = count; } } } // 绘制游戏 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var cell = grid[i][j]; context.fillStyle = "gray"; context.fillRect(cell.x, cell.y, cell.width, cell.height); if (cell.isRevealed) { if (cell.isBomb) { context.fillStyle = "red"; context.fillRect(cell.x, cell.y, cell.width, cell.height); } else { context.fillStyle = "white"; context.fillRect(cell.x, cell.y, cell.width, cell.height); if (cell.neighborCount > 0) { context.font = "20px Arial"; context.fillStyle = "black"; context.fillText(cell.neighborCount, cell.x + cell.width / 2, cell.y + cell.height / 2); } } } else { if (cell.isFlagged) { context.font = "20px Arial"; context.fillStyle = "black"; context.fillText("F", cell.x + cell.width / 2, cell.y + cell.height / 2); } } } } // 点击格子 canvas.addEventListener("click", function(event) { var x = event.pageX - canvas.offsetLeft; var y = event.pageY - canvas.offsetTop; var cell = getCell(x, y); if (cell !== null && !cell.isRevealed && !cell.isFlagged) { if (cell.isBomb) { revealBombs(); alert("你输了！"); } else { revealCell(cell); if (checkWin()) { alert("你赢了！"); } } } }); // 右击格子 canvas.addEventListener("contextmenu", function(event) { event.preventDefault(); var x = event.pageX - canvas.offsetLeft; var y = event.pageY - canvas.offsetTop; var cell = getCell(x, y); if (cell !== null && !cell.isRevealed) { cell.isFlagged = !cell.isFlagged; drawCell(cell); } }); // 根据坐标获取格子 function getCell(x, y) { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var cell = grid[i][j]; if (cell.x < x && x < cell.x + cell.width && cell.y < y && y < cell.y + cell.height) { return cell; } } } return null; } // 揭开格子 function revealCell(cell) { cell.isRevealed = true; drawCell(cell); if (cell.neighborCount === 0) { for (var row = cell.row - 1; row <= cell.row + 1; row++) { for (var col = cell.col - 1; col <= cell.col + 1; col++) { if (row >= 0 && row < gridSize && col >= 0 && col < gridSize) { var neighbor = grid[row][col]; if (!neighbor.isRevealed) { revealCell(neighbor); } } } } } } // 揭开所有炸弹 function revealBombs() { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var cell = grid[i][j]; if (cell.isBomb) { cell.isRevealed = true; drawCell(cell); } } } } // 检查是否胜利 function checkWin() { for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var cell = grid[i][j]; if (!cell.isRevealed && !cell.isBomb) { return false; } } } return true; } // 绘制格子 function drawCell(cell) { context.fillStyle = "gray"; context.fillRect(cell.x, cell.y, cell.width, cell.height); if (cell.isRevealed) { if (cell.isBomb) { context.fillStyle = "red"; context.fillRect(cell.x, cell.y, cell.width, cell.height); } else { context.fillStyle = "white"; context.fillRect(cell.x, cell.y, cell.width, cell.height); if (cell.neighborCount > 0) { context.font = "20px Arial"; context.fillStyle = "black"; context.fillText(cell.neighborCount, cell.x + cell.width / 2, cell.y + cell.height / 2); } } } else { if (cell.isFlagged) { context.font = "20px Arial"; context.fillStyle = "black"; context.fillText("F", cell.x + cell.width / 2, cell.y + cell.height / 2); } } } </script> </body> </html> ``` 请注意，这只是一个简单的示例代码，您可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值