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 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
jQuery find和children方法使用
Jan 31 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php print EOF实现方法
2009/05/21 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
itchat接口使用示例
2017/10/23 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
中秋节礼品促销方案
2014/02/02 职场文书
运动会稿件100字
2014/02/21 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书