js+jq面向對象程式設計-别踩白塊兒。
一個非常簡單的小遊戲。點選黑色會變成白色，,點選白色或者碰到大盒子下邊框遊戲結束。
排版比較簡單，js代碼也非常好了解,而且不到100行，使用的方法也非常簡單。
首先是css部分
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 408px;
height: 608px;
border: 1px solid #ccc;
margin: auto;
overflow: hidden;
position: relative;
}
.row {
position: absolute;
top: -150px;
left: 0;
}
.row div {
float: left;
width: 100px;
height: 150px;
border: 1px solid #ccc;
}
.row .black {
background: black;
background-size: 100% 100%;
}
.white {
background: #fff;
background-size: 100% 100%;
}
.tits {
text-align: center;
position: fixed;
top: 680px;
left: 50%;
transform: translate(-50%, -50%);
}
.tits p {
height: 50px;
line-height: 50px;
font-size: 33px;
color: red
}
#gameOver {
width: 408px;
height: 608px;
background: #fff;
position: fixed;
top: 305px;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
color: red;
display: none;
border: 1px solid #ccc
}
#gameOver h1 {
margin-top: 200px;
}
</style>
然後是html部分
<body>
<div id="app">
<!-- 遊戲區域 -->
</div>
<div id="gameOver">
<h1>遊戲結束</h1>
<br>
<p>下次繼續努力吧</p>
</div>
<div class="tits">
<p>别踩白塊兒</p>
目前分數為<span id='score'>0</span>分
</div>
</body>
最後是js部分
js部分需要引入jq架構
<script src="./jquery-1.12.4.min.js"></script>
添加方塊
首先往對象中添加方塊。
定義一個數組，用來存放class名，并且預設全部顯示為白色，寫一個随機數，随機其中一個為黑色。
并且把他們周遊放進class為row的div裡面，最後顯示在頁面中。
設定計時器，算出每次添加的時間。每次添加的時間 = 每次移動的時間 ✖ 盒子的高度 ➗ 定義好的速度
var game = {
speed: 5, //定義速度
}
// 連續添加
addRows() {
time = (20 * 150) / game.speed
addRows = setInterval(() => {
// 加載4個白色，随機一個為黑色
load = ['white', 'white', 'white', 'white']
BlackPosition = Math.floor(Math.random() * 4)
load[BlackPosition] = 'black'
var str = ''
for (var i = 0; i < load.length; i++) {
str += ` <div class='${load[i]}' ></div>`
}
app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`
game.list++
}, time)
},
方塊移動
周遊所有的行（.row），通過改變它的top值， 來實作移動。
當超出大盒子，就清除了這一行。
周遊所有的黑色方塊，放黑色方塊碰到盒子底部，遊戲結束，并且清除所有的計數器。
// 移動
rowMove() {
rowMoves = setInterval(function () {
// 周遊所有行 并且移動
$.each($('.row'), (v, i) => {
$(i).css('top', i.offsetTop + game.speed)
// 當超出距離就删除這一行
if ($(i).offset().top > $('#app').height()) {
$(i).remove()
}
})
// 周遊黑色塊 當超出距離就清除計時器
$.each($('.black'), (v, i) => {
if ($(i).offset().top >= 458) {
clearInterval(rowMoves)
clearInterval(addRows)
$('#app').hide()
$('#gameOver').show()
}
})
}, 20)
},
點選消除黑色塊
給一個滑鼠擡起事件,并且加上事件代理t = e.target || window.event 相容ie。
當點選的class名字為white 遊戲結束，清除所有的計時器。
當點選的為黑色塊時，并且是目前行,就讓這個色塊變為白色。定義的nowLstClick++ 。
nowLstClick判斷是不是目前行，如果是就可以點選，否則不允許點選。
判斷原理就是給每行都設定一個name屬性，目前可點選的列的值等于name屬性，就是目前行，可以消除黑色塊，否則不允許。
// 點選消除黑塊
removeBlack() {
$(window).mouseup(function (e) {
e = e || e.srcElement
t = e.target || window.event //事件代理
// 當點選為白色遊戲結束
if (t.className == 'white') {
clearInterval(rowMoves)
clearInterval(addRows)
$('#app').hide()
$('#gameOver').show()
}
if (
//判斷當點選的為黑塊，并且目前為可點選狀态 消除黑塊
t.className == 'black' &&
$(t).parent().attr('name') == game.nowLstClick
) {
$(t).attr('class', 'white')
game.nowLstClick++
// 顯示分數
$('#score').html(game.nowLstClick)
}
})
},
完整js代碼
$(function () {
game.init('app')
})
var game = {
speed: 5, //定義速度
list: 0, //一共多少列
nowLstClick: 0,
init() {
this.addRows()
this.rowMove()
this.removeBlack()
},
// 連續添加
addRows() {
time = (20 * 150) / game.speed
addRows = setInterval(() => {
// 加載4個白色，随機一個為黑色
load = ['white', 'white', 'white', 'white']
BlackPosition = Math.floor(Math.random() * 4)
load[BlackPosition] = 'black'
var str = ''
for (var i = 0; i < load.length; i++) {
str += ` <div class='${load[i]}' ></div>`
}
app.innerHTML += `<div class='row' name='${game.list}'>${str}</div>`
game.list++
}, time)
},
// 移動
rowMove() {
rowMoves = setInterval(function () {
// 周遊所有行 并且移動
$.each($('.row'), (v, i) => {
$(i).css('top', i.offsetTop + game.speed)
// 當超出距離就删除這一行
if ($(i).offset().top > $('#app').height()) {
$(i).remove()
}
})
// 周遊黑色塊 當超出距離就清除計時器
$.each($('.black'), (v, i) => {
if ($(i).offset().top >= 458) {
clearInterval(rowMoves)
clearInterval(addRows)
$('#app').hide()
$('#gameOver').show()
}
})
}, 20)
},
// 點選消除黑塊
removeBlack() {
$(window).mouseup(function (e) {
t = e.target || window.event //事件代理
// 當點選為白色遊戲結束
if (t.className == 'white') {
clearInterval(rowMoves)
clearInterval(addRows)
$('#app').hide()
$('#gameOver').show()
}
if (
//判斷當點選的為黑塊，并且目前為可點選狀态 消除黑塊
t.className == 'black' &&
$(t).parent().attr('name') == game.nowLstClick
) {
$(t).attr('class', 'white')
game.nowLstClick++
// 顯示分數
$('#score').html(game.nowLstClick)
}
})
},
}
總體實作非常簡單，隻封裝了3個方法，如果對您有幫助，就請伸出您的貴手點個贊吧！！！祝您2021好運連連，桃花泛濫，天天無bug！