1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：青花锁 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

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

前言

复习JavaScript 事件有感，心血来潮想做一个2D二维地图绘制、人物移动、障碍检测相关的单页面游戏。
技术栈：JavaScript、Html、CSS
环境：chrome浏览器
编辑器：记事本（Idea）
[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏

一、列计划

1.1、目标

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

1.2、步骤

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

二、使用步骤

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

[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏
[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏

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

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

	<style>
        table { 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; }
    </style>
    
<body onload="init()" onkeypress="keypress(event)">
<table id="map1001">
</table>
</body>

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

<script>
	var empty = 0;   //空地或草坪
	var stone = 1;   //石头的标记是1
    var 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、计算公共变量二维地图的行、列

<script>
	 var row = mapData.length;  //地图的行
     var column = mapData[0].length;  //地图的列
</script>

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

<script>
	 /**
       * 合并二维地图数据、人物位置数据，渲染到页面
       */
      function init() {
        //二维数组里，去初始化熊猫的位置
        mapData[initPoint[0]][initPoint[1]] = panda
        loadData(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 += '<td><img src="../img/item/stone.png" style="height: 90px; height: 90px; border-radius: 50%;" ></td>';
            } else if( mapData[i][j] == 9 ){
              mapHTML += '<td><img src="../img/item/panda1.png" style="height: 90px; height: 90px; border-radius: 50%;" ></td>';
            }
          }
          mapHTML += "</tr>";
        }
        map.innerHTML = mapHTML;
      }
</script>

<body onload="init()" >

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;
      }
</script>

<body onload="init()" onkeypress="keypress(event)">

3、部分效果图

  • 尝试走到右上角的位置，初始化位置：1,4，目标值：1,1
    [JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏
  • 尝试走直线，从左走到目标，中途碰到石头障碍就走不动了，此时上下左都有石头障碍，都走不动，只能向右走
    [JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏
  • 向右走1格
  • 向下走2格
  • 向左走2格
  • 向上走一格
  • 向左走一格
  • 向上走一格
  • 抵达目标 [JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测,前端小游戏,javascript,键盘事件,二维地图绘制,小游戏

总结

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

到了这里，关于[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包