<!DOCTYPE html>
<html>
<head>
<title>别踩白塊</title>
<script type="text/javascript" src="js/my.js"></script>
<style>
body {
background-color: #ffffff;
}
.heading{
width: 450px;
margin: 10px auto;
}
h1 {
font-size: 40px;
}
.btns{
font-size:18px;
text-align:center;
width:100px;
height:20px;
display:inline-block;
margin-right: 5px;
line-height: 27px;
background: darkturquoise;
border-style:solid;
border-width:1px;
border-color: #E8F2FE;
border-radius: 7px;
padding: 3px;
cursor: pointer;
}
#play, #stop {
width: 100px;
}
.heading span:hover {
/*--邊框陰影--*/
box-shadow: 0 0 7px 4px #0cc;
}
.container {
width: 500px;
margin: 50px auto;
position: relative;
}
.left{
background-color: #fff;
position: absolute;
border-width: 3px;
border-style:solid;
border-radius: 10px;
}
.left p{
font-size: 30px;
color: #000;
margin-left: 10px;
}
#grade {
font-size: 30px;
color: #000;
}
/*響應式布局*/
@media screen and (min-width: 1200px) {
.left {
width: 200px;
height:100px;
left: -350px;
top : 0;
}
}
@media screen and (max-width: 1200px) {
.left {
width: 300px;
height: 100px;
top: -230px;
left: 0;
}
.main {
margin-top: 250px;
}
}
.main {
width: 380px;
height: 530px;
border-width: 1px;
border-style:solid;
border-color:#1DA4FF;
padding: 10px;
position: relative;
overflow: hidden;
}
.grade-div {
position: absolute;
left: 200px;
}
.row {
width: 100%;
height: 130px;
overflow: hidden;
position: absolute;
}
#row01 {
top: -120px;
}
#row02 {
top: 10px;
}
#row03 {
top: 140px;
}
#row04 {
top: 270px;
}
#row05 {
top: 400px;
}
.grid-default {
width: 90px;
height: 100%;
border: 1px solid #ccc;
background-color: #fff;
margin: 2px;
float: left;
}
.row div:hover {
/*--邊框陰影--*/
box-shadow: 0 0 7px 2px #0cc;
}
#row-flag {
width: 100%;
height: 10px;
background: red;
top: 540px;
left: 0;
}
</style>
</head>
<body>
<div class="heading">
<h2>别踩白塊</h2>
<span id="play" class="btns">開始遊戲</span>
<span id="pause" class="btns">暫停遊戲</span>
<span id="stop" class="btns">停止遊戲</span>
</div>
<div class="container">
<div class="left">
<p>分數: <span id="grade">0</span></p>
</div>
<div class="main" id="mainID">
<div id="row01" class="row">
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
</div>
<div id="row02" class="row">
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
</div>
<div id="row03" class="row">
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
</div>
<div id="row04" class="row">
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
</div>
<div id="row05" class="row">
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
<div class="grid-default"></div>
</div>
<div id="row-flag" class="row"></div>
</div>
</div>
</body>
</html>
下面為script檔案
var BTN_PLAY_ID = 'play';
var BTN_PAUSE_ID = 'pause';
var BTN_STOP_ID = 'stop';
var MAIN_ID = 'mainID';
var GRADE = 'grade';
var main, allRow, grade, stopFlag = false;
window.onload = function() {
main = document.getElementById(MAIN_ID); //黑白格的容器
allRow = getAllRow(); //每一行黑白格
grade = document.getElementById(GRADE); //目前分數
//開始遊戲(點選)
var play = document.getElementById(BTN_PLAY_ID);
play.onclick = startGame;
//暫停遊戲(點選)
var pause = document.getElementById(BTN_PAUSE_ID);
pause.onclick = pauseGame;
//停止遊戲(點選)
var stop = document.getElementById(BTN_STOP_ID);
stop.onclick = stopGame;
//按鍵控制
document.onkeyup = function(event) {
keyPlay(event);
};
//滑鼠控制
mousePlay();
};
//得到每一行黑白格
function getAllRow() {
allRow = [];
var row01 = document.getElementById('row01');
var row02 = document.getElementById('row02');
var row03 = document.getElementById('row03');
var row04 = document.getElementById('row04');
var row05 = document.getElementById('row05');
//allRow[0] 到 allRow[4] ,從界面來看是從下往上的
allRow.push(row05);
allRow.push(row04);
allRow.push(row03);
allRow.push(row02);
allRow.push(row01);
initAllRowInfo();
return allRow;
}
//初始化allRow數組的資訊
function initAllRowInfo() {
for(var i = 0; i < allRow.length; i++) {
//辨別每一行是否有黑格,還有黑格的位置
allRow[i].hasBlackGrid = false;
allRow[i].blackGridPos = -1;
//把現有的黑格變成白格
var row = allRow[i].getElementsByTagName('div');
for(var j = 0; j < row.length; j++) {
row[j].style.background = '#fff';
row[j].rowPos = i; //表示在allRow的哪一位置
row[j].colPos = j; //表示在該行中的哪個位置
}
}
}
//點選開始遊戲
function startGame() {
stopFlag = false;
main.style.borderTop = 'none';
main.style.borderBottom = 'none';
initialGame();
}
//初始化遊戲,包括黑白格
function initialGame() {
//移動黑白格
rowMove(5,15);
}
var timer;
//移動黑白格(lSpeed表示位移速度(定時器每觸發黑白格移動的像素),tSpeed表示時間速度(定時器隔多久觸發)
function rowMove(lSpeed, tSpeed) {
clearInterval(timer);
//讓每一行黑白格進行定時移動
var n = 1; //用于延遲 黑格的加入
var hasBlack = false; //遊戲中還沒有黑格
timer = setInterval(function() {
var flag = false; //辨別該行是否已從上往下移出了容器,如果是,則對allRow中的順序進行調整
for(var i = 0; i < allRow.length; i++) {
var obj = allRow[i];
isGameOver(obj); //判斷遊戲是否結束
if(obj.offsetTop >= 530) {
flag = true; //有行移出了容器,那麼該行一定是allRow[0]
obj.style.top = -120 + 'px';
//将一行白格中的一個變為黑格
//延遲時間已到 并且 該行木有黑格
if(n > 50 && !obj.hasBlackGrid) {
//随機一行中第幾個白格變成黑格
var k = Math.floor(Math.random() * 4);
obj.getElementsByTagName('div')[k].style.background = '#000';
obj.hasBlackGrid = true;
obj.blackGridPos = k;
//遊戲中有黑格了
hasBlack = true;
}
}
obj.style.top = obj.offsetTop + lSpeed + 'px';
}
if(!hasBlack) {
n++;
}
//對移出該容器的行在allRow中的順序進行調整,移出容器的行移動到allRow的尾部
if(flag) {
var tempRow01 = allRow[0];
allRow.shift(); //删除數組的第一個元素
allRow.push(tempRow01); //将原來位置第一的元素加入到數組的尾部
}
}, tSpeed);
}
//暫停遊戲
function pauseGame() {
clearInterval(timer);
stopFlag = true;
}
//停止遊戲
function stopGame() {
//初始化分數
grade.innerHTML = '0';
//停止移動
clearInterval(timer);
stopFlag = true;
main.style.borderTop = '1px solid darkturquoise';
main.style.borderBottom = '1px solid darkturquoise';
//每一行的位置初始化
allRow[0].style.top = 400 + 'px';
allRow[1].style.top = 270 + 'px';
allRow[2].style.top = 140 + 'px';
allRow[3].style.top = 10 + 'px';
allRow[4].style.top = -120 + 'px';
initAllRowInfo();
}
//當踩到黑格時,黑格顔色發生“正确”變化(通知使用者)
// blackRowPos 黑格所在的行在allRow中的位置; blackGridPos 黑格在該行中的位置
function rightChange(blackRowPos, blackGridPos) {
//修改标志
allRow[blackRowPos].hasBlackGrid = false;
allRow[blackRowPos].blackGridPos = -1;
grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';
var grid = allRow[blackRowPos].getElementsByTagName('div')[blackGridPos];
grid.style.background = 'green';
setTimeout(function() {
grid.style.background = '#fff';
}, 50);
}
//滑鼠控制
function mousePlay() {
for(var i = 0; i < allRow.length; i++) {
var row = allRow[i].getElementsByTagName('div');
for(var j = 0; j < row.length; j++) {
row[j].onclick = function() {
var _this = this;
if(_this.style.background == 'rgb(0, 0, 0)') {
var tt = _this.parentNode;
//修改 這一行的 标記——沒有黑格了
tt.hasBlackGrid = false;
tt.blackGridPos = -1;
//修改分數
grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';
_this.style.background = 'green';
setTimeout(function() {
_this.style.background = '#fff';
}, 50);
} else if(_this.style.background == 'rgb(255, 255, 255)') {
gameOver(_this);
}
};
}
}
}
//判斷遊戲是否結束
function isGameOver(obj) {
var temp1 = obj.offsetTop + obj.offsetHeight;
var temp2 = main.offsetTop + main.offsetHeight - 20;
if(temp1 > temp2) {
if(obj.hasBlackGrid) {
obj.hasBlackGrid = false;
var index = obj.blackGridPos;
obj.blackGridPos = -1;
gameOver(obj.getElementsByTagName('div')[index]);
}
}
}
//遊戲結束
function gameOver(errorGrid) {
errorGrid.style.background = 'red';
setTimeout(function() {
errorGrid.style.background = '#fff';
setTimeout(function() {
errorGrid.style.background = 'red';
alert('遊戲結束,您最後的得分是:' + grade.innerHTML + '!');
stopGame();
}, 100);
}, 100);
if(bgMusic.play) {
bgMusic.pause();
}
}
function getClass(parent, className) {
var p = document.getElementById(parent);
var tt = p.getElementsByTagName('*');
var arr = [];
for(var i = 0; i < tt.length; i++) {
if(tt[i].className == className) {
arr.push(tt[i]);
}
}
return arr;
}