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

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

js小游戏---智力游戏的更多相关文章

  1. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  2. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  3. BZOJ_1022_[SHOI2008]_小约翰的游戏John_(博弈论_反Nim游戏)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1022 反Nim游戏裸题.详见论文<组合游戏略述——浅谈SG游戏的若干拓展及变形>. ...

  4. SHOI2008小约翰的游戏John

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1139  Solved: 701[Submit][ ...

  5. BZOJ2464: 中山市选[2009]小明的游戏

    2464: 中山市选[2009]小明的游戏 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 280  Solved: 124[Submit][Statu ...

  6. bzoj 1022: [SHOI2008]小约翰的游戏John anti_nim游戏

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1189  Solved: 734[Submit][ ...

  7. BZOJ 1022 [SHOI2008]小约翰的游戏John

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1635  Solved: 1036[Submit] ...

  8. 6、Cocos2dx 3.0游戏开发找小三之游戏的基本概念

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你 ...

  9. 1022: [SHOI2008]小约翰的游戏John

    1022: [SHOI2008]小约翰的游戏John Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1322  Solved: 829[Submit][ ...

随机推荐

  1. Codeforces Round #380(div 2)

    A. 题意:给你一串字符串(<=100),将ogo ogogo ogogogo ogogogogo……这种全部缩成***,输出缩后的字符串 分析:第一遍扫对于那些go的位置,记录下next[i] ...

  2. 【jQuery】$.ajax() 常用参数理解

    参考:http://hemin.cn/jq/jQuery.ajax.html注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置.个人理解全局设置,在每次调用$.ajax()时都会执行 ...

  3. Node+Socketio实现消息群发功能

    注:本博文是作者原创,转载请注明出处. 在项目中时常会使用到socketio,今天我们就来实现Node+socketio实现群发消息功能, 项目源码:https://github.com/zhangx ...

  4. Bioinformatics Glossary

    原文:http://homepages.ulb.ac.be/~dgonze/TEACHING/bioinfo_glossary.html Affine gap costs: A scoring sys ...

  5. 【BZOJ-3643】Phi的反函数 数论 + 搜索

    3643: Phi的反函数 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 141  Solved: 96[Submit][Status][Discuss ...

  6. a版本冲刺第五天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 运动会这几天两位同学准备比赛也确实比较忙,两位同学又刚好有事回家去了,由于之前git解决一次冲突后,远程我们还不能很好地 ...

  7. shell知识点小结

    目录 引言 shell中的数组 数组的定义 数组的使用 实际的例子 shell中大小的比较 shell中的括号 shell中函数的定义 杂项知识点 字符串转数组 常用判断标志 linux后台运行相关 ...

  8. 服务器IIS同时支持ASP和PHP

    有一台在用的服务器,系统环境是windows2008R2,上面运行了个app后台程序,现在需要放点PHP代码,需要和java同时使用. 实现方法: 1.安装phpmanger for iis,按照教程 ...

  9. Problems about trees

    Problems (1) 给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)再回到起点的最短路程. 答案是显然的:边权之和的两倍. (2)给一棵带边权的树,求遍历这棵树(每个节点至少经过一次)的最 ...

  10. Python学习笔记——集合类型

    集合类型有两种不同的类型——可变集合(set)和不可变集合(frozenset) 可变集合不是可哈希的,不能用作字典的键,也不能用做其他集合中的元素 不可变集合是有哈希值的,能被用做字典的键或者是作为 ...