云南餐饮网站建设,html5网页源码,wordpress 后台栏目,xampp wordpress 太慢系列文章目录
第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 文章目录 系列文章目录前言一、列计划1.1、目标1.2、步骤 二、使用步骤2.1、准备素材(图片)#xff1a;草坪、人物(熊猫)、障碍(石头)2.2、初…系列文章目录
第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 文章目录 系列文章目录前言一、列计划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的IDmap1001 代表是编号1001的地图 styletable { border-collapse: collapse; padding: 0 ; background: url(../img/item/grass.png); width:100%;height:100% ; background-position: center; background-size:cover; background-repeat: no-repeat; }td { width: 100px; height: 100px; }tr { display: block; margin: -5px; }/stylebody onloadinit() onkeypresskeypress(event)
table idmap1001
/table
/body2.3、标记草坪、熊猫、石头的代码
scriptvar empty 0; //空地或草坪var stone 1; //石头的标记是1var panda 9; //熊猫的标记是9
/script
2.4、初始化二维地图数据初始化障碍物围墙初始化人物位置
script/*** 加载地图数据* 0 空地/草坪* 1 石头* 9 熊猫* type {number[]}*/var mapData [[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1] ,[ 1 , 0 , 1 , 0 , 0 , 0 , 0 , 1] ,[ 1 , 0 , 0 , 1 , 0 , 1 , 0 , 1] ,[ 1 , 0 , 0 , 0 , 0 , 1 , 0 , 1] ,[ 1 , 0 , 1 , 0 , 1 , 1 , 0 , 1] ,[ 1 , 0 , 1 , 0 , 0 , 0 , 0 , 1] ,[ 1 , 1 , 1 , 1 , 1 , 1 , 1 , 1]]var initPoint [1,4]; //初始化熊猫的位置是 1,4
/script
2.5、计算公共变量二维地图的行、列
scriptvar row mapData.length; //地图的行var column mapData[0].length; //地图的列
/script
2.6、合并二维地图数据、人物位置数据渲染到页面
script/*** 合并二维地图数据、人物位置数据渲染到页面*/function init() {//二维数组里去初始化熊猫的位置mapData[initPoint[0]][initPoint[1]] pandaloadData(mapData);}/*** 渲染地图* param mapData*/function loadData(mapData) {// 获取地图对象var map document.getElementById(map1001);//渲染一行八列的数据var mapHTML ;for (var i 0; i row; i) {mapHTML tr;for (var j 0; j column; j) {if( mapData[i][j] 0 ){mapHTML td/td;} else if( mapData[i][j] 1 ){mapHTML tdimg src../img/item/stone.png styleheight: 90px; height: 90px; border-radius: 50%; /td;} else if( mapData[i][j] 9 ){mapHTML tdimg src../img/item/panda1.png styleheight: 90px; height: 90px; border-radius: 50%; /td;}}mapHTML /tr;}map.innerHTML mapHTML;}
/scriptbody onloadinit()
2.7、设置全局键盘事件(在Body上添加)监听wasd按键事件w(上) s(下) a(左) d(右)、在事件里增加任务移动逻辑/增加边界逻辑、在事件里增加障碍检测逻辑
script/*** 监听wasd按键事件w(上) s(下) a(左) d(右)* param e*/var keypress function keypress(e){var keynum window.event ? e.keyCode : e.which;if( 119 keynum ) {var point initPoint;if( point[0] row - 1 ) {var xPoint initPoint[1];var yPoint initPoint[0] - 1;if( checkStone(yPoint,xPoint) ){console.log(碰撞到石头了停止动作)return}console.log(移动后的位置x: xPoint , y: yPoint )initPoint [yPoint,xPoint]operatePanda(point);console.log(向上)} else {console.log(超出地图范围了停止动作)}} else if( 97 keynum ) {var point initPoint;if( point[1] 0 ) {var xPoint initPoint[1] -1;var yPoint initPoint[0];if( checkStone(yPoint,xPoint) ){console.log(碰撞到石头了停止动作)return}console.log(移动后的位置x: xPoint , y: yPoint )initPoint [yPoint,xPoint]operatePanda(point);console.log(向左)} else {console.log(超出地图范围了停止动作)}} else if( 115 keynum ) {var point initPoint;if( point[0] row - 1 ) {var xPoint initPoint[1];var yPoint initPoint[0] 1;if( checkStone(yPoint,xPoint) ){console.log(碰撞到石头了停止动作)return}console.log(移动后的位置x: xPoint , y: yPoint )initPoint [yPoint,xPoint]operatePanda(point);console.log(向下)} else {console.log(超出地图范围了停止动作)}} else if( 100 keynum ) {var point initPoint;if( point[1] column -1 ) {var xPoint initPoint[1] 1;var yPoint initPoint[0];if( checkStone(yPoint,xPoint) ){console.log(碰撞到石头了停止动作)return}console.log(移动后的位置x: xPoint , y: yPoint )initPoint [yPoint,xPoint]operatePanda(point);console.log(向右)} else {console.log(超出地图范围了停止动作)}}}/*** 障碍检测可加多个障碍条件* param yPoint* param xPoint* returns {boolean}*/function checkStone(yPoint , xPoint ) {return mapData[yPoint][xPoint] stone;}
/scriptbody onloadinit() onkeypresskeypress(event)
3、部分效果图
尝试走到右上角的位置初始化位置1,4目标值1,1 尝试走直线从左走到目标中途碰到石头障碍就走不动了此时上下左都有石头障碍都走不动只能向右走 向右走1格向下走2格向左走2格向上走一格向左走一格向上走一格抵达目标 总结
以上就是今天要讲的内容本文仅仅简单介绍了2D二维地图绘制、人物移动、障碍检测可以根据此开发出自动寻径避障、多障碍物绘制、NPC自动出现并移动、人物动画动作、多地图切换、装备仓库、装备效果等。例如推箱子、走迷宫、副本游戏、熊猫吃竹子等。
