系列文章目录

第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 第四章 绘制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）

一、列计划

1.1、目标

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

1.2、步骤

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

二、使用步骤

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

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 尝试走直线，从左走到目标，中途碰到石头障碍就走不动了，此时上下左都有石头障碍，都走不动，只能向右走 向右走1格向下走2格向左走2格向上走一格向左走一格向上走一格抵达目标

总结

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

参考文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：