js网页版推箱子
时间: 2023-08-05 11:02:43 浏览: 53
推箱子是一种非常有趣的益智游戏,下面是一个简单的 JavaScript 实现的网页版推箱子游戏的代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子游戏</title>
<style>
body{background-color: #eee;}
#game{margin: 0 auto;width: 500px;}
#game .row{clear: both;}
#game .box{float: left;width: 50px;height: 50px;background-color: #fff;border: 1px solid #ccc;text-align: center;line-height: 50px;font-size: 30px;}
#game .wall{background-color: #333;}
#game .target{background-color: #0c0;}
#game .player{background-color: #f00;}
#game .box{background-color: #ff0;}
</style>
</head>
<body>
<div id="game"></div>
<script src="game.js"></script>
</body>
</html>
```
JavaScript 代码:
```
var gameMap = [
[2,2,2,2,2,2,2,2,2,2],
[2,0,0,0,0,2,0,0,0,2],
[2,0,0,0,0,2,0,0,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,0,1,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,2],
[2,2,2,2,2,2,2,2,2,2]
];
var game = document.getElementById("game");
for(var i=0;i<gameMap.length;i++){
var row = document.createElement("div");
row.className = "row";
for(var j=0;j<gameMap[i].length;j++){
var box = document.createElement("div");
box.className = "box";
if(gameMap[i][j] == 2){
box.className += " wall";
}else if(gameMap[i][j] == 1){
box.className += " player";
}else if(gameMap[i][j] == 3){
box.className += " target";
}else if(gameMap[i][j] == 4){
box.className += " box";
}
row.appendChild(box);
}
game.appendChild(row);
}
var playerPos = {x:4, y:1};
document.onkeydown = function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 38){ // 上
move(0,-1);
}else if(e && e.keyCode == 40){ // 下
move(0,1);
}else if(e && e.keyCode == 37){ // 左
move(-1,0);
}else if(e && e.keyCode == 39){ // 右
move(1,0);
}
}
function move(x,y){
var nextPos = {x:playerPos.x+x, y:playerPos.y+y};
if(gameMap[nextPos.y][nextPos.x] == 0 || gameMap[nextPos.y][nextPos.x] == 3){
gameMap[playerPos.y][playerPos.x] = 0;
gameMap[nextPos.y][nextPos.x] = 1;
render();
playerPos = nextPos;
}else if(gameMap[nextPos.y][nextPos.x] == 4){
var nextBoxPos = {x:nextPos.x+x, y:nextPos.y+y};
if(gameMap[nextBoxPos.y][nextBoxPos.x] == 0 || gameMap[nextBoxPos.y][nextBoxPos.x] == 3){
gameMap[playerPos.y][playerPos.x] = 0;
gameMap[nextPos.y][nextPos.x] = 1;
gameMap[nextBoxPos.y][nextBoxPos.x] = 4;
render();
playerPos = nextPos;
}
}
}
function render(){
for(var i=0;i<gameMap.length;i++){
for(var j=0;j<gameMap[i].length;j++){
var box = game.childNodes[i].childNodes[j];
box.className = "box";
if(gameMap[i][j] == 2){
box.className += " wall";
}else if(gameMap[i][j] == 1){
box.className += " player";
}else if(gameMap[i][j] == 3){
box.className += " target";
}else if(gameMap[i][j] == 4){
box.className += " box";
}
}
}
}
```
这个游戏使用了一个二维数组来表示游戏地图,其中数字 0 表示空地,数字 1 表示玩家,数字 2 表示墙,数字 3 表示目标,数字 4 表示箱子。游戏中通过键盘控制玩家移动,当玩家推到所有箱子都放到目标位置时,游戏胜利。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)