JavaScript制作颜色反转小游戏

2019-11-20 08:53:15

字体：大中小

来源：转载

供稿：网友

游戏规则：

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

<!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实现简单的日历效果