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即可。
《桃花庵--程序员版》
原著：某网友
改变：笑逗逗
写字楼里写字间，
写字间中程序员；
程序员来写程序，
又将程序换酒钱；
酒醒只在屏前坐，
酒醉还来屏下眠；
酒醉酒醒日复日，
屏前屏下年复年；
但愿醉游代码海，
不愿鞠躬人世间；
大富大贵勿牵往，
公交自行自相随；
别人笑我太疯癫，
我笑他人莫逍遥；
但见满街呆萌美，
哪个归得程序员。
Js 网页版扫雷游戏代码实现的更多相关文章
- wpf版扫雷游戏
近来觉得wpf做出来的界面很拉风,自己也很喜欢搞些小游戏,感觉这做出来的会很炫,很装逼,(满足自己的一点小小的虚荣心)于是就去自学,发现感觉很不错,可是属性N多,太多了,而且质料也少,很多不会用,只会 ...
- 基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react. ...
- js实现web网页版台球游戏
js桌球小游戏在线试玩地址:http://keleyi.com/game/13/ 游戏截图: 完整代码,保存到html文件可以试玩: <!DOCTYPE html PUBLIC "-/ ...
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- Weex 版扫雷游戏开发
扫雷是一个喜闻乐见的小游戏,今天在看 Weex 文档的过程中,无意中发现用 Weex 完全可以开发一个扫雷出来.当然这个扫雷和 Windows 那个有一点差距,不过麻雀虽小五脏俱全,随机布雷.自动挖雷 ...
- 9×9扫雷游戏代码-C写的
#include <stdio.h> #include <stdlib.h> //画棋盘 a雷表 b周围雷数表 c打开表 ][],][],][]) { ,j=; ;i<; ...
- C#网页版计算器程序代码
calculator.aspx.cs代码 using System; using System.Collections.Generic; using System.Linq; using System ...
- 学会使用Hdlbits网页版Verilog代码仿真验证平台
给大家推荐一款网页版的 Verilog代码编辑仿真验证平台,这个平台是国外的一家开源FPGA学习网站,通过“https://hdlbits.01xz.net/wiki/Main_Page” 地址链接进 ...
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
随机推荐
- PHP数据访问易错点（20161030）
易错点: 1.造对象的时候括号里面的参数 写错了 $db = new MySQLi("localhost","root","789",&qu ...
- 小梦windows phone 8.1开发：语音朗读
使用SpeechSynthesizer类可以实现文本朗读功能,位于 Windows.Media.SpeechSynthesis命名空间.有了它我们就可以实现有声小说了,是不是很爽.下面给出一个将文本块 ...
- CSS -- 练习之制作简单商品图
只加深了印象,出错点:未给左侧人物大图宽高,致使第二行图层叠在其上: <!DOCTYPE html> <html lang="en"> <head&g ...
- WEB开发性能优化--核心定义介绍篇（1）
推荐理由 随着 互联网的蓬勃发展,并且伴随着产品功能的越来越复杂,对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时,也可保证不断复杂的业务对用户体验的影响,其中对用户来说最重要的体验指标是如 ...
- node.js平台下，利用cookie实现记住密码登陆（Express+Ejs+Mysql）
本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...
- unity插件开发——AssetDatabase
AssetDatebase也是一个静态类,他的作用是管理整个工程的所有文件(一般成为“资产”).直观地说就是管理整个project窗口中的所有内容,比如,你可以增加.删除.修改文件等等. 这里有几个常 ...
- String 类的实现（5）String常用函数
2 #include<iostream> 3 #include<stdio.h> 4 #include<assert.h> 5 #include <iom ...
- WPF之路二： button添加背景图片点击后图片闪烁问题
在为button添加背景图片的时候,点击后发现图片闪烁,我们仔细观察,其实Button不仅仅只是在点击后会闪烁,在其通过点击或按Tab键获得焦点后都会闪烁,而通过点击其他按钮或通过按Tab键让Butt ...
- 老李分享：大数据框架Hadoop和Spark的异同
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
- POPTEST学员就业面试题目！！！！！
POPTEST学员就业面试题目!!!!! poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.(欢迎大家咨询软件测试工程师就业培训 ...