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

Posted 笑逗逗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 网页版扫雷游戏代码实现的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 做的网页版扫雷小游戏

扫雷游戏C语言实现完美版非常详细的讲解，看完必会

C语言实现扫雷小游戏（初级版）

如何用C语言快速实现初级版扫雷（步骤详细）

扫雷游戏（C语言实现）初级版和优化版（增加了自动展开标记地雷功能，同时排除了第一次排到地雷的情况）

扫雷游戏（C语言实现）初级版和优化版（增加了自动展开标记地雷功能，同时排除了第一次排到地雷的情况）