关灯游戏

我不喜欢下雨天,可我所在的城市却偏偏细雨绵绵。我多希望明天可以看到晴空万里。那样我应该就不会像现在这样压抑

这样的心情什么也不想做。

分析整个开发的过程

当然在开始写代码之前，还是要给大家看看游戏的效果图的。

S61025-21204806.jpg width="200"

看完了效果图之后。咱们一起来分析一下，这个简单的游戏到底需要几步才可以完成。
<ol>
<li>首先，咱们要干的就是布局。怎么才能出现上面的效果的样式。
<li>然后就是怎么关掉每一盏灯，当然这里要用到onclick这个点击事件。
<li>经过前面两步，灯应该就可以关掉啦，这里就应该处理边界问题。（后面会细讲）。
<li>接下来就是怎么判断是否过关（后面细讲）；
</ol>

布局

这里布局不会用html的。那样的话代码太多，而且全部重复，所以直接用JavaScript，一个for循环就够啦。
咱们在做游戏之前先来个简单的游戏说明界面：
<ol>
<li>游戏说明的CSS文件

#mask {
    background: rgba(200, 200, 200, 0.9);
    width: 100%;
    height: auto;
    position: absolute;
    display: none;
   }
   .title {
    color: red;
    padding-left: 20px;
    text-align: left;
   }  
   ul {
    text-align: left;
    color: black;
    padding-right: 5px;
   }   
   li {
    line-height: 20px;
   }   
   .titleBox {
    width: 250px;
    font-size: 0;
    margin: 5px auto;
   }   
   .titleBox div {
    display: inline-block;
    background: black;
    height: 30px;
    width: 30px;
    border: 1px solid gray;
   }
   
   .titleBox div:nth-child(1),
   .titleBox div:nth-child(2),
   .titleBox div:nth-child(8),
   .titleBox div:nth-child(6),
   .titleBox div:nth-child(7),
   .titleBox div:nth-child(14),
   .titleBox div:nth-child(18),
   .titleBox div:nth-child(25),
   .titleBox div:nth-child(26),
   .titleBox div:nth-child(24),
   .titleBox div:nth-child(32),
   .titleBox div:nth-child(36),
   .titleBox div:nth-child(43),
   .titleBox div:nth-child(44),
   .titleBox div:nth-child(42),
   .titleBox div:nth-child(48),
   .titleBox div:nth-child(49) {
    background: yellow;
   }
   
   .czsm {
    border: 1px solid cyan;
    color: blue;
    padding: 2px;
    position: absolute;
    right: 15px;
    top: 10px;
   }
   
   .tuichu {
    border: 1px solid cyan;
    color: blue;
    font-size: 1.2em;
    padding: 3px 10px;
    position: absolute;
    right: 20px;
    top: 20px;
   }

<li>游戏说明的HTMl文件

<div id="mask">
   <h2 class="title">游戏操作说明</h2>
   <ul class="ul">
    <li>本游戏由49盏灯所组成，共有两种状态,灯开的状态为黄色，关的状态为黑色
    </li>
    <li>当按开始游戏按钮时，会模拟点亮一些灯</li>
    <li>当你把所有黄色的灯点为黑色，就可以进行下一关</li>
    <li>下面是游戏操作过程</li>
    <div class="titleBox">
    </div>
    <li>(如上图所示，当你按下最角上那个时，会出现如上图所示的亮灯状态，按下边上的时，看不到的地方不亮灯，其他的地方是以十字的形式完成，按灯时与他相关的都会变为与按之前相反的状态)</li>
   </ul>
   <div class="tuichu">
    进入游戏
   </div>
</div>

<li>游戏界面的效果图：

S61025-21150128.jpg

游戏说明面界面的这个格子也是用for循环写的

var titleBox = document.querySelector('.titleBox');
 for(var j = 0; j < col * row; j++) {
  var box1 = document.createElement('div');
  titleBox.appendChild(box1);
 }

console.log("\u5fc3\u60c5\u4e0d\u597d\u3002\u4e0d\u60f3\u5199\u5566");



<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>关灯游戏</title>
  <style media="screen">
   body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background-color: pink;
   }
   
   .wrap {
    background-color: pink;
    font-size: 0px;
    margin: auto;
    text-align: center;
   }
   
   .box {
    border-radius: 0px 10px 0px 10px;
    font-size: 16px;
    text-align: center;
    color: white;
    margin: 3px;
   }
   
   .start_btn {
    border: 1px solid gray;
    border-radius: 10px;
    background-color: pink;
    outline: none;
    font-size: 20px;
    height: 40px;
    width: 130px;
    margin: 10px;
   }
   
   .start_btna {
    border: 1px solid gray;
    background-color: pink;
    outline: none;
    border-radius: 10px;
    font-size: 20px;
    height: 40px;
    width: 130px;
    margin: 10px;
   }
   
   .left,
   .right {
    font-size: 20px;
    margin-top: 20px;
    height: 40px;
    position: absolute;
    color: red;
   }
   
   .left {
    width: 150px;
    float: left;
   }
   
   .right {
    width: 100px;
    right: 20px;
    float: right;
   }
   
   .top {
    font-size: 30px;
    padding: 5px;
    color: white;
    font-style: normal;
    text-shadow: 3px 3px 15px yellow;
   }   
   .mask {
    border: 2px solid red;
    position: absolute;
    padding: 5px;
    text-align: left;
   }   
   .footer {
    width: 100%;
    position: absolute;
    bottom: 10px;
    color: cyan;
    text-align: center;
   }   
   #mask {
    background: rgba(200, 200, 200, 0.9);
    width: 100%;
    height: auto;
    position: absolute;
    display: none;
   }
   .title {
    color: red;
    padding-left: 20px;
    text-align: left;
   }  
   ul {
    text-align: left;
    color: black;
    padding-right: 5px;
   }   
   li {
    line-height: 20px;
   }   
   .titleBox {
    width: 250px;
    font-size: 0;
    margin: 5px auto;
   }   
   .titleBox div {
    display: inline-block;
    background: black;
    height: 30px;
    width: 30px;
    border: 1px solid gray;
   }
   
   .titleBox div:nth-child(1),
   .titleBox div:nth-child(2),
   .titleBox div:nth-child(8),
   .titleBox div:nth-child(6),
   .titleBox div:nth-child(7),
   .titleBox div:nth-child(14),
   .titleBox div:nth-child(18),
   .titleBox div:nth-child(25),
   .titleBox div:nth-child(26),
   .titleBox div:nth-child(24),
   .titleBox div:nth-child(32),
   .titleBox div:nth-child(36),
   .titleBox div:nth-child(43),
   .titleBox div:nth-child(44),
   .titleBox div:nth-child(42),
   .titleBox div:nth-child(48),
   .titleBox div:nth-child(49) {
    background: yellow;
   }
   
   .czsm {
    border: 1px solid cyan;
    color: blue;
    padding: 2px;
    position: absolute;
    right: 15px;
    top: 10px;
   }
   
   .tuichu {
    border: 1px solid cyan;
    color: blue;
    font-size: 1.2em;
    padding: 3px 10px;
    position: absolute;
    right: 20px;
    top: 20px;
   }
  </style>

 </head>

 <body>
  <audio src="music/game.mp3" loop="loop" class="gameMusic"></audio>
  <audio src="music/dianji.wav" class="music"></audio>
  <div class="czsm">
   操作说明
  </div>
  <div id="mask">
   <h2 class="title">游戏操作说明</h2>
   <ul class="ul">
    <li>本游戏由49盏灯所组成，共有两种状态,灯开的状态为黄色，关的状态为黑色
    </li>
    <li>当按开始游戏按钮时，会模拟点亮一些灯</li>
    <li>当你把所有黄色的灯点为黑色，就可以进行下一关</li>
    <li>下面是游戏操作过程</li>
    <div class="titleBox">
    </div>
    <li>(如上图所示，当你按下最角上那个时，会出现如上图所示的亮灯状态，按下边上的时，看不到的地方不亮灯，其他的地方是以十字的形式完成，按灯时与他相关的都会变为与按之前相反的状态)</li>
   </ul>
   <div class="tuichu">
    进游戏
   </div>
  </div>
  <footer class="footer">
   <i style="color: coral;">xxxxxxxxxxxxx</i></P>
  </footer>

 </body>
 <script type="text/javascript">
  var music = document.querySelector('.music');
  var row = 7; //行
  var col = 7; //列
  var boxWidth = 40; //每一
  var boxHeight = 40;
  var beforeBg = 'black';
  var afterBg = 'yellow';
  var beforColor = 'white';
  var afterColor = 'red';
  var score = 0; //分数递增
  var confirmAdd = 0; //关数递增
  var confirm = 0; //关数递增（产生关数）
  var startOroff = true;
  var boxBorder = '1px solid gray';
  var boxBordera = '1px solid yellow'  
  var mask = document.getElementById('mask');
  mask.style.height = document.documentElement.clientHeight + 'px';
  var gameMusic=document.querySelector('.gameMusic');
  
  var czsm = document.querySelector('.czsm');
  var tuichu = document.querySelector('.tuichu');
  var body = document.getElementsByTagName('body'); //获取节点body标签
  var wrap = document.createElement('div'); //创建一个大的DIV
  wrap.className = 'wrap'; //给大的DIV一个class名（方便布局）
  wrap.style.width = row * boxWidth + row * 2 + row * 7 + 'px'; //设置大DIV的宽度
  body[0].appendChild(wrap);
  var topDiv = document.createElement('div');
  topDiv.className = 'top';
  topDiv.innerHTML = '关灯游戏';
  wrap.appendChild(topDiv);
  var light = [];
  var titleBox = document.querySelector('.titleBox');
  for(var j = 0; j < col * row; j++) {
   var box1 = document.createElement('div');
   titleBox.appendChild(box1);
  }
  for(var j = 0; j < col * row; j++) {
   var box = document.createElement('div');
   box.className = 'box';
   box.style.height = boxHeight + 'px';
   box.style.width = boxWidth + 'px';
   box.style.border = boxBorder;
   box.style.backgroundColor = beforeBg;
   box.style.display = 'inline-block';
   box.style.lineHeight = boxHeight + 'px';
   box.index = j;
   box.addEventListener('touchend', boxclick, false);
   light.push(box);
   wrap.appendChild(box);
  }
  var but = document.createElement('button');
  but.className = 'start_btn';
  but.innerHTML = '开始游戏';
  but.addEventListener('touchend', rand, false);
  wrap.appendChild(but);
  var leftp = document.createElement('div');
  leftp.className = 'left';
  leftp.innerHTML = '还需关灯<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">0</div>盏';
  wrap.appendChild(leftp);
  var rightp = document.createElement('div');
  rightp.className = 'right';
  rightp.innerHTML = '第<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">1</div>关';
  wrap.appendChild(rightp);
  var butt = document.createElement('button');
  butt.className = 'start_btna';
  butt.innerHTML = '重置关卡';
  wrap.appendChild(butt);
  var vv = true;
  tuichu.addEventListener('touchend', function() {
   mask.style.display = 'none';
   wrap.style.display = 'block';
   czsm.style.display = 'block';
  }, false);
  czsm.addEventListener('touchend', function() {
   mask.style.display = 'block';
   wrap.style.display = 'none'
   czsm.style.display = 'none';

  }, false);
  
  butt.addEventListener('touchend', function() {
   if(startOroff) {
    alert('请先开始游戏');
    return;
   } else {
    if(vv) {
     startOroff = true;
     var boxDiv = document.querySelectorAll('.box');
     for(var i = 0; i < boxDiv.length; i++) {
      boxDiv[i].style.backgroundColor = beforeBg;
      boxDiv[i].style.border = boxBorder;
      boxDiv[i].style.color = beforColor;
      boxDiv[i].style.boxShadow = '0px 0px 0px yellow';
     }
     score = 0;
     confirm -= 1;
     rand();
     vv = false;
    } else {
     alert('每关只能重置一次')
    }
   }
  }, false);
  function clickItem(obj) {
   onOroff(obj);
   if(obj.index % col != col - 1) {
    onOroff(light[obj.index + 1]);
   }
   if(obj.index % col != 0) {
    onOroff(light[obj.index - 1]);
   }
   if(obj.index + col < light.length) {
    onOroff(light[obj.index + col]);
   }
   if(obj.index - col >= 0) {
    onOroff(light[obj.index - col]);
   }
   if(score == 0) {
    startOroff = true;
    confirmAdd++;
    alert("恭喜你过了第" + confirmAdd + '关');
    rightp.innerHTML = '第<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + (confirmAdd + 1) + '</div>关';
    leftp.innerHTML = '还需关灯<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">0</div>盏';
    but.innerHTML = '下一关';
    rand();
   }
  }
  function onOroff(obj) {
   if(obj.style.backgroundColor == beforeBg) {
    obj.style.backgroundColor = afterBg;
    obj.style.color = afterColor;
    obj.style.boxShadow = '3px 3px 15px yellow';
    obj.style.border = boxBordera;
    score++;
    leftp.innerHTML = '还需关灯<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + score + '</div>盏';
   } else {
    obj.style.backgroundColor = beforeBg;
    obj.style.color = beforColor;
    obj.style.border = boxBorder;
    obj.style.boxShadow = '0px 0px 0px yellow';
    score--;
    leftp.innerHTML = '还需关灯<div style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + score + '</div>盏';
   }
  }
  function boxclick() {
   music.play();
   if(startOroff) {
    alert('还没开始游戏，请按下面开始按钮开始游戏')
   } else {
    clickItem(this);
   }
  }
  function rand() {
   if(startOroff == true) {
    confirm = confirm + 3;
    for(var i = 0; i < confirm; i++) {
     var item = parseInt(Math.random() * (col * row - 1));
     clickItem(light[item]);
     gameMusic.play();
    }
   } else {
    alert('请先完成本关！！！');
    return;
   }
   startOroff = false;
   vv = true;
  }
  
 </script>
</html>

最后编辑于：2017.12.04 06:25:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343

关灯游戏

分析整个开发的过程

布局

推荐阅读更多精彩内容