专注综合财经股票网,提供炒股知识,追涨停技巧等文章,是广大股民的学习社区!

关灯游戏

发布:互联网2020-01-14 09:21:51分类: 地区冲突

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

</p><p>这样的心情什么也不想做。

分析整个开发的过程

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

S61025-21204806.jpg width="200"

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

布局

<p>这里布局不会用html的。那样的话代码太多,而且全部重复,所以直接用JavaScript,一个for循环就够啦。<p>咱们在做游戏之前先来个简单的游戏说明界面:<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 p {    display: inline-block;    background: black;    height: 30px;    width: 30px;    border: 1px solid gray;   }      .titleBox p:nth-child(1),   .titleBox p:nth-child(2),   .titleBox p:nth-child(8),   .titleBox p:nth-child(6),   .titleBox p:nth-child(7),   .titleBox p:nth-child(14),   .titleBox p:nth-child(18),   .titleBox p:nth-child(25),   .titleBox p:nth-child(26),   .titleBox p:nth-child(24),   .titleBox p:nth-child(32),   .titleBox p:nth-child(36),   .titleBox p:nth-child(43),   .titleBox p:nth-child(44),   .titleBox p:nth-child(42),   .titleBox p:nth-child(48),   .titleBox p: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文件

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

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

S61025-21150128.jpg

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

var titleBox = document.querySelector('.titleBox'); for(var j = 0; j < col * row; j++) {  var box1 = document.createElement('p');  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 p {    display: inline-block;    background: black;    height: 30px;    width: 30px;    border: 1px solid gray;   }      .titleBox p:nth-child(1),   .titleBox p:nth-child(2),   .titleBox p:nth-child(8),   .titleBox p:nth-child(6),   .titleBox p:nth-child(7),   .titleBox p:nth-child(14),   .titleBox p:nth-child(18),   .titleBox p:nth-child(25),   .titleBox p:nth-child(26),   .titleBox p:nth-child(24),   .titleBox p:nth-child(32),   .titleBox p:nth-child(36),   .titleBox p:nth-child(43),   .titleBox p:nth-child(44),   .titleBox p:nth-child(42),   .titleBox p:nth-child(48),   .titleBox p: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>  <p class="czsm">   操作说明  </p>  <p id="mask">   <h2 class="title">游戏操作说明</h2>   <ul class="ul">    <li>本游戏由49盏灯所组成,共有两种状态,灯开的状态为黄色,关的状态为黑色    </li>    <li>当按开始游戏按钮时,会模拟点亮一些灯</li>    <li>当你把所有黄色的灯点为黑色,就可以进行下一关</li>    <li>下面是游戏操作过程</li>    <p class="titleBox">    </p>    <li>(如上图所示,当你按下最角上那个时,会出现如上图所示的亮灯状态,按下边上的时,看不到的地方不亮灯,其他的地方是以十字的形式完成,按灯时与他相关的都会变为与按之前相反的状态)</li>   </ul>   <p class="tuichu">    进游戏   </p>  </p>  <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('p'); //创建一个大的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('p');  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('p');   titleBox.appendChild(box1);  }  for(var j = 0; j < col * row; j++) {   var box = document.createElement('p');   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('p');  leftp.className = 'left';  leftp.innerHTML = '还需关灯<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">0</p>盏';  wrap.appendChild(leftp);  var rightp = document.createElement('p');  rightp.className = 'right';  rightp.innerHTML = '第<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">1</p>关';  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 = '第<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + (confirmAdd + 1) + '</p>关';    leftp.innerHTML = '还需关灯<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">0</p>盏';    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 = '还需关灯<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + score + '</p>盏';   } else {    obj.style.backgroundColor = beforeBg;    obj.style.color = beforColor;    obj.style.border = boxBorder;    obj.style.boxShadow = '0px 0px 0px yellow';    score--;    leftp.innerHTML = '还需关灯<p style="color:white; font-size:16px;display:inline-block; margin:0px 5px;border:1px solid black; padding:5px 10px;border-radius:20px">' + score + '</p>盏';   }  }  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>

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!