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即可。
《桃花庵--程序员版》
原著:某网友
改变:笑逗逗
写字楼里写字间,
写字间中程序员;
程序员来写程序,
又将程序换酒钱;
酒醒只在屏前坐,
酒醉还来屏下眠;
酒醉酒醒日复日,
屏前屏下年复年;
但愿醉游代码海,
不愿鞠躬人世间;
大富大贵勿牵往,
公交自行自相随;
别人笑我太疯癫,
我笑他人莫逍遥;
但见满街呆萌美,
哪个归得程序员。