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 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
node.js超时timeout详解
Nov 26 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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 INI配置文件的解析实现分析
2011/01/04 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
简单的js分页脚本
2009/05/21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
javascript实现留言板功能
2020/02/08 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
经济学人订阅:The Economist
2018/07/19 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
个人汇报材料范文
2014/12/30 职场文书
婚礼父母致辞
2015/07/28 职场文书