用JavaScript写一个推箱子游戏
时间: 2023-07-01 14:05:23 浏览: 46
好的,以下是一个简单的推箱子游戏的 JavaScript 代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>推箱子游戏</title>
<style>
.box {
display: inline-block;
width: 50px;
height: 50px;
background-color: brown;
margin: 1px;
}
.player {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
margin: 1px;
}
.target {
display: inline-block;
width: 50px;
height: 50px;
background-color: yellow;
margin: 1px;
}
.wall {
display: inline-block;
width: 50px;
height: 50px;
background-color: gray;
margin: 1px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 256px;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="game.js"></script>
</body>
</html>
```
JavaScript:
```javascript
const level = [
"##########",
"# #",
"# $ #",
"# #### #",
"# #.# #",
"# #.# #",
"# #.# #",
"# @ #",
"# #",
"##########"
];
let playerPos;
let boxesPos;
let targetsPos;
const container = document.querySelector(".container");
function init() {
playerPos = { x: null, y: null };
boxesPos = [];
targetsPos = [];
container.innerHTML = "";
for (let i = 0; i < level.length; i++) {
const row = level[i];
const divRow = document.createElement("div");
divRow.classList.add("row");
for (let j = 0; j < row.length; j++) {
const cell = row[j];
const divCell = document.createElement("div");
switch (cell) {
case "#":
divCell.classList.add("wall");
break;
case "$":
divCell.classList.add("box");
boxesPos.push({ x: i, y: j });
break;
case "@":
divCell.classList.add("player");
playerPos.x = i;
playerPos.y = j;
break;
case ".":
divCell.classList.add("target");
targetsPos.push({ x: i, y: j });
break;
default:
divCell.classList.add("empty");
break;
}
divRow.appendChild(divCell);
}
container.appendChild(divRow);
}
}
function moveBox(box, direction) {
const newPos = { x: box.x + direction.x, y: box.y + direction.y };
if (level[newPos.x][newPos.y] !== "#" && !boxesPos.some(b => b.x == newPos.x && b.y == newPos.y)) {
box.x = newPos.x;
box.y = newPos.y;
return true;
}
return false;
}
function movePlayer(direction) {
const newPos = { x: playerPos.x + direction.x, y: playerPos.y + direction.y };
const box = boxesPos.find(b => b.x == newPos.x && b.y == newPos.y);
if (level[newPos.x][newPos.y] !== "#" && (!box || moveBox(box, direction))) {
playerPos.x = newPos.x;
playerPos.y = newPos.y;
render();
}
}
function render() {
const rows = container.querySelectorAll(".row");
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
for (let j = 0; j < row.children.length; j++) {
const cell = row.children[j];
cell.classList.remove("player", "box", "target");
if (playerPos.x == i && playerPos.y == j) {
cell.classList.add("player");
} else {
const box = boxesPos.find(b => b.x == i && b.y == j);
if (box) {
const target = targetsPos.find(t => t.x == box.x && t.y == box.y);
if (target) {
cell.classList.add("target");
} else {
cell.classList.add("box");
}
}
}
}
}
if (boxesPos.every(b => targetsPos.some(t => t.x == b.x && t.y == b.y))) {
alert("You win!");
init();
}
}
document.addEventListener("keydown", e => {
switch (e.keyCode) {
case 37: // left
movePlayer({ x: 0, y: -1 });
break;
case 38: // up
movePlayer({ x: -1, y: 0 });
break;
case 39: // right
movePlayer({ x: 0, y: 1 });
break;
case 40: // down
movePlayer({ x: 1, y: 0 });
break;
}
});
init();
```
通过上述代码,你可以通过键盘控制玩家的移动,推动箱子到目标点,完成推箱子游戏。