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 ...
随机推荐
- spring mvc中的拦截器小结 .
在spring mvc中,拦截器其实比较简单了,下面简单小结并demo下. preHandle:预处理回调方法,实现处理器的预处理(如登录检查),第三个参数为响应的处理器(如我们上一章的Control ...
- html中submit和button的区别(总结) [ 转自欣步同学 ]
html中submit和button的区别(总结) submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证 ...
- SQL语句流程函数
本人因为今天用到了流程函数,顿时感觉语法生疏啊,为了防止以后忘记,故写此篇!!! 流程函数是MySQL相对常用的一类函数, 用户可以使用这类函数在一个SQL语句中实现条件选择, 这样能够提高效率. 下 ...
- AQS阻塞唤醒工具LockSupport
LockSupport在JDK源码中描述为:构建锁和其他同步类的基本线程阻塞原语,构建更高级别的同步工具集.LockSupport提供的park/unpark从线程的粒度上进行阻塞和唤醒,park/u ...
- Java中static的特点
前两天面试时被问到静态的特点,当时回答地不是很好,现在来总结一下 在了解某样东西的时候我们通常会从它是什么,为什么,和怎么样在三方面来衡量,对于java中的static,我们也这样讨论下,要明确以下几 ...
- 【读书笔记】-- 你不知道的JavaScript
<你不知道的JavaScript>是一个不错的JavaScript系列书,书名可能有些标题党的意思,但实符其名,很多地方会让你有耳目一新的感觉. 1.typeof null === &qu ...
- 用Java实现将多级文件夹下的所有文件统一放到一个文件夹中
每次下了电影(男生懂得呦),每部电影都放在一个单独的文件夹里,看的时候很是不方便啊,一直重复着进入文件夹.后退,再进.再退的操作,而手动把这些电影全部复制出来又太繁琐.因此为了解决这个问题,用IO写了 ...
- jquery-base64.js插件使用
官方文档地址:https://github.com/yckart/jquery.base64.js var a="123"; var b=$.base64.btoa(a); con ...
- 我所理解的javascript中函数的作用域和作用域链
本文为原创,转载请注明出处: cnzt 文章:cnzt-p 写在前面 一周木有更新了,今天终于攻克了自行车难关,非常开心,特意来一更~ (那些捂嘴偷笑的人我看到你们了快把嘴闭上我会假装没看 ...
- 庆祝POPTEST签约企业培训
庆祝POPTEST签约企业培训 POPTEST与众多培训企业进行技术PK,由于企业认可POPTEST的技术实力,从众多竞争对手中脱颖而出,成功中标清华控股子公司性能测试培训.