HTML+JS實現(xiàn)經(jīng)典推箱子游戲
1. 效果展示
2. 游戲介紹
經(jīng)典的推箱子是一個非常古老游戲,甚至是80,90年代的回憶,目的是在訓練你的邏輯思考能力。
在一個狹小的倉庫中,要求把木箱放到指定的位置,稍不小心就會出現(xiàn)箱子無法移動或者通道被堵住的情況,所以需要巧妙的利用有限的空間和通道,合理安排移動的次序和位置,才能順利的完成任務。
在移動箱子的過程中,是對你的思維能力的一個訓練,今天這款推箱子正是童年的回憶,但是我們的目的是為了通過學習源碼的形式,來學習前端開發(fā)的知識,熟練掌握HtML標簽,CSS屬性和JS邏輯的知識。
3. 游戲規(guī)則
我們的目標是把箱子移動到指定的地點,該地點標注為空,當我們順利的把箱子移動的指定的位置時,標注為滿。請你盡量不要把箱子推動到角落,那樣,你將無法移動它。例如:
我們可以選擇不同的關卡進行闖關,大家在學習的過程中也可以添加不同的關卡,這樣達到熟練掌握常用標簽和屬性的目的。例如:
4. 源碼學習
部分HTML代碼:
<div class="menu" onclick="newgame()">開始新游戲</div> <div class="menu" onclick="continuegame()">繼續(xù)游戲</div> <div class="menu" onclick="select()">選關</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)>下一關</div> <div class="win" onclick=returnselect()>選擇關卡</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)典推箱子游戲的詳細內(nèi)容,更多關于JS推箱子游戲的資料請關注腳本之家其它相關文章!
相關文章
利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果
這篇文章主要介紹了利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果的相關資料,需要的朋友可以參考下2016-12-12JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽文本框回車事件并過濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04