JavaScript制作颜色反转小游戏


Posted in Javascript onSeptember 25, 2016

游戏规则:

单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">

 <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 Remove this if you use the .htaccess -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>颜色翻转</title>
 <meta name="description" content="">
 <meta name="author" content="jiamengkai">

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

 <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
 <style type="text/css">
  * {
  margin: 0;
  padding: 0;
  font-family: "Microsoft yahei";
  color: #000;
  }
  h1 {
  margin: 10px 0;
  font-size: 300%;
  font-weight: bolder;
  }
  span {
  display: block;
  text-indent: 32px;
  }
  .title {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 600px;
  margin: -300px 0 0 -500px;
  }
  .main {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -150px;
  background: #555;
  border-radius: 8px;
  1border: 5px solid #555;
  }
  .blue, .orange {
  margin: 5px;
  }
  .blue {
  background: #099;
  border-radius: 8px;
  float: left;
  }
  .orange {
  background: #D69C49;
  border-radius: 8px;
  float: left;
  }
  .button { 
    1display: inline-block; 
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ 
    display: block; 
    vertical-align: baseline; 
    margin: 8px 5px; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    font: 14px/100% Arial, Helvetica, sans-serif; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em;  
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
  } 
  .button:hover { 
    text-decoration: none; 
  } 
  .button:active { 
    position: relative; 
    top: 1px; 
  }
  .btn { 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
  } 
  .btn:hover { 
    background: #f47c20; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); 
    background: -moz-linear-gradient(top, #f88e11, #f06015); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); 
  } 
  .btn:active { 
    color: #fcd3a5; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); 
    background: -moz-linear-gradient(top, #f47a20, #faa51a); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); 
  } 
  .operBtn {
  margin-top: 10px;
  width: 200px;
  text-align: center;
  }
  .tipSpan {
  display: inline-block;
  margin: 5px 2px;
  width: 200px;
  text-align: right;
  font-size: 18px;
  }
  .tipNum {
  display: inline-block;
  margin-right: 10px;
  text-align: right;
  width: 60px;
  font-size: 18px;
  }
 </style>
 </head>

 <body>
 <div class="title">
  <h1>颜色翻转</h1>
  <h2>游戏规则:</h2>
  <span>
  单击方块,被单击的方块及相邻方块变色,当所有蓝色方块变为橙色时,完成任务,进入下一级。
  </span>
  <div class="operBtn">
  <input type="button" class="button btn" id="reset" value="重新开始"/>
  <input type="button" class="button btn" id="resetLevel" value="重置本级"/>
  </div>
  <div class="tipInfo">
  <span class="tipSpan">级别:</span><div class="tipNum" id="level">0</div>
  <span class="tipSpan">本级点击次数:</span><div class="tipNum" id="clickNum">0</div>
  <span class="tipSpan">总点击次数:</span><div class="tipNum" id="clickSumNum">0</div>
  </div>
 </div>
 <div class="main" id="main">
 </div>
 </body>
 <script type="text/javascript" src="common.js"></script>
 
 <script type="text/javascript">
 var level = 1;
 var margin = 10;
 var clickNum = 0;
 var clickSumNum = 0;
 window.onload = function() {
  
  var mainNode = document.getElementById("main");
  
  var mainWidth = mainNode.offsetWidth;
  var mainHeight = mainNode.offsetHeight;
  
  //重新开始
  var reset = document.getElementById("reset");
  reset.onclick = function() {
  level = 1;
  createNewDiv();
  };
  
  //重置本级
  var resetLevel = document.getElementById("resetLevel");
  resetLevel.onclick = function() {
  createNewDiv();
  };
  
  //换颜色
  function changeColor(obj) {
  if(obj.getAttribute("class")) {
   if(obj.getAttribute("class") == "blue") {
   obj.setAttribute("class", "orange");
   }else {
   obj.setAttribute("class", "blue");
   }
  }
  }
  
  //换颜色
  function nodesChangeColor(obj) {
  clickNum += 1;
  clickSumNum += 1;
  var clickNumNode = document.getElementById("clickNum");
  clickNumNode.innerHTML = clickNum;
  var clickSumNumNode = document.getElementById("clickSumNum");
  clickSumNumNode.innerHTML = clickSumNum;
  
  changeColor(obj);
  
  var obj_r = parseInt(obj.getAttribute("r"));
  var obj_c = parseInt(obj.getAttribute("c"));
  
  
  if(obj_r-1>0) {
   var topObj = document.getElementById("r"+(obj_r-1)+"_c"+obj_c);
   changeColor(topObj);
  }
  if(obj_c+1<=level) {
   var rightObj = document.getElementById("r"+obj_r+"_c"+(obj_c+1));
   changeColor(rightObj);
  }
  if(obj_r+1<=level) {
   var bottomObj = document.getElementById("r"+(obj_r+1)+"_c"+obj_c);
   changeColor(bottomObj);
  }
  if(obj_c-1>0) {
   var leftObj = document.getElementById("r"+obj_r+"_c"+(obj_c-1));
   changeColor(leftObj);
  }
  setTimeout(function() {
   //计算orange块 的数量
   orangeDivNum();
  },500);
  }
  
  //计算orange块 的数量
  function orangeDivNum() {
  var o_nodes = document.getElementsByClassName("orange");
  if(o_nodes.length == level*level) {//完成全部翻转
   //进入下一级
   level += 1;
   createNewDiv();
   myAlert();
  }else {}
  }
  
  //进入下一级
  function createNewDiv() {
  var divWidth = mainWidth/level-margin;
  var divHeight = mainHeight/level-margin;
  mainNode.innerHTML = "";
  for(var i=1;i<=level;i++) {
   for(var j=1;j<=level;j++) {
   var colorNodes = document.createElement("div");
   colorNodes.style.cssText = "width: "+divWidth+"px;height: "+divHeight+"px;";
   colorNodes.setAttribute("class", "blue");
   colorNodes.setAttribute("id", "r"+i+"_c"+j);
   colorNodes.setAttribute("r", i);
   colorNodes.setAttribute("c", j);
   colorNodes.onclick = function() {
    nodesChangeColor(this);
   };
   mainNode.appendChild(colorNodes);
   mainNode.style.cssText = "border: 5px solid #555;";
   }
  }
  
  var levelSpan = document.getElementById("level");
  levelSpan.innerHTML = level;
  clickNum = 0;
  var clickNumNode = document.getElementById("clickNum");
  clickNumNode.innerHTML = clickNum;
  }
 };
 </script>
</html>
Javascript 相关文章推荐
JavaScript 基础篇(一)
Mar 30 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
原生JS实现网络彩票投注效果
Sep 25 #Javascript
JavaScript实现url参数转成json形式
Sep 25 #Javascript
You might like
[JS]点出统计器
2020/10/11 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
javascript关于继承解析
2016/05/10 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
python openpyxl使用方法详解
2019/07/18 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
Python实现区域填充的示例代码
2021/02/03 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
升职自荐信
2013/11/28 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
个人承诺书怎么写
2014/05/24 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
师德师风事迹材料
2014/12/20 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
图文详解matlab原始处理图像几何变换
2021/07/09 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫