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 DelegatingFilterProxy
Spring 里面定义了许多 Filter. 比如 OncePerRequestFilter. 如果我们自定义OncePerRequestFilter, 则可以配置到web.xml中进行一些拦截或日志 ...
使用Nginx+CppCMS构建高效Web应用服务器
使用Nginx+CppCMS构建高效Web应用服务器 1:Why当前,越来越多的网站使用了各种框架,大部分框架使用了脚本语言.半编译语言等.比如Java.Python.Php.C#.NET等.这些框架 ...
SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener错误
错误信息:SEVERE: Error configuring application listener of class org.springframework.web.context.Context ...
java自加和自减
public class Add { public static void main(String[] args) { int i = 0; i=i++ + ++i; int j = 0; j= ++ ...
ECSHOP info: Can't Connect MySQL Server(localhost:3306)!
今天对服务器压力测试后,某个公司电脑的页面显示标题所示,别人电脑正常.故让她清理cookie.无效.重启MySQL后问题解决.
WPF实用小工具
Kaxaml 一款轻量级的Xaml代码编辑器,提供了可视的效果可以看到修改代码后的实时效果图.个人习惯于用它测试系统默认控件的行为和布局,小片段的xaml也可以拿到这个工具上测试效果.这款工具还提供了 ...
SSH里面使用jQuery的ajax
今天我真的很兴奋!在我的SSH项目中用jQuery的异步传输成功了,经过一天多的奋战,大工告成! 我的项目需求是在javascript中向我的controller(即:action)中传输form表单 ...
相机标定：kalibr标定工具箱使用总结
1 多相机标定 1.1采集图像和IMU 1.2制作Bag包 1)组织文件结构 ~/kalibr_workspace/test/stereo_calib bagsrc cam0 (1+time(0))* ...
Kafka-4614问题复盘 (MappedByteBuffer未关闭导致慢磁盘访问)
很早之前就想动笔就这个kafka bug总结一番了,只是这个问题既不是本人发现,也不是自己动手修复,终归是底气不足,故而一直耽搁下来.怎奈此问题实在是含金量十足,又恰逢最近有人询问Kafka 0.10 ...
IOS开发创建开发证书及发布App应用(四)——创建配置概要文件
4.创建配置概要文件继续上一篇所讲,今天写的这个是创建配置概要文件依然在个人中心创建证书这里, 如果不知道的,可以查看以前写的配置概要文件也分为两种 1)创建开发配置概要文件 2)创建发布配置概 ...

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

Js 网页版扫雷游戏代码实现的更多相关文章

随机推荐

热门专题