Js 网页版扫雷游戏代码实现
生活随笔
收集整理的這篇文章主要介紹了
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即可。
《桃花庵--程序員版》
原著：某網友
改變：笑逗逗
寫字樓里寫字間，
寫字間中程序員；
程序員來寫程序，
又將程序換酒錢；
酒醒只在屏前坐，
酒醉還來屏下眠；
酒醉酒醒日復日，
屏前屏下年復年；
但愿醉游代碼海，
不愿鞠躬人世間；
大富大貴勿牽往，
公交自行自相隨；
別人笑我太瘋癲，
我笑他人莫逍遙；
但見滿街呆萌美，
哪個歸得程序員。
轉載于:https://www.cnblogs.com/zwcai/p/6579688.html
總結
以上是生活随笔為你收集整理的Js 网页版扫雷游戏代码实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转：vim----复制粘贴
- 下一篇： 人工智能的应用领域