推箱子游戏

推箱子游戏

编程文章jaq1232025-03-09 17:01:3835A+A-

手机推箱子

推箱子

<script>

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();

</script>

点击这里复制本文地址 以上内容由jaq123整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

苍茫编程网 © All Rights Reserved.  蜀ICP备2024111239号-21