body {
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
touch-action: none;
}
#game-container {
position: relative;
background-color: #fff;
border: 2px solid #333;
}
.cell {
width: 40px;
height: 40px;
position: relative;
}
.wall {
background-color: #8b4513;
}
.goal {
background-color: #90ee90;
}
.box {
background-color: #ffa500;
border-radius: 8px;
margin: 4px;
}
.box.on-goal {
background-color: #32cd32;
}
.player {
background-color: #ff0000;
border-radius: 50%;
margin: 4px;
}
#controls {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.control-btn {
width: 60px;
height: 60px;
background-color: #4CAF50;
border: none;
border-radius: 50%;
color: white;
font-size: 24px;
touch-action: manipulation;
}
推箱子
const levels = [
[
[1,1,1,1,1,1,1],
[1,0,0,0,0,0,1],
[1,0,3,4,3,0,1],
[1,0,0,2,0,0,1],
[1,1,1,1,1,1,1]
]
];
let currentLevel = 0;
let gameState = [];
let playerPos = {x: 0, y: 0};
function initGame() {
gameState = JSON.parse(JSON.stringify(levels[currentLevel]));
const container = document.getElementById('game-container');
container.innerHTML = '';
// 创建游戏地图
gameState.forEach((row, y) => {
row.forEach((cell, x) => {
const div = document.createElement('div');
div.className = 'cell';
div.style.display = 'inline-block';
if (cell === 1) div.classList.add('wall');
if (cell === 2 || cell === 5) div.classList.add('goal');
if (cell === 3 || cell === 5) {
const box = document.createElement('div');
box.className = `box ${cell === 5 ? 'on-goal' : ''}`;
div.appendChild(box);
}
if (cell === 4) {
playerPos = {x, y};
const player = document.createElement('div');
player.className = 'player';
div.appendChild(player);
}
container.appendChild(div);
});
container.appendChild(document.createElement('br'));
});
}
function movePlayer(dx, dy) {
const newX = playerPos.x + dx;
const newY = playerPos.y + dy;
if (newX < 0 || newY < 0 || newY >= gameState.length || newX >= gameState[0].length) return;
const currentCell = gameState[playerPos.y][playerPos.x];
const nextCell = gameState[newY][newX];
// 处理移动
if (nextCell === 0 || nextCell === 2) {
gameState[playerPos.y][playerPos.x] = currentCell === 4 ? 0 : 2;
gameState[newY][newX] = nextCell === 2 ? 4 : 4;
playerPos = {x: newX, y: newY};
}
// 处理推箱子
else if (nextCell === 3 || nextCell === 5) {
const boxX = newX + dx;
const boxY = newY + dy;
if (boxX < 0 || boxY < 0 || boxY >= gameState.length || boxX >= gameState[0].length) return;
const nextBoxCell = gameState[boxY][boxX];
if (nextBoxCell === 0 || nextBoxCell === 2) {
gameState[playerPos.y][playerPos.x] = currentCell === 4 ? 0 : 2;
gameState[newY][newX] = nextCell === 3 ? 4 : 4;
gameState[boxY][boxX] = nextBoxCell === 2 ? 5 : 3;
playerPos = {x: newX, y: newY};
}
}
checkWin();
initGame();
}
function checkWin() {
const win = gameState.flat().every(cell => cell !== 3);
if (win) {
setTimeout(() => alert('恭喜过关!'), 100);
}
}
// 触摸控制
let touchStartX = 0;
let touchStartY = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
});
document.addEventListener('touchend', (e) => {
const dx = e.changedTouches[0].clientX - touchStartX;
const dy = e.changedTouches[0].clientY - touchStartY;
if (Math.abs(dx) > Math.abs(dy)) {
movePlayer(dx > 0 ? 1 : -1, 0);
} else {
movePlayer(0, dy > 0 ? 1 : -1);
}
});
// 按钮控制
document.querySelectorAll('.control-btn').forEach(btn => {
btn.addEventListener('click', () => {
const dir = btn.dataset.direction;
if (dir === 'up') movePlayer(0, -1);
if (dir === 'down') movePlayer(0, 1);
if (dir === 'left') movePlayer(-1, 0);
if (dir === 'right') movePlayer(1, 0);
});
});
// 键盘控制
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp': movePlayer(0, -1); break;
case 'ArrowDown': movePlayer(0, 1); break;
case 'ArrowLeft': movePlayer(-1, 0); break;
case 'ArrowRight': movePlayer(1, 0); break;
}
});
// 初始化游戏
initGame();