[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测

**JavaScript游戏开发**

在本文中，我们将讨论如何使用JavaScript创建一个简单的2D游戏。我们将实现以下功能：

1. **2D地图绘制**
2. **人物移动**
3. **障碍检测**

###2D地图绘制首先，我们需要定义地图的大小和结构。假设我们的地图是一个20x20的网格，每个格子代表一个像素。

javascript// 定义地图大小const MAP_WIDTH =20;
const MAP_HEIGHT =20;

// 创建地图数组let map = new Array(MAP_HEIGHT);
for (let i =0; i < MAP_HEIGHT; i++) {
 map[i] = new Array(MAP_WIDTH).fill(0); // 初始化为0，代表空白格子}

javascript// 获取画布元素const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制地图function drawMap() {
 for (let i =0; i < MAP_HEIGHT; i++) {
 for (let j =0; j < MAP_WIDTH; j++) {
 if (map[i][j] ===1) { // 如果格子为1，代表障碍物 ctx.fillStyle = 'red'; // 绘制红色背景 ctx.fillRect(j *20, i *20,20,20); // 绘制矩形 } else {
 ctx.fillStyle = 'green'; // 绘制绿色背景 ctx.fillRect(j *20, i *20,20,20); // 绘制矩形 }
 }
 }
}

javascript// 定义人物初始位置let playerX = MAP_WIDTH /2;
let playerY = MAP_HEIGHT /2;

// 定义人物速度const PLAYER_SPEED =5;

javascript// 获取画布元素const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制人物function drawPlayer() {
 ctx.fillStyle = 'blue'; // 绘制蓝色背景 ctx.fillRect(playerX *20, playerY *20,20,20); // 绘制矩形}

// 处理键盘事件document.addEventListener('keydown', (e) => {
 switch (e.key) {
 case 'ArrowUp':
 if (playerY >0) { // 如果人物不在顶部边缘，允许上移 playerY--;
 }
 break;
 case 'ArrowDown':
 if (playerY < MAP_HEIGHT -1) { // 如果人物不在底部边缘，允许下移 playerY++;
 }
 break;
 case 'ArrowLeft':
 if (playerX >0) { // 如果人物不在左边缘，允许左移 playerX--;
 }
 break;
 case 'ArrowRight':
 if (playerX < MAP_WIDTH -1) { // 如果人物不在右边缘，允许右移 playerX++;
 }
 break;
 }
});

javascript// 检测是否有障碍物function checkObstacle() {
 for (let i =0; i < MAP_HEIGHT; i++) {
 for (let j =0; j < MAP_WIDTH; j++) {
 if (map[i][j] ===1 && playerX === j && playerY === i) { // 如果格子为1，代表障碍物 console.log('碰到了障碍物！'); // 输出提示信息 return true;
 }
 }
 }
 return false; // 没有碰到障碍物}