关灯游戏
2016-10-29 本文已影响0人
我就是大表哥
<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 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
<p>游戏说明面界面的这个格子也是用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>
