好的，以下是一个简单的推
箱子游戏的代码实现，使用了HTML、CSS和JavaScript：
HTML部分：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>推
箱子游戏</title>
<style>
#game-board {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
.tile {
width: 50px;
height: 50px;
background-color: #ccc;
position: absolute;
}
.player {
background-color: #f00;
}
.box {
background-color: #00f;
}
.target {
background-color: #0f0;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script src="game.js"></script>
</body>
</html>
```
CSS部分定义了游戏板块的样式，包括大小、边框、位置等。其中，
每个方块的样式由`.tile`类定义，玩家、
箱子和目标点的样式由`.player`、`.box`和`.target`类定义。
JavaScript部分：
```javascript
// 游戏地图数据
const mapData = [
[0, 0, 0, 0, 0],
[0, 0, 0, 2, 0],
[0, 0, 0, 1, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
];
// 定义游戏中的方块类型
const TILE_TYPE = {
EMPTY: 0,
WALL: 1,
TARGET: 2,
BOX: 3,
PLAYER: 4
};
// 定义玩家初始位置
let playerRow = 2;
let playerCol = 3;
// 定义游戏板块元素
const gameBoardEl = document.querySelector('#game-board');
// 初始化游戏地图
function initMap() {
for (let row = 0; row < mapData.length; row++) {
for (let col = 0; col < mapData[row].length; col++) {
const tileEl = document.createElement('div');
tileEl.className = 'tile';
if (mapData[row][col] === TILE_TYPE.WALL) {
tileEl.style.backgroundColor = '#000';
} else if (mapData[row][col] === TILE_TYPE.TARGET) {
tileEl.className += ' target';
}
tileEl.style.top = row * 50 + 'px';
tileEl.style.left = col * 50 + 'px';
gameBoardEl.appendChild(tileEl);
}
}
}
// 移动玩家和
箱子
function movePlayer(row, col) {
if (mapData[row][col] === TILE_TYPE.EMPTY || mapData[row][col] === TILE_TYPE.TARGET) {
// 移动玩家
mapData[playerRow][playerCol] = TILE_TYPE.EMPTY;
playerRow = row;
playerCol = col;
mapData[playerRow][playerCol] = TILE_TYPE.PLAYER;
// 更新玩家位置
const playerEl = document.querySelector('.player');
playerEl.style.top = playerRow * 50 + 'px';
playerEl.style.left = playerCol * 50 + 'px';
} else if (mapData[row][col] === TILE_TYPE.BOX) {
// 判断
箱子是否可以移动
const nextRow = row + (row - playerRow);
const nextCol = col + (col - playerCol);
if (mapData[nextRow][nextCol] === TILE_TYPE.EMPTY || mapData[nextRow][nextCol] === TILE_TYPE.TARGET) {
// 移动
箱子
mapData[row][col] = TILE_TYPE.EMPTY;
mapData[nextRow][nextCol] = TILE_TYPE.BOX;
// 移动玩家
mapData[playerRow][playerCol] = TILE_TYPE.EMPTY;
playerRow = row;
playerCol = col;
mapData[playerRow][playerCol] = TILE_TYPE.PLAYER;
// 更新
箱子和玩家位置
const boxEl = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
boxEl.style.top = nextRow * 50 + 'px';
boxEl.style.left = nextCol * 50 + 'px';
const playerEl = document.querySelector('.player');
playerEl.style.top = playerRow * 50 + 'px';
playerEl.style.left = playerCol * 50 + 'px';
}
}
}
// 添加事件监听器
function addEventListeners() {
document.addEventListener('keydown', event => {
switch (event.key) {
case 'ArrowUp':
movePlayer(playerRow - 1, playerCol);
break;
case 'ArrowDown':
movePlayer(playerRow + 1, playerCol);
break;
case 'ArrowLeft':
movePlayer(playerRow, playerCol - 1);
break;
case 'ArrowRight':
movePlayer(playerRow, playerCol + 1);
break;
}
});
}
// 初始化游戏
function initGame() {
initMap();
// 创建玩家元素
const playerEl = document.createElement('div');
playerEl.className = 'tile player';
playerEl.style.top = playerRow * 50 + 'px';
playerEl.style.left = playerCol * 50 + 'px';
gameBoardEl.appendChild(playerEl);
// 创建
箱子元素
for (let row = 0; row < mapData.length; row++) {
for (let col = 0; col < mapData[row].length; col++) {
if (mapData[row][col] === TILE_TYPE.BOX) {
const boxEl = document.createElement('div');
boxEl.className = 'tile box';
boxEl.dataset.row = row;
boxEl.dataset.col = col;
boxEl.style.top = row * 50 + 'px';
boxEl.style.left = col * 50 + 'px';
gameBoardEl.appendChild(boxEl);
}
}
}
addEventListeners();
}
// 开始游戏
initGame();
```
JavaScript部分定义了游戏地图数据，包括
每个方块的类型。在代码中，`mapData`数组表示游戏地图，其中0表示空白方块，1表示墙壁，2表示目标点，3表示
箱子，4表示玩家。`TILE_TYPE`对象定义了方块类型的常量。`playerRow`和`playerCol`变量表示玩家的行列位置。
`initMap()`函数初始化游戏地图，根据`mapData`数组中的数据动态生成游戏板块中的方块元素。`movePlayer(row, col)`函数移动玩家和
箱子，根据移动位置判断是否可以移动，更新`mapData`数组和游戏板块中的方块元素的位置。`addEventListeners()`函数添加事件监听器，根据按键事件调用`movePlayer(row, col)`函数移动玩家和
箱子。`initGame()`函数初始化游戏，创建玩家和
箱子元素，添加事件监听器。最后调用`initGame()`函数开始游戏。
完整代码可参考以下链接：
https://codepen.io/lydiahallie/pen/oNvJzvB
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
