JavaScript制作颜色反转小游戏

游戏规则：

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

 
 

 
 

 
 
 

 

 
 
 
 
 
  * {
  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;  
    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;
  }
 
 

 
 
  颜色翻转
  游戏规则：
  
  单击方块，被单击的方块及相邻方块变色，当所有蓝色方块变为橙色时，完成任务，进入下一级。
  
  
  
  
  
  
  级别：0
  本级点击次数：0
  总点击次数：0