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 ...
随机推荐
- C风格字符串和C++ string 对象赋值操作的性能比较
<<C++ Primer>> 第四版 Exercise Section 4.3.1 部分Exercise 4.2.9 习题如下: 在自己本机执行如下程序,记录程序执行时间: # ...
- 树链剖分-SPOJ375(QTREE)
QTREE - Query on a tree You are given a tree (an acyclic undirected connected graph) with N nodes, a ...
- Linux操作命令集
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- oracle 11g centos6 安装
选型:32位的内存是个瓶颈,已经是64位的时代了.使用64位的CentOS6 和 64位的Oracle 11g R2在虚拟机器安装,采用hostonly方式设置网络注意:能上网的网卡要设置一下ICS( ...
- C#文件上传类，文件流，字节数组等
using System;using System.IO;using System.Web;using System.Web.UI.WebControls; namespace DotNet.Util ...
- iOS开发之应用程序启动图片规格
一个app在启动过程中会全屏显示叫做Default.png的图片 各种规格Default的使用场合: Default.png:非retina-iPhone屏幕,320x480 Default@2x.p ...
- webkit图片滤镜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 配置linux实现路由功能
说明: 主机1是内网的数据存储服务器,只有一块网卡10.0.0.2: 主机2是web服务器,有两块网卡,一块面向内网10.0.0.3,一块面向外网192.168.220.136: (因为是在虚拟机的环 ...
- IDEA 编译等级与源代码等级不一致问题
错误:Error:java: javacTask: source release 1.7 requires target release 1.7 原因:javac编译时指定的字节码版本低于了1.7版本 ...
- 通过哨兵机制实现Redis主从配置以及java调用
Redis版本:3.0.7 操作环境:Linux 一.redis 主从配置的作用是什么 redis主从配置,配置master 只能为写,slave只能为读,在客户端对poolconnect请求时候,, ...