Js 网页版扫雷游戏代码实现

　　这个游戏是自己在大约一年前联系js熟练度时做的，用的都是基础的东西，最近比较忙没时间整理。直接发给大家，有兴趣的可以看一下。欢迎大家提出建议。如果你有什么新的想法也可以提出来，或者你并不擅长编程。你想做什么东西可以告诉我。我尽量帮你实现。
不要在意标点符号什么的，，哈哈

废话不说了上代码：

<!DOCTYPE html>
<html><head><meta charset="{CHARSET}"><title>zwcai pai bool</title><style>.innerGrid {width: 20px;height: 20px;margin: 0;padding: 0;text-align: center;line-height: 20px;float: left;background-color: beige;border: solid burlywood 1px;}.clearBoth {clear: both;}.outGrid {filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;width: 20px;height: 20px;margin: 0;padding: 0;float: left;background-color: burlywood;border: solid beige 1px;}.disOutGrid {filter: alpha(opacity=0);-moz-opacity: 0.0;-khtml-opacity: 0.0;opacity: 0.0;width: 20px;height: 20px;margin: 0;padding: 0;float: left;background-color: burlywood;border: solid beige 1px;}.redOutGrid {guessOutGrid filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;width: 20px;height: 20px;margin: 0;padding: 0;float: left;background-color: red;                color: white;text-align: center;line-height: 20px;border: solid beige 1px;}.guessOutGrid {filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;width: 20px;height: 20px;margin: 0;padding: 0;float: left;color: red;text-align: center;line-height: 20px;background-color: burlywood;border: solid beige 1px;}</style></head><body><form action="javaScript:createContent()"><div id="message" style="color: red; display: none;">booNum must less than xyNum*xyNum</div><br /> xyNum:<input id="xyNum" type="number" required="true" name="points" min="1" max="50" /> booNum:<input id="booNum" type="number" required="true" name="points" min="1" max="2500" /><input type="submit" value="OK" /><br /> 1. Input the width <br /> 2. Input the number of ray (ray number is less than the width * width) <br /> 3. Click ok <br />The right mouse button:<br />The first time: mark your guess<br />The second time: confirm your guess<br />The Third time: cancel the tag<br /></form><div style="position: relative; margin: 20px 20px;"><div id="content"></div><div id="outcontent" style="position: absolute;top: 0px;"></div></div><script>document.oncontextmenu = function(e) {e.preventDefault();};var xyNum = document.getElementById('xyNum'),booNum = document.getElementById('booNum'),message = document.getElementById('message'),content = document.getElementById('content'),outcontent = document.getElementById('outcontent'),commonFunction = {getPromptArray: function(xyL, BIndex) {var resultArry = []; //["x1y1","x2y2","x3y3","x1y1"];BIndex:[[0,1],[3,1]]var resultObj = {};var bx = 0,by = 0;function calculateA(item) {bx = item[0];by = item[1];if (bx > 0) {resultArry.push('x' + (bx - 1) + 'y' + (by));}if (bx < xyL - 1) {resultArry.push('x' + (bx + 1) + 'y' + (by));}if (by > 0) {resultArry.push('x' + (bx) + 'y' + (by - 1));}if (by < xyL - 1) {resultArry.push('x' + (bx) + 'y' + (by + 1));}if (bx > 0 && by > 0) {resultArry.push('x' + (bx - 1) + 'y' + (by - 1));}if (bx > 0 && by < xyL - 1) {resultArry.push('x' + (bx - 1) + 'y' + (by + 1));}if (bx < xyL - 1 && by > 0) {resultArry.push('x' + (bx + 1) + 'y' + (by - 1));}if (bx < xyL - 1 && by < xyL - 1) {resultArry.push('x' + (bx + 1) + 'y' + (by + 1));}}function getResultObj(arr) {var obj = {};for (var ai = 0; ai < arr.length; ai++) {var item = arr[ai];if (obj[item] == null) obj[item] = 1;else obj[item] = obj[item] + 1;}return obj;}for (var bi = 0; bi < BIndex.length; bi++) {var Bitem = BIndex[bi]; //[0,1]calculateA(Bitem);}resultObj = getResultObj(resultArry);return resultObj;},getBIndex: function(xyn, boo) {var result = [];var xy = [];function canAddRes() {xy = result[result.length - 1];for (var l = 0; l < result.length - 1; l++) {if (result[l][0] == xy[0] && result[l][1] == xy[1]) {return false;}}return true;};for (var i = 0; i < boo; i++) {var x = parseInt(Math.random() * xyn);var y = parseInt(Math.random() * xyn);result[i] = [x, y];if (!canAddRes()) {i--;}}return result;},getInnerArea: function() {if (xyNum.value * xyNum.value < booNum.value) {message.style.display = 'block';return false;} else {while (content.hasChildNodes()) {content.removeChild(content.firstChild);}}var oFrag = document.createDocumentFragment();var BIndex = [];BIndex = commonFunction.getBIndex(xyNum.value, booNum.value);for (var xi = 0; xi < xyNum.value; xi++) {var oLi = document.createElement("div");oLi.id = 'x' + xi;for (var yi = 0; yi < xyNum.value; yi++) {var oDiv = document.createElement("div");oDiv.id = 'x' + xi + 'y' + yi;oDiv.className = 'innerGrid';oLi.appendChild(oDiv);if (yi == xyNum.value - 1) {var endDiv = document.createElement("div");endDiv.className = "clearBoth";oLi.appendChild(endDiv);}}oFrag.appendChild(oLi);}content.appendChild(oFrag);var promptObj = commonFunction.getPromptArray(xyNum.value, BIndex); //{'x1y1':2}for (var pItem in promptObj) {document.getElementById(pItem).textContent = promptObj[pItem];}for (var Bi = 0; Bi < BIndex.length; Bi++) {document.getElementById('x' + BIndex[Bi][0] + 'y' + BIndex[Bi][1]).textContent = "b";}return true;},getOutArea: function() {while (outcontent.hasChildNodes()) {outcontent.removeChild(outcontent.firstChild);}var oFrag = document.createDocumentFragment();for (var xi = 0; xi < xyNum.value; xi++) {var oLi = document.createElement("div");oLi.id = xi;for (var yi = 0; yi < xyNum.value; yi++) {var oDiv = document.createElement("div");oDiv.id = xi + 'y' + yi;oDiv.className = 'outGrid';oLi.appendChild(oDiv);if (yi == xyNum.value - 1) {var endDiv = document.createElement("div");endDiv.className = "clearBoth";oLi.appendChild(endDiv);}}oFrag.appendChild(oLi);}outcontent.appendChild(oFrag);},checkEnd: function() {if (document.getElementsByClassName('outGrid').length > booNum.value) {return false;} else {return true;}},LClickButton: function(elem) {var result = false;var id = this.id;var interX = parseInt(id.split("y")[0]);var interY = parseInt(id.split("y")[1]);var doc = document.getElementById('x' + interX + 'y' + interY);if (elem.button == 2) {if (this.className == 'outGrid') {this.className = 'guessOutGrid';this.textContent='?';result = false;}else if (this.className == 'guessOutGrid') {this.className = 'redOutGrid';this.textContent='7';result = false;}else if (this.className == 'redOutGrid') {this.className = 'outGrid';this.textContent='';result = false;}}else if (elem.button == 0) {if(this.className == 'disOutGrid'){result = false;}else if (this.className != 'outGrid') {this.className = 'outGrid';this.textContent='';return false;                                }else if (doc.textContent == 'b') {alert('you are fail');while (outcontent.hasChildNodes()) {outcontent.removeChild(outcontent.firstChild);}result = false;} else if (doc.textContent != '') {this.className = 'disOutGrid';result = true;} else {commonFunction.removeSplace(this)result = true;}if (result && commonFunction.checkEnd()) {while (outcontent.hasChildNodes()) {outcontent.removeChild(outcontent.firstChild);}alert('you are win')}}return result;},removeSplace: function removeS(elem) {if (elem.className == 'disOutGrid') {return false;}var id = elem.id;var interX = parseInt(id.split("y")[0]);var interY = parseInt(id.split("y")[1]);var doc = document.getElementById('x' + interX + 'y' + interY);if (doc.textContent != 'b') {elem.className = 'disOutGrid';if (doc.textContent != '') {return false;}if (interX > 0) {removeS(document.getElementById((interX - 1) + 'y' + interY));}if (interX < xyNum.value - 1) {removeS(document.getElementById((interX + 1) + 'y' + interY));}if (interY > 0) {removeS(document.getElementById((interX) + 'y' + (interY - 1)));}if (interY < xyNum.value - 1) {removeS(document.getElementById((interX) + 'y' + (interY + 1)));}}}},createContent = function() {if (commonFunction.getInnerArea()) {commonFunction.getOutArea();var outDiv = document.getElementsByClassName('outGrid');for (var i = 0; i < outDiv.length; i++) {outDiv[i].onmousedown = commonFunction.LClickButton;}};};</script></body></html>

　　直接将代码复制带一个文本中将后缀.txt改成.html即可。

《桃花庵--程序员版》
　　　　原著：某网友
　　　　改变：笑逗逗

写字楼里写字间，

写字间中程序员；

程序员来写程序，

又将程序换酒钱；

酒醒只在屏前坐，

酒醉还来屏下眠；

酒醉酒醒日复日，

屏前屏下年复年；

但愿醉游代码海，

不愿鞠躬人世间；

大富大贵勿牵往，

公交自行自相随；

别人笑我太疯癫，

我笑他人莫逍遥；

但见满街呆萌美，

哪个归得程序员。

转载于:https://www.cnblogs.com/zwcai/p/6579688.html

Js 网页版扫雷游戏代码实现相关推荐

网页版扫雷游戏···
闲的没事写个扫雷, 算法不太好·····凑合 <!DOCTYPE html> <html> <head> <metacharset="utf-8 ...
收藏网页版小游戏：蜘蛛纸牌、扫雷、水果忍者、打地鼠、吃豆人
学习之余当然是摸鱼了,这里分享几个不用下载直接在线玩耍的游戏.有蜘蛛纸牌网页版在线玩.在线扫雷小游戏.在线玩的水果忍者.吃豆人.打地鼠.3D模仿. 下面我将一个个列出来.欢迎体验收藏! 蜘蛛纸牌:这是 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
《游戏学习》| 水果忍者HTML5网页版在线游戏 | 源码分析
游戏介绍这是一款由百度JS小组提供的HTML5版切水果游戏,这款基于HTML5实现的网页版切水果游戏虽然和原版的切水果游戏相比仍有美中不足之处,但也算有声有色,画面效果也十分炫目华丽. 游戏截图主 ...
利用java开发简易版扫雷游戏
1.简介学了几周的Java,闲来无事,写个乞丐版的扫雷,加强一下Java基础知识. 2.编写过程编写这个游戏,一共经历了三个阶段,编写了三个版本的游戏代码. 第一版:完成了扫雷游戏的基本雏形,实现 ...
c++简易版扫雷游戏
c++简易版扫雷游戏,代码如下: #include<iostream> #include<cstdlib> #include<time.h> using names ...
Java扫雷游戏代码
实现扫雷游戏控制台版扫雷游戏 a.游戏的分析在游戏中需要存在对象包含哪些. 格子对象(Grid): 属性:内容(content).状态(type) b.工程架构设计工程包结构 bean:存放实体 ...
石头剪刀布php源码,php实现的网页版剪刀石头布游戏示例
本文实例讲述了php实现的网页版剪刀石头布游戏.分享给大家供大家参考,具体如下: /* * Created on 2016-11-25 * */ if (isset($_POST['sub'])) { ...
c++扫雷游戏代码_C语言学习教程，用C语言编写扫雷游戏
本文实例为大家分享了C语言实现扫雷游戏及其优化的具体代码,供大家参考,具体内容如下关于扫雷优化 1.核心思想:使用两个二维数组进行设计,一个用于显示,一个用于后台雷的布置. 2.使用宏常量,后期可以 ...
HTML5高度还原复古24层魔塔网页版小游戏源码
简介: HTML5高度还原复古24层魔塔网页版小游戏源码网盘下载地址: http://kekewl.cc/OFfi6keX7OS0 图片:

Js 网页版扫雷游戏代码实现

Js 网页版扫雷游戏代码实现相关推荐

最新文章

热门文章