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

矫情吗；* 2023-10-13 20:29 30阅读 0赞

## 系列文章目录 ##

[第一章 2D二维地图绘制、人物移动、障碍检测][2D]  
[第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示)][Link 1]  
[第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测][Link 2]  
[第四章 绘制Q版地图、键盘上下左右地图场景切换][_Q]

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、列计划
 *   *  1.1、目标
     *  1.2、步骤
 *  二、使用步骤
 *   *  2.1、准备素材(图片)：草坪、人物(熊猫)、障碍(石头)
     *  2.2、初始化布局(表格)，边距设置为0，无边框，设置背景图(草坪)平铺拉满
     *  2.3、标记草坪、熊猫、石头的代码
     *  2.4、初始化二维地图数据，初始化障碍物围墙，初始化人物位置
     *  2.5、计算公共变量二维地图的行、列
     *  2.6、合并二维地图数据、人物位置数据，渲染到页面
     *  2.7、设置全局键盘事件(在Body上添加)，监听wasd按键事件：w(上) s(下) a(左) d(右)、在事件里增加任务移动逻辑/增加边界逻辑、在事件里增加障碍检测逻辑
 *  3、部分效果图
 *  总结

--------------------

## 前言 ##

复习JavaScript 事件有感，心血来潮想做一个2D二维地图绘制、人物移动、障碍检测相关的单页面游戏。  
技术栈：JavaScript、Html、CSS  
环境：chrome浏览器  
编辑器：记事本（Idea）  
![在这里插入图片描述][dda2fc28e08144c5a1b48785e283bba3.png]

--------------------

## 一、列计划 ##

### 1.1、目标 ###

做一个2D二维地图绘制、人物移动、障碍检测相关的单页面游戏

### 1.2、步骤 ###

*  准备素材(图片)：草坪、人物(熊猫)、障碍(石头)
 *  初始化布局(表格)，边距设置为0，无边框，设置背景图(草坪)平铺拉满
 *  标记草坪、熊猫、石头的代码
 *  初始化二维地图数据，初始化障碍物围墙，初始化人物位置
 *  计算公共变量二维地图的行、列
 *  合并二维地图数据、人物位置数据，渲染到页面
 *  设置全局键盘事件(在Body上添加)，监听wasd按键事件：w(上) s(下) a(左) d(右)
 *  在事件里增加任务移动逻辑、增加边界逻辑
 *  在事件里增加障碍检测逻辑

## 二、使用步骤 ##

### 2.1、准备素材(图片)：草坪、人物(熊猫)、障碍(石头) ###

![在这里插入图片描述][44d1c07e14c24d479b6d693e608bd6ea.png]  
![在这里插入图片描述][d7f58134cf934a828d4e91a7e347af14.png]

### 2.2、初始化布局(表格)，边距设置为0，无边框，设置背景图(草坪)平铺拉满 ###

**设置table的ID：map1001  
代表是编号1001的地图**

### 2.3、标记草坪、熊猫、石头的代码 ###

### 2.4、初始化二维地图数据，初始化障碍物围墙，初始化人物位置 ###

### 2.5、计算公共变量二维地图的行、列 ###

### 2.6、合并二维地图数据、人物位置数据，渲染到页面 ###

### 2.7、设置全局键盘事件(在Body上添加)，监听wasd按键事件：w(上) s(下) a(左) d(右)、在事件里增加任务移动逻辑/增加边界逻辑、在事件里增加障碍检测逻辑 ###

## 3、部分效果图 ##

*  尝试走到右上角的位置，初始化位置：1,4，目标值：1,1  
    ![在这里插入图片描述][054d5097a51c4759b4ccdc8bef77ca54.png]
 *  尝试走直线，从左走到目标，中途碰到石头障碍就走不动了，此时上下左都有石头障碍，都走不动，只能向右走  
    ![在这里插入图片描述][f63a3472fd3740199206c7d611590323.png]
 *  向右走1格
 *  向下走2格
 *  向左走2格
 *  向上走一格
 *  向左走一格
 *  向上走一格
 *  抵达目标 ![在这里插入图片描述][086495efd69c4446a328ac88a51238bd.png]

--------------------

## 总结 ##

以上就是今天要讲的内容，本文仅仅简单介绍了2D二维地图绘制、人物移动、障碍检测，可以根据此开发出自动寻径避障、多障碍物绘制、NPC自动出现并移动、人物动画动作、多地图切换、装备仓库、装备效果等。例如：推箱子、走迷宫、副本游戏、熊猫吃竹子等。

[2D]: https://blog.csdn.net/s445320/article/details/131816861
[Link 1]: https://blog.csdn.net/s445320/article/details/131881734
[Link 2]: https://blog.csdn.net/s445320/article/details/131947568
[_Q]: https://blog.csdn.net/s445320/article/details/132029317
[dda2fc28e08144c5a1b48785e283bba3.png]: https://img-blog.csdnimg.cn/dda2fc28e08144c5a1b48785e283bba3.png
[44d1c07e14c24d479b6d693e608bd6ea.png]: https://img-blog.csdnimg.cn/44d1c07e14c24d479b6d693e608bd6ea.png
[d7f58134cf934a828d4e91a7e347af14.png]: https://img-blog.csdnimg.cn/d7f58134cf934a828d4e91a7e347af14.png
[054d5097a51c4759b4ccdc8bef77ca54.png]: https://img-blog.csdnimg.cn/054d5097a51c4759b4ccdc8bef77ca54.png
[f63a3472fd3740199206c7d611590323.png]: https://img-blog.csdnimg.cn/f63a3472fd3740199206c7d611590323.png
[086495efd69c4446a328ac88a51238bd.png]: https://img-blog.csdnimg.cn/086495efd69c4446a328ac88a51238bd.png