<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>
