<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 一个无聊的游戏 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </HEAD> <style type="text/css"> tr td{cursor: pointer;transition: all ease .3s;color: #fff;font-weight: 600;box-shadow: 0 0 5px 1px #000;} tr:last-child td:last-child{color: #000} .bd{margin: 0 auto;width: 300px;} </style> <BODY style="background-color:#eee"> <div class="bd"> <h4 style="margin:15px 15px;">全部换色即为过关！</h4> <table width="300" height="180" border="0" cellpadding="0" cellspacing="3"> <tr align="center"> <td bgcolor="#4599cc" width="25%" id="0-0" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="0-1" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="0-2" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="0-3" onclick="ct(this)"></td> </tr> <tr align="center"> <td bgcolor="#4599cc" width="25%" id="1-0" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="1-1" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="1-2" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="1-3" onclick="ct(this)"></td> </tr> <tr align="center"> <td bgcolor="#4599cc" width="25%" id="2-0" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="2-1" onclick="ct(this)"></td> <td bgcolor="#4599cc" width="25%" id="2-2" onclick="ct(this)"></td> <td bgcolor="#f5f5d5" id="2-3" onclick="resetBox(this)"></td> </tr> </table> <h4 id="mm"></h4> </div> </BODY> </HTML> <script type="text/javascript"> console.log("E H J I F C D H C") var $ = function(ele){return document.getElementById(ele);} var box = [ [1,1,1,1], [1,1,1,1], [1,1,1,0] ]; var maxX = 2; //最大行 var maxY = 3; //最大列 var count = 0; function ct(ele){ var p = ele.id.split("-"); if(box[p[0]][p[1]] == 1){ //能点击 box[p[0]][p[1]] = -1; var sum = 0; var aX = parseInt(p[0])-1, bX = parseInt(p[0])+1, cY = parseInt(p[1])-1, dY = parseInt(p[1])+1; if ( aX >= 0 ){ if(box[aX][p[1]] == -1){ box[aX][p[1]] = 1; }else{ box[aX][p[1]] = -1; } } if ( bX <= maxX ) { if(box[bX][p[1]] == -1){ box[bX][p[1]] = 1; }else{ box[bX][p[1]] = -1; } } if( cY >= 0 ){ if(box[p[0]][cY] == -1){ box[p[0]][cY] = 1; }else{ box[p[0]][cY] = -1; } } if( dY <= maxY ){ if(box[p[0]][dY] == -1){ box[p[0]][dY] = 1; }else{ box[p[0]][dY] = -1; } } box[2][3] = 0; $("mm").innerHTML = "第"+(++count)+"次尝试"; for(var i = 0; i<3 ; i++){ for(var j =0 ;j <4 ; j++){ sum += box[i][j]; if(box[i][j] == 1){ $(i+"-"+j).bgColor = "#4599cc"; $(i+"-"+j).style.color = "#fff"; }else if(box[i][j] == -1){ $(i+"-"+j).bgColor = "#d8cb59"; $(i+"-"+j).style.color = "#074d6d"; }else{ $(i+"-"+j).bgColor = "#f5f5d5"; }; } }; if(sum == -11){ // $("mm").innerHTML = "恭喜过关!尝试总次数："+count; $("mm").style.color = "#960000"; } } } function resetBox(){ for(var i=0; i<3; i++){ for(var j=0; j<4; j++){ box[i][j] = 1; $(i + '-' + j).bgColor = '#4599cc'; $(i + '-' + j).style.color = '#fff'; } } box[2][3] = 0; count = 0; $(2 + '-' + 3).bgColor = '#f5f5d5'; $('mm').innerHTML = ''; $("mm").style.color = "#000"; } </script>
这里主要运用的技术就是数组了，逻辑很简单，让点击的元素四周元素全部变色，所有元素换色成功后即为过关