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

系列文章目录

第一章 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的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;   //石头的标记是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、计算公共变量二维地图的行、列

<script>var 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 += '<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
    在这里插入图片描述
  • 尝试走直线,从左走到目标,中途碰到石头障碍就走不动了,此时上下左都有石头障碍,都走不动,只能向右走
    在这里插入图片描述
  • 向右走1格
  • 向下走2格
  • 向左走2格
  • 向上走一格
  • 向左走一格
  • 向上走一格
  • 抵达目标 在这里插入图片描述

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/4173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python对Excel不同的行分别复制不同的次数

本文介绍基于Python语言&#xff0c;读取Excel表格文件数据&#xff0c;并将其中符合我们特定要求的那一行加以复制指定的次数&#xff0c;而不符合要求的那一行则不复制&#xff1b;并将所得结果保存为新的Excel表格文件的方法。 这里需要说明&#xff0c;在我们之前的文章Pyt…

〖Python网络爬虫实战㉜〗- 协程基本原理

订阅:新手可以订阅我的其他专栏。免费阶段订阅量1000+ python项目实战 Python编程基础教程系列(零基础小白搬砖逆袭) 说明:本专栏持续更新中,订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者:爱吃饼干的小白鼠…

【Ubuntu报错】command not found: nmcli

如果在你的Linux系统上运行nmcli时出现"command not found"错误&#xff0c;这可能意味着nmcli命令行工具没有安装或没有在系统的环境变量中找到。 nmcli命令通常随着NetworkManager软件包一起提供。为了解决这个问题&#xff0c;你可以尝试以下步骤&#xff1a; 如…

SpringBoot Cache 整合 Redis 缓存框架

文章目录 引入依赖配置 Redis启动类注解注解开发CacheableCachePutCacheEvict 注解属性cacheNames/valuekeykeyGeneratorconditionunlesscacheManagersync SpEL 表达式 SpringBoot 提供了 SpringBootCache 框架作为 SpringBoot 的缓存统一框架&#xff0c;使用 SpringBootCache…

php连接上mysql数据库该的配置方法

用mysql官方的管理工具workbench&#xff1a; 打开导出界面后&#xff0c;下一步&#xff0c;选择csv格式&#xff0c;导出后excel就能打开了 如果你需要在程序代码中导出&#xff0c;需要找到对应代码的excel处理库。 如php 的 phpExcel( 最新版已更名为 phpoffice/phpspread…

selenium WebDriver 中的几种等待--sleep(),implicitly_wait(),WebDriverWait()

目录 强制等待:sleep() 隐式等待:implicitly_wait() 显示等待:WebDriverWait() 与until()或者until_not()方法结合使用 WebDriverWait与expected_conditions结合使用 显示等待,自定义等待条件 强制等待:sleep() import time sleep(5) #等待5秒 设置固定休眠时间&#x…

14matlab数理统计 多项式的求根和根据根求多项式(matlab程序)

1.简述 分享一下通过多种不同的方法计算多项式的根。 数值根 使用代换法求根 特定区间内的根 符号根 数值根 roots 函数用于计算系数向量表示的单变量多项式的根。 例如&#xff0c;创建一个向量以表示多项式 x2−x−6&#xff0c;然后计算多项式的根。 p [1 -1 -6]; r …

Prometheus节点监控及hadoop集群监控

背景:我司长期苦于CM6.3后收费问题,这次领导痛下决心,决定要自己开发一套大数据管理平台,监控就是其中一部分,本文主要阐述,话不多说,先看效果。 1.监控组件Prometheus 1.1上传Prometheus包 [root@bigdb01 ~]# rsync root@172.16.1.247/data/fan/install/native/09.…

uni.app如何检测小程序版本更新以及上线后如何关闭全局打印

uni.app如何检测小程序版本更新以及上线后如何关闭全局打印 检测小程序版本更新关闭全局打印 检测小程序版本更新 App.vue 入口文件中 添加如下代码 //检测小程序版本是否更新const updateManager wx.getUpdateManager()updateManager.onCheckForUpdate(function(res) {// 请求…

DuiLib中的list控件以及ListContainerElement控件

文章目录 前言1、创建list控件2、创建 ListContainerElement 元素&#xff0c;并添加到 List 控件中,这里的ListContainerElement用xml来表示3、在 ListContainerElement 元素中添加子控件 1、List控件2、ListContainerElement控件 前言 在 Duilib 中&#xff0c;List 控件用于…

【批量将视频转为图像序列】

批量将视频转为图像序列 代码如下&#xff0c;代码中带有解释&#xff1a; # 导入所需要的库 import cv2 import os import numpy as np# 多个视频所在的路径 datasets_path ["/home/y/Code/数据集/1/007f.mp4","/home/y/Code/数据集/1/05f.mp4","/…

UI界面中的图标设计趋势与最佳实践

作为UI设计师&#xff0c;在日常的工作中&#xff0c;避免不了做图标规范。今天跟大家聊一聊&#xff0c;UI设计中的图标设计。 规范的重要性不用多说了&#xff0c;没有规范多个设计师绘制的图标会有很多差异&#xff0c;描边粗细、角度、圆角度等等。今天的文章和大家聊一下…

ChatGPT 的局限性是什么?

ChatGPT 的局限性是什么&#xff1f; 尽管看起来非常令人印象深刻&#xff0c;但 ChatGPT 仍然存在局限性。此类限制包括无法回答以特定方式措辞的问题&#xff0c;因为它需要重新措辞才能理解输入的问题。更大的限制是它提供的响应缺乏质量 - 有时听起来似是而非&#xff0c;…

leetcode303. 区域和检索 - 数组不可变 前缀和

https://leetcode.cn/problems/range-sum-query-immutable/ 给定一个整数数组 nums&#xff0c;处理以下类型的多个查询: 计算索引 left 和 right &#xff08;包含 left 和 right&#xff09;之间的 nums 元素的 和 &#xff0c;其中 left < right 实现 NumArray 类&…

Stable Diffusion - 编辑生成 (OpenPose Editor) 相同人物姿势的图像

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131818943 OpenPose Editor 是 Stable Diffusion 的扩展插件&#xff0c;可以自定义人物的姿势和表情&#xff0c;以及生成深度、法线和边缘图等信…

vue 集成tinymce2实现图片,视频以及文件的上传

vue 集成tinymce2实现图片&#xff0c;视频以及文件的上传 1. 安装插件 &#xff08;1&#xff09;安装tinymce npm install tinymce -S &#xff08;2&#xff09;安装tinymce-vue npm install tinymce/tinymce-vue3.0.1 -S 2. 复制静态文件到public目录 资源下载路径&…

LangChain(5)Conversational Agents

Large Language Models (LLMs) 在语义知识方面表现不错&#xff0c;但也有一些不足&#xff0c;如&#xff1a;不能正确计算数学公式、无法获取最新知识新闻 通过 Agents 可以赋予 LLMs 更多能力&#xff0c;让LLM能够计算、上网查询 agent 简单使用 from langchain import …

Django入门

前言 早就想入门后端了&#xff0c;自己倒是用过Flask&#xff0c;对于常规网站来说Django更完善一些。稍微学习下&#xff0c;能够做一些简单业务处理就好啦。 跟着官方文档学习的&#xff0c;这里做一下记录。纯纯拿来用&#xff0c;不去研究原理与架构&#xff0c;无脑跟着…

MyBatis-Plus的数据安全保护

文章目录 一、介绍二、生成密钥三、加密四、配置文件内容使用密文五、命令行参数 MyBatis-Plus官网https://baomidou.com/ 一、介绍 对配置文件内容加密&#xff0c;3.3.2开始支持使用AES加密算法实现原理&#xff1a;SafetyEncryptProcessor implements EnvironmentPostProc…

17 | 从后端到前端:微服务后,前端如何设计?

微服务架构通常采用前后端分离的设计方式。作为企业级的中台&#xff0c;在完成单体应用拆分和微服务建设后&#xff0c;前端项目团队会同时面对多个中台微服务项目团队&#xff0c;这时候的前端人员就犹如维修电工一样了。 面对如此多的微服务暴露出来的 API 服务&#xff0c…