js小游戏---智力游戏

<!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>

这里主要运用的技术就是数组了，逻辑很简单，让点击的元素四周元素全部变色，所有元素换色成功后即为过关