[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测

**JavaScript 游戏开发**

本文将介绍如何使用 JavaScript 开发一个简单的游戏，包括绘制冰宫宝藏地图、人物鼠标点击移动以及障碍检测。

### 一、绘制冰宫宝藏地图首先，我们需要创建一个画布来绘制我们的地图。我们可以使用 HTML5 的 Canvas API 来实现这一点。

html

javascript// game.jsconst canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

// 设置画布的背景色ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0,0, canvas.width, canvas.height);

// 绘制地图的函数function drawMap() {
 // 绘制冰宫宝藏的地图 ctx.fillStyle = '#0000ff'; // 蓝色 ctx.fillRect(100,100,200,200);
 // 绘制障碍物 ctx.fillStyle = '#ff0000'; // 红色 ctx.fillRect(300,300,50,50);
}

javascript// game.jsconst personImage = new Image();
personImage.src = 'person.png'; // 人物的图像let personX =100; // 人物的初始 x 坐标let personY =100; // 人物的初始 y 坐标let speedX =2; // 人物的 x 方向速度let speedY =2; // 人物的 y 方向速度// 鼠标点击移动人物的函数function movePerson(e) {
 personX = e.clientX - canvas.offsetLeft;
 personY = e.clientY - canvas.offsetTop;
 // 更新人物的位置 ctx.clearRect(0,0, canvas.width, canvas.height);
 drawMap();
 ctx.drawImage(personImage, personX, personY);
}

javascript// game.jsfunction checkCollision() {
 // 检测人物是否碰撞到了障碍物 if (personX +50 >300 && personY +50 >300) {
 alert('Game Over!');
 return false;
 }
 return true;
}

html

javascript// game.jsconst canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0,0, canvas.width, canvas.height);

function drawMap() {
 ctx.fillStyle = '#0000ff'; // 蓝色 ctx.fillRect(100,100,200,200);
 ctx.fillStyle = '#ff0000'; // 红色 ctx.fillRect(300,300,50,50);
}

const personImage = new Image();
personImage.src = 'person.png'; // 人物的图像let personX =100; // 人物的初始 x 坐标let personY =100; // 人物的初始 y 坐标let speedX =2; // 人物的 x 方向速度let speedY =2; // 人物的 y 方向速度function movePerson(e) {
 personX = e.clientX - canvas.offsetLeft;
 personY = e.clientY - canvas.offsetTop;
 ctx.clearRect(0,0, canvas.width, canvas.height);
 drawMap();
 ctx.drawImage(personImage, personX, personY);
}

function checkCollision() {
 if (personX +50 >300 && personY +50 >300) {
 alert('Game Over!');
 return false;
 }
 return true;
}