當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
点灯游戏原生JS实现与jQuery实现
生活随笔
收集整理的這篇文章主要介紹了
点灯游戏原生JS实现与jQuery实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖：
需求：
手動輸入行數和列數點擊開始游戲后生成表格，當點擊某個表格時，當前表格以及其上下左右的表格都變為黃色。
????????如果，所點擊的表格以及周圍的表格（包含上、下、左、右）已經變為黃色，那就要求還變灰色。直到所有表格都變為黃色后，游戲結束
?
JavaScript實現：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>點燈游戲</title><style>* {overflow: auto;padding: 0px;margin: 0px;}.dd {float: left;border: 1px solid #000;width: 50px;height: 50px;}.gray {background: gray;}#tab {margin: 30px;}.light {background: yellow;}</style><script>// 畫表格function paintTable(row, col){var tableCon = ""; // 表格內容字符串for(var r = 1; r <= row; r++){ // 控制行數tableCon += "<div>";for(var c = 1; c <= col; c++){ // 控制列數tableCon += "<div id=col_" + r + "_" + c + " class='dd gray'></div>";}tableCon += "</div>";}// 講表格內容字符串添加到對應標簽中document.getElementById("tab").innerHTML = tableCon;}// 開始游戲function playGame(){// 獲取當前行和列var ROW = Number(row.value);var COL = Number(col.value);// 畫表格paintTable(ROW, COL);// 統計總的點擊次數var totalStep = 0;if(totalStep == 0){document.getElementById("st").innerText = "你還未開始走";}// 獲取到所有的單元格var cellArr = document.getElementsByClassName("dd");for(var i = 0; i < cellArr.length; i++){// 為每個單元格添加事件cellArr[i].onclick = function(){// 總步數加1totalStep++;var targetIdArr = new Array(this.id); // 初始化一個數組, 并添加當前單元格的id// 獲取當前單元格的行號和列號var curRow = Number(this.id.split("_")[1]);var curCol = Number(this.id.split("_")[2]);// 獲取上、下、左、右的單元格id, 并添加到數組中if(curRow > 1){ // 判斷當前單元格是否在第一行targetIdArr.push("col_" + (curRow - 1) + "_" + curCol);}if(curRow < ROW){ // 判斷當前單元格是否在最后一行targetIdArr.push("col_" + (curRow + 1) + "_" + curCol);}if(curCol > 1) { // 判斷當前單元格是否在第一列targetIdArr.push("col_" + curRow + "_" + (curCol - 1));}if(curCol < COL){ // 判斷當前單元格是否在最后一列targetIdArr.push("col_" + curRow + "_" + (curCol + 1));}// 改變數組中存在的單元格的顏色for(var j = 0; j < targetIdArr.length; j++){var curCellClassName = document.getElementById(targetIdArr[j]).className;// 判斷當前單元格是否已變色if(curCellClassName.indexOf("gray") != -1){// 如果未變色document.getElementById(targetIdArr[j]).className = "dd light";} else {document.getElementById(targetIdArr[j]).className = "dd gray";}}document.getElementById("st").innerText = "你已經走了" + totalStep + "步";// 游戲結束條件: 當所有單元格均變色if(document.getElementsByClassName("dd gray").length == 0){alert("恭喜你成功了！請提升難度繼續開始吧。");}}}}</script> </head><body> <div>請輸入行數: <input id="row">請輸入列數: <input id="col"><input type="button" value="開始游戲" onclick="playGame()"><h3 style="color:tomato" id="st"></h3> </div> <div id="tab"><!-- 表格內容 --> </div> </body></html>jQuery實現：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jquery實現點燈游戲</title><style>* {overflow: auto;padding: 0px;margin: 0px;}.dd {float: left;border: 1px solid black;width: 50px;height: 50px;}.gray {background: gray;}.light {background: yellow;}#con {margin: 30px;}#showStep {color: red;}</style><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script>function paint(row, col) {var tabContent = "";for (var r = 1; r <= row; r++) { // 控制行數tabContent += "<div>";for (var c = 1; c <= col; c++) { // 控制列數tabContent += "<div id='col_" + r + "_" + c + "' class='dd gray' ></div>";}tabContent += "</div>";}// 將表格添加到標簽$("#con").html(tabContent)}$(function () {$("#btn").click(function () {var totalStep = 0;$("#showStep").html("你還未開始走");// 獲取行數和列數var ROW = Number($("#row").val());var COL = Number($("#col").val());// 畫表格paint(ROW, COL);// 獲取所有單元格$(".dd").each(function () {$(this).click(function () {totalStep++;// 獲取當前單元格的idvar curCellId = $(this).prop("id");var ids = new Array(curCellId);// 獲取當單元格的行var curRow = Number(curCellId.split("_")[1]);var curCol = Number(curCellId.split("_")[2]);// 獲取上下左右單元格if (curRow > 1) {ids.push("col_" + (curRow - 1) + "_" + curCol);}if (curRow < ROW) {ids.push("col_" + (curRow + 1) + "_" + curCol);}if (curCol > 1) {ids.push("col_" + curRow + "_" + (curCol - 1));}if (curCol < COL) {ids.push("col_" + curRow + "_" + (curCol + 1));}// 將單元格變色$(ids).each(function (i, v) {if ($("#" + v).hasClass("gray")) {$("#" + v).removeClass("gray");$("#" + v).addClass("light");} else {$("#" + v).removeClass("light");$("#" + v).addClass("gray");}})$("#showStep").html("你已經走了" + totalStep + "步")// 判斷游戲是否結束if ($(".gray").size() == 0) {alert("恭喜你成功了, 游戲結束");}})})})})</script> </head><body><div>請輸入行數: <input id="row">請輸入列數: <input id="col"><input type="button" value="開始游戲" id="btn"><br><font id="showStep"></font></div><div id="con"></div> </body></html>總結
以上是生活随笔為你收集整理的点灯游戏原生JS实现与jQuery实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百度之星 2018 资格赛 T1
- 下一篇： c语言调用 svn api,Subver