首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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制作颜色反转小游戏

- Author -

tianzitianxie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
js添加绑定事件的方法
May 15 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
vue中如何使用ztree
Feb 06 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
JS实现的对象去重功能示例
Jun 04 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
TaiShan(1) JDK(1) 云服务器(1) 数据备份(2) queue(1) 腾讯云(1) 内存池(1) expdp(1) 外键约束(1) Foreign Key(1)
You might like
ip签名探针
2006/10/09 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python飞机大战游戏实例讲解
2020/12/04 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
自荐书4要点
2014/01/25 职场文书
电钳工人个人求职信
2014/05/10 职场文书
法律专业自荐信
2014/06/03 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
离职报告范文
2014/11/04 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js