我需要蚂蚁推箱子游戏代码
因为蚂蚁推箱子游戏的实现方式有很多种，所以我提供一种基于HTML、CSS和JavaScript的实现方法，代码如下：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蚂蚁推箱子游戏</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="game">
<div id="map"></div>
</div>
<script src="game.js"></script>
</body>
</html>
CSS代码：
#game {
margin: 50px auto;
width: 500px;
height: 500px;
border: 5px solid black;
position: relative;
}
#map {
width: 300px;
height: 300px;
margin: 50px auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.box {
width: 50px;
height: 50px;
background-color: brown;
position: absolute;
}
.ant {
width: 50px;
height: 50px;
background-color: black;
position: absolute;
}
JavaScript代码：
var map = [
[1, 1, 1, 1, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 2, 1],
[1, 1, 1, 1, 1]
];
var ant = {
x: 1,
y: 1
};
var boxes = [
{
x: 3,
y: 3
}
];
var direction = 0; // 0: 上, 1: 右, 2: 下, 3: 左
function drawMap() {
var mapDiv = document.getElementById("map");
mapDiv.innerHTML = "";
for (var i = 0; i < map.length; i++) {
for (var j = 0; j < map[i].length; j++) {
if (map[i][j] === 1) {
var boxDiv = document.createElement("div");
boxDiv.className = "box";
boxDiv.style.top = i * 50 + "px";
boxDiv.style.left = j * 50 + "px";
mapDiv.appendChild(boxDiv);
} else if (map[i][j] === 2) {
var antDiv = document.createElement("div");
antDiv.className = "ant";
antDiv.style.top = i * 50 + "px";
antDiv.style.left = j * 50 + "px";
mapDiv.appendChild(antDiv);
}
}
}
for (var k = 0; k < boxes.length; k++) {
var boxDiv = document.createElement("div");
boxDiv.className = "box";
boxDiv.style.top = boxes[k].y * 50 + "px";
boxDiv.style.left = boxes[k].x * 50 + "px";
mapDiv.appendChild(boxDiv);
}
}
function moveAnt() {
var dx = 0;
var dy = 0;
if (direction === 0) {
dy = -1;
} else if (direction === 1) {
dx = 1;
} else if (direction === 2) {
dy = 1;
} else if (direction === 3) {
dx = -1;
}
var newX = ant.x + dx;
var newY = ant.y + dy;
if (map[newY][newX] === 0) {
ant.x = newX;
ant.y = newY;
} else if (map[newY][newX] === 2) {
var newBoxX = newX + dx;
var newBoxY = newY + dy;
if (map[newBoxY][newBoxX] === 0) {
ant.x = newX;
ant.y = newY;
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].x === newX && boxes[i].y === newY) {
boxes[i].x = newBoxX;
boxes[i].y = newBoxY;
}
}
}
}
drawMap();
checkWin();
}
function checkWin() {
for (var i = 0; i < boxes.length; i++) {
if (map[boxes[i].y][boxes[i].x] !== 1) {
return;
}
}
alert("你赢了！");
}
document.onkeydown = function(event) {
if (event.keyCode === 38) { // 上
direction = 0;
moveAnt();
} else if (event.keyCode === 39) { // 右
direction = 1;
moveAnt();
} else if (event.keyCode === 40) { // 下
direction = 2;
moveAnt();
} else if (event.keyCode === 37) { // 左
direction = 3;
moveAnt();
}
};
drawMap();
这是一个简单的蚂蚁推箱子游戏，只有一个箱子和一个蚂蚁，但是可以通过修改map、ant和boxes数组来增加地图和箱子的数量。在游戏中，你可以使用上下左右键来控制蚂蚁的移动，当所有箱子都被推到目标位置时，游戏结束。
原文地址: https://www.cveoy.top/t/topic/bFB3 著作权归作者所有。请勿转载和采集!