HTML+JS實現(xiàn)經(jīng)典推箱子游戲
更新時間：2022年11月10日 09:13:50 作者：橙子!
今天，這篇文章將利用HTML，CSS，JS的知識編寫一個童年經(jīng)典游戲?-?推箱子，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
1. 效果展示
2. 游戲介紹
經(jīng)典的推箱子是一個非常古老游戲，甚至是80，90年代的回憶，目的是在訓(xùn)練你的邏輯思考能力。
在一個狹小的倉庫中，要求把木箱放到指定的位置，稍不小心就會出現(xiàn)箱子無法移動或者通道被堵住的情況，所以需要巧妙的利用有限的空間和通道，合理安排移動的次序和位置，才能順利的完成任務(wù)。
在移動箱子的過程中，是對你的思維能力的一個訓(xùn)練，今天這款推箱子正是童年的回憶，但是我們的目的是為了通過學(xué)習(xí)源碼的形式，來學(xué)習(xí)前端開發(fā)的知識，熟練掌握HtML標(biāo)簽，CSS屬性和JS邏輯的知識。
3. 游戲規(guī)則
我們的目標(biāo)是把箱子移動到指定的地點，該地點標(biāo)注為空，當(dāng)我們順利的把箱子移動的指定的位置時，標(biāo)注為滿。請你盡量不要把箱子推動到角落，那樣，你將無法移動它。例如：
我們可以選擇不同的關(guān)卡進(jìn)行闖關(guān)，大家在學(xué)習(xí)的過程中也可以添加不同的關(guān)卡，這樣達(dá)到熟練掌握常用標(biāo)簽和屬性的目的。例如：
4. 源碼學(xué)習(xí)
部分HTML代碼：
<div class="menu" onclick="newgame()">開始新游戲</div>
<div class="menu" onclick="continuegame()">繼續(xù)游戲</div>
<div class="menu" onclick="select()">選關(guān)</div>
<div class="menu" onclick="closewindow()">退出游戲</div>
<table id="g">
<tr>
<td>
<div class="choice" onclick=start(0)>1</div>
</td>
<td>
<div class="choice" onclick=start(1)>2</div>
</td>
<td>
<div class="choice" onclick=start(2)>3</div>
</td>
</tr>
</table>
<div class="win" id="notlast" onclick=next(progress)>下一關(guān)</div>
<div class="win" onclick=returnselect()>選擇關(guān)卡</div>
<div class="win" onclick=back()>返回</div>
<div class="side" id="side1" onclick=continuegame()>重試</div>
<div class="side" id="side2" onclick=leave()>返回</div>
部分樣式代碼：
<style>
* {
margin: 0;
padding: 0;
}
body {
background-image: url(./pic.jpg);
background-size: 100%;
color: whitesmoke;
text-align: center;
}
h1 {
font:normal bold 100px 楷體;
-webkit-font-smoothing: antialiased;
padding:50px;
}
table,
.menu,
.choice,
.win {
margin: 0 auto;
}
div {
width: 180px;
}
td div {
width: 75px;
height: 75px;
margin: 5px;
border-radius: 5px;
font-size: 60px;
line-height: 75px;
display: none;
}
.menu,
.win {
position: relative;
background-color: #6781e0;
width: 360px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
}
.side {
position: relative;
background-color: #6781e0;
width: 240px;
height: 80px;
margin-bottom: 40px;
line-height: 74px;
font-size: 50px;
font-family: "WDKT";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
}
.choice {
background-color: #6781e0;
width: 80px;
height: 80px;
margin: 10px;
line-height: 74px;
font-size: 60px;
font-family: "包圖小白體";
box-shadow:
1px 1px 0px #5d77dd,
2px 2px 0px #5f79de,
3px 3px 0px #617bdf,
4px 4px 0px #637de0;
border-radius: 5px;
}
.menu:hover {
transform: translateX(1px) translateY(3px);
}
.choice:hover {
transform: translateX(1px) translateY(3px);
}
.win:hover {
transform: translateX(1px) translateY(3px);
}
.side:hover {
transform: translateX(1px) translateY(3px);
}
#g {
margin-left: 400px;
display: none;
}
.win,
.side {
display: none;
}
#side1 {
position: absolute;
right: 150px;
top: 200px;
}
#side2 {
position: absolute;
right: 150px;
top: 600px;
}
</style>
部分邏輯代碼：
function up() {
if (copy[py - 1][px] == 0 || copy[py - 1][px] == 3) {
if (copy[py][px] == 4) {
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
}
else if (copy[py][px] == 6) {
document.getElementById(names[py][px]).innerHTML = "??";
copy[py][px] = 3;
}
if (copy[py - 1][px] == 3) {
document.getElementById(names[py - 1][px]).innerHTML = "??";
copy[py - 1][px] = 6;
}
else if (copy[py - 1][px] == 0) {
document.getElementById(names[py - 1][px]).innerHTML = "??";
copy[py - 1][px] = 4;
}
py--;
}
else if ((copy[py - 1][px] == 2 || copy[py - 1][px] == 5) && (copy[py - 2][px] == 0 || copy[py - 2][px] == 3)) {
if (copy[py][px] == 4) {
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
}
else if (copy[py][px] == 6) {
document.getElementById(names[py][px]).innerHTML = "??";
copy[py][px] = 3;
}
if (copy[py - 1][px] == 2) {
document.getElementById(names[py - 1][px]).innerHTML = "??";
copy[py - 1][px] = 4;
}
else if (copy[py - 1][px] == 5) {
document.getElementById(names[py - 1][px]).innerHTML = "??";
copy[py - 1][px] = 6;
}
if (copy[py - 2][px] == 0) {
document.getElementById(names[py - 2][px]).innerHTML = "??";
copy[py - 2][px] = 2;
}
else if (copy[py - 2][px] == 3) {
document.getElementById(names[py - 2][px]).innerHTML = "??";
copy[py - 2][px] = 5;
}
py--;
}
}
function down() {
if (copy[py + 1][px] == 0 || copy[py + 1][px] == 3) {
if (copy[py][px] == 4) {
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
}
else if (copy[py][px] == 6) {
document.getElementById(names[py][px]).innerHTML = "??";
copy[py][px] = 3;
}
if (copy[py + 1][px] == 3) {
document.getElementById(names[py + 1][px]).innerHTML = "??";
copy[py + 1][px] = 6;
}
else if (copy[py + 1][px] == 0) {
document.getElementById(names[py + 1][px]).innerHTML = "??";
copy[py + 1][px] = 4;
}
py++;
}
else if ((copy[py + 1][px] == 2 || copy[py + 1][px] == 5) && (copy[py + 2][px] == 0 || copy[py + 2][px] == 3)) {
if (copy[py][px] == 4) {
document.getElementById(names[py][px]).innerHTML = "";
copy[py][px] = 0;
}
else if (copy[py][px] == 6) {
document.getElementById(names[py][px]).innerHTML = "??";
copy[py][px] = 3;
}
if (copy[py + 1][px] == 2) {
document.getElementById(names[py + 1][px]).innerHTML = "??";
copy[py + 1][px] = 4;
}
else if (copy[py + 1][px] == 5) {
document.getElementById(names[py + 1][px]).innerHTML = "??";
copy[py + 1][px] = 6;
}
if (copy[py + 2][px] == 0) {
document.getElementById(names[py + 2][px]).innerHTML = "??";
copy[py + 2][px] = 2;
}
else if (copy[py + 2][px] == 3) {
document.getElementById(names[py + 2][px]).innerHTML = "??";
copy[py + 2][px] = 5;
}
py++;
}
}
以上就是HTML+JS實現(xiàn)經(jīng)典推箱子游戲的詳細(xì)內(nèi)容，更多關(guān)于JS推箱子游戲的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
有一個表格，然后有4個輸入框，一個合并按鈕，輸入框是這樣的，從第幾行到第幾行，從第幾列到第幾列，然后點擊按鈕，合并2013-11-11
這篇文章主要介紹了通過實例解析javascript Date對象屬性及方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ)
這篇文章主要介紹了《JavaScript DOM 編程藝術(shù)》讀書筆記之DOM基礎(chǔ),需要的朋友可以參考下2015-01-01
這篇文章主要介紹了JavaScript返回上一頁的三種方法及區(qū)別介紹,本文直接給出示例代碼,需要的朋友可以參考下2015-07-07
跟我學(xué)習(xí)javascript的this關(guān)鍵字
跟我學(xué)習(xí)javascript的this關(guān)鍵字，this是動態(tài)綁定，或稱為運行期綁定的，這就導(dǎo)致 JavaScript中的this關(guān)鍵字有能力具備多重含義，帶來靈活性的同時，也為初學(xué)者帶來不少困惑2015-11-11
JavaScript是一門多范式的編程語言，其中函數(shù)式編程成為了一種受歡迎的范式之一，本文將帶您深入了解JavaScript函數(shù)式編程的核心概念和技術(shù)，需要的可以參考一下2023-06-06
這篇文章主要介紹了微信外喚起微信小程序的方法,結(jié)合實例形式詳細(xì)分析了微信外喚起微信小程序的相關(guān)步驟、原理與操作注意事項,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了PWA介紹及快速上手搭建一個PWA應(yīng)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)加載圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序開發(fā)越來越多樣化,各種豐富的設(shè)計及體驗,自定義tabBar也經(jīng)常使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何自定義tabBar的相關(guān)資料,需要的朋友可以參考下2021-08-08