推箱子游戏 - 在线玩，支持撤销和重玩

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>推箱子游戏</title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
#game-container {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-template-rows: repeat(5, 50px);
  gap: 1px;
}
.cell {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
</style>
</head>
<body>
<div id="game-container"></div>
<script>
const gridWidth = 5;
const gridHeight = 5;
let playerPosition = { x: 1, y: 1 };
let boxes = [{ x: 3, y: 3 }, { x: 2, y: 2 }]; // Added two boxes
let targets = [{ x: 4, y: 4 }, { x: 0, y: 1 }]; // Added two targets
let walls = [{ x: 0, y: 2 }, { x: 2, y: 0 }, { x: 4, y: 2 }, { x: 2, y: 4 }]; // Added walls
let gameHistory = []; // Added game history array
<p>function renderGame() {
const gameContainer = document.getElementById('game-container');
gameContainer.innerHTML = '';
for (let y = 0; y &lt; gridHeight; y++) {
for (let x = 0; x &lt; gridWidth; x++) {
const cell = document.createElement('div');
cell.className = 'cell';
if (x === playerPosition.x &amp;&amp; y === playerPosition.y) {
cell.textContent = '🧑';
} else if (boxes.some(box =&gt; box.x === x &amp;&amp; box.y === y)) {
cell.textContent = '📦';
} else if (targets.some(target =&gt; target.x === x &amp;&amp; target.y === y)) {
cell.textContent = '🎯';
} else if (walls.some(wall =&gt; wall.x === x &amp;&amp; wall.y === y)) {
cell.style.backgroundColor = '#999';
}
gameContainer.appendChild(cell);
}
}
}</p>
<p>function movePlayer(dx, dy) {
const newPosition = { x: playerPosition.x + dx, y: playerPosition.y + dy };
if (!isWall(newPosition) &amp;&amp; !isBox(newPosition)) {
playerPosition = newPosition;
} else if (isBox(newPosition)) {
const newBoxPosition = { x: newPosition.x + dx, y: newPosition.y + dy };
if (!isWall(newBoxPosition) &amp;&amp; !isBox(newBoxPosition)) {
const boxIndex = boxes.findIndex(box =&gt; box.x === newPosition.x &amp;&amp; box.y === newPosition.y);
boxes[boxIndex] = newBoxPosition;
playerPosition = newPosition;
}
}
gameHistory.push({ playerPosition: { ...playerPosition }, boxes: [...boxes] });
renderGame();
checkWin();
}</p>
<p>function isWall(position) {
return (
position.x &lt; 0 ||
position.x &gt;= gridWidth ||
position.y &lt; 0 ||
position.y &gt;= gridHeight ||
walls.some(wall =&gt; wall.x === position.x &amp;&amp; wall.y === position.y)
);
}</p>
<p>function isBox(position) {
return boxes.some(box =&gt; box.x === position.x &amp;&amp; box.y === position.y);
}</p>
<p>function checkWin() {
const hasWon = boxes.every(box =&gt; targets.some(target =&gt; target.x === box.x &amp;&amp; target.y === box.y));
if (hasWon) {
alert('恭喜你，胜利！');
}
}</p>
<p>document.addEventListener('keydown', event =&gt; {
switch (event.key) {
case 'ArrowUp':
case 'w':
movePlayer(0, -1);
break;
case 'ArrowDown':
case 's':
movePlayer(0, 1);
break;
case 'ArrowLeft':
case 'a':
movePlayer(-1, 0);
break;
case 'ArrowRight':
case 'd':
movePlayer(1, 0);
break;
case 'z': // Added undo functionality on 'z' key press
undoMove();
break;
case 'r': // Added reset functionality on 'r' key press
resetGame();
break;
}
});</p>
<p>function undoMove() {
if (gameHistory.length &gt; 0) {
const previousMove = gameHistory.pop();
playerPosition = previousMove.playerPosition;
boxes = previousMove.boxes;
renderGame();
}
}</p>
<p>function resetGame() {
playerPosition = { x: 1, y: 1 };
boxes = [{ x: 3, y: 3 }, { x: 2, y: 2 }];
gameHistory = []; // Clear game history
renderGame();
}</p>
<p>renderGame();
</script></p>
</body>
</html>