[JavaScript游戏开发] 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示)
发布人：shili8
发布时间：2025-02-18 18:35
阅读次数：0
**JavaScript游戏开发**
在本文中，我们将讨论如何使用JavaScript开发一个简单的2D游戏，包括人物的移动、自动寻径、以及小地图的显示。
### 一. 跟随人物二维动态地图绘制首先，我们需要创建一个动态地图。我们可以使用HTML5 Canvas API来实现这一点。
html<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript游戏开发</title>
<style>
#map {
width:800px;
height:600px;
border:1px solid black;
}
</style>
</head>
<body>
<canvas id="map" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
javascript// script.jsclass Map {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
this.tileSize =50; // 每个地图块的大小 this.mapData = []; // 地图数据 }
drawMap() {
for (let i =0; i < this.height / this.tileSize; i++) {
for (let j =0; j < this.width / this.tileSize; j++) {
let x = j * this.tileSize;
let y = i * this.tileSize;
if (this.mapData[i][j] ===1) { // 如果地图块是陆地 this.ctx.fillStyle = 'green';
} else { // 如果地图块是水 this.ctx.fillStyle = 'blue';
}
this.ctx.fillRect(x, y, this.tileSize, this.tileSize);
}
}
}
updateMap(mapData) {
this.mapData = mapData;
this.drawMap();
}
}
let map = new Map('map');
map.updateMap([
[1,1,1,1,1],
[1,0,0,0,1],
[1,0,1,0,1],
[1,0,0,0,1],
[1,1,1,1,1]
]);
### 二. 自动寻径下一步，我们需要实现人物的自动寻径。我们可以使用A*算法来实现这一点。
javascriptclass Character {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed =1; // 人物速度 this.targetX = x;
this.targetY = y;
}
update() {
let dx = this.targetX - this.x;
let dy = this.targetY - this.y;
if (Math.abs(dx) > Math.abs(dy)) { // 如果目标点在x轴上 this.x += dx / Math.abs(dx) * this.speed;
} else { // 如果目标点在y轴上 this.y += dy / Math.abs(dy) * this.speed;
}
}
setTarget(x, y) {
this.targetX = x;
this.targetY = y;
}
}
let character = new Character(100,100);
character.setTarget(700,500);
function updateCharacter() {
character.update();
map.ctx.clearRect(0,0, map.width, map.height);
map.drawMap();
map.ctx.fillStyle = 'red';
map.ctx.fillRect(character.x, character.y,20,20); // 绘制人物}
setInterval(updateCharacter,1000 /60); // 每秒60次更新### 三. 小地图显示最后，我们需要实现小地图的显示。我们可以使用一个小的Canvas元素来实现这一点。
html<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript游戏开发</title>
<style>
#map {
width:800px;
height:600px;
border:1px solid black;
}
#mini-map {
width:200px;
height:150px;
border:1px solid black;
position: absolute;
top:10px;
left:10px;
}
</style>
</head>
<body>
<canvas id="map" width="800" height="600"></canvas>
<canvas id="mini-map" width="200" height="150"></canvas>
<script src="script.js"></script>
</body>
</html>
javascript// script.jsclass MiniMap {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
this.tileSize =20; // 每个地图块的大小 this.mapData = []; // 地图数据 }
drawMap() {
for (let i =0; i < this.height / this.tileSize; i++) {
for (let j =0; j < this.width / this.tileSize; j++) {
let x = j * this.tileSize;
let y = i * this.tileSize;
if (this.mapData[i][j] ===1) { // 如果地图块是陆地 this.ctx.fillStyle = 'green';
} else { // 如果地图块是水 this.ctx.fillStyle = 'blue';
}
this.ctx.fillRect(x, y, this.tileSize, this.tileSize);
}
}
}
updateMap(mapData) {
this.mapData = mapData;
this.drawMap();
}
}
let miniMap = new MiniMap('mini-map');
miniMap.updateMap([
[1,1,1,1,1],
[1,0,0,0,1],
[1,0,1,0,1],
[1,0,0,0,1],
[1,1,1,1,1]
]);
在本文中，我们讨论了如何使用JavaScript开发一个简单的2D游戏，包括人物的移动、自动寻径、以及小地图的显示。我们使用HTML5 Canvas API来绘制地图和人物，并使用A*算法来实现人物的自动寻径。最后，我们使用一个小的Canvas元素来实现小地图的显示。
粤公网安备 44011102002787号