推箱子游戲的 邏輯非常簡單，但是如果不動手的話，還是不太清楚。我在這里講一下自己的思路。
制作推箱子，首先要有自己的設計素材。如下我也是網上找的素材
第二步，理清游戲的規則。
游戲規則：
1.小人將箱子分別推到球上，等每個箱子都覆蓋到球上，則完成游戲。
2.小人不能推樹，不能推兩個箱子一起
3.小人可以踩球
第三步，簡單的理清游戲規則后，就開始選用技術。首先肯定是JavaScript，然后選用canvas。
最后，我們開始制作游戲。
制作游戲其實 也是一步步來。做事不能太急。要分成階段性來完成，就很方便。
具體代碼如下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <canvas id="canvas" width="560" height="560"> can't see this </canvas> <div id="msg"></div> <img id="block" src="./img/block.gif" alt="" style="display:none;"> <img id="wall" src="./img/wall.png" alt="" style="display:none;"> <img id="box" src="./img/box.png" alt="" style="display:none;"> <img id="down" src="./img/down.png" alt="" style="display:none;"> <img id="left" src="./img/left.png" alt="" style="display:none;"> <img id="right" src="./img/right.png" alt="" style="display:none;"> <img id="up" src="./img/up.png" alt="" style="display:none;"> <img id="ball" src="./img/ball.png" alt="" style="display:none;"> <p id="msg"></p> <input type="button" value="上一關" onclick="level(-1)"> <input type="button" value="重玩" onclick="level(0)"> <input type="button" value="下一關" onclick="level(1)"> <script src="./js/map.js"></script> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var dWidth = 35, dHeight = 35; var iCurLevel = 0; //當前關卡+1 var steps = 0; // 移動步數 var currenMap = [], userMap = []; var msg = document.getElementById('msg'); var block = document.getElementById('block'); var wall = document.getElementById('wall'); var box = document.getElementById('box'); var down = document.getElementById('down'); var left = document.getElementById('left'); var right = document.getElementById('right'); var up = document.getElementById('up'); var ball = document.getElementById('ball'); var curMan = down; //小人面向 // 復制二維數組 function copyArray(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { newArr[i] = arr[i].concat(); } return newArr; } // 初始化 function init() { currenMap = copyArray(levels[iCurLevel]) // 當前原樣地圖 userMap = copyArray(levels[iCurLevel]) // 當前使用地圖 steps = 0; // 初始化步數 curMan = down; // 初始化小人面朝下 msg.innerHTML = "當前第：" + (iCurLevel + 1) + "關，移動步數：" + steps; drawBlock() // 畫草地 drawMap(currenMap) // 畫關卡地圖 } // 畫草地 function drawBlock() { for (var i = 0; i < 16; i++) { for (var j = 0; j < 16; j++) { ctx.drawImage(block, i * dWidth, j * dHeight, dWidth, dHeight); } } } // 畫小人位置 function Point(x, y) { this.x = x; this.y = y; } var per_position = new Point(5, 5); // 畫關卡地圖 function drawMap(level) { for (var i = 0; i < level.length; i++) { for (var j = 0; j < level[i].length; j++) { var pic = block; switch (level[i][j]) { case 0: pic = block; break; case 1: pic = wall; break; case 2: pic = ball; break; case 3: pic = box; break; case 4: pic = curMan; per_position.x = i; per_position.y = j; break; case 5: pic = box; break; } ctx.drawImage(pic, j * dWidth - (pic.width - dWidth) / 2, i * dHeight - (pic.height - dHeight), pic.width, pic.height); } } } // 切換關卡 function level(next) { iCurLevel += next if (iCurLevel < 0) { alert('當前第一關'); return; } if (iCurLevel > levels.length - 1) { alert('當前最后一關'); return; } init(); } // 綁定鍵盤 up down left right document.onkeydown = function curManUp(event) { var keyCode = event.keyCode; var p1 = { x: 0, y: 0 } var p2 = { x: 0, y: 0 } switch (keyCode) { case 38: curMan = up; p1.x = per_position.x - 1; p1.y = per_position.y; p2.x = per_position.x - 2; p2.y = per_position.y; break; case 39: curMan = right; p1.x = per_position.x; p1.y = per_position.y + 1; p2.x = per_position.x; p2.y = per_position.y + 2; break; case 40: curMan = down; p1.x = per_position.x + 1; p1.y = per_position.y; p2.x = per_position.x + 2; p2.y = per_position.y; break; case 37: curMan = left; p1.x = per_position.x; p1.y = per_position.y - 1; p2.x = per_position.x; p2.y = per_position.y - 2; break; } // 牆1，盒子3和牆1，盒子3和盒子3，盒子3和陷阱5,陷阱5和盒子3，陷阱5和牆1 都不能移動！ if (userMap[p1.x][p1.y] == 1) { return false; } if (userMap[p1.x][p1.y] == 3 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) { return false; } if (userMap[p1.x][p1.y] == 5 && (userMap[p2.x][p2.y] == 1 || userMap[p2.x][p2.y] == 3 || userMap[p2.x][p2.y] == 5)) { return false; } // 草地0 可以移動 if (userMap[p1.x][p1.y] == 0) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; } // 盒子和草地 可以移動 if (userMap[p1.x][p1.y] == 3 && userMap[p2.x][p2.y] == 0) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; userMap[p2.x][p2.y] = 3 } // 盒子和球 可以移動 if (userMap[p1.x][p1.y] == 3 && userMap[p2.x][p2.y] == 2) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; userMap[p2.x][p2.y] = 5 } // 球2 可以移動 if (userMap[p1.x][p1.y] == 2) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; } // 陷阱5和草地 可以移動 if (userMap[p1.x][p1.y] == 5 && userMap[p2.x][p2.y] == 0) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; userMap[p2.x][p2.y] = 3 } // 陷阱5和球 可以移動 if (userMap[p1.x][p1.y] == 5 && userMap[p2.x][p2.y] == 2) { userMap[per_position.x][per_position.y] = 0; userMap[p1.x][p1.y] = 4; userMap[p2.x][p2.y] = 5 } // 當前小人位置 原先是球的話 if (currenMap[per_position.x][per_position.y] == 2 || currenMap[per_position.x][per_position.y] == 5) { userMap[per_position.x][per_position.y] = 2; } steps++; msg.innerHTML = "當前第：" + (iCurLevel + 1) + "關，移動步數：" + steps drawBlock(); drawMap(userMap); if (win()) { level(1); } } // 判斷是否結束 function win() { for (var i = 0; i < currenMap.length; i++) { for (var j = 0; j < currenMap[i].length; j++) { if (currenMap[i][j] == 2 && userMap[i][j] !== 5 || currenMap[i][j] == 5 && userMap[i][j] !== 5) { return false; } } } return true; } // 初始化 init() </script> </body> </html>
具體注釋 都很清楚了。希望大家能喜歡
oooO ↘┏━┓ ↙ Oooo ( 踩)→┃你┃ ←(死 ) \ ( →┃√┃ ← ) / \_)↗┗━┛ ↖(_/