[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换

这篇具有很好参考价值的文章主要介绍了[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

系列文章目录

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



前言

本章内容在第一章的基础上进行了升级,因此带大家回顾下第一章的内容。

第一章:

  • 使用JavaScript绘制简单的二维地图
    采用二维数组存储地图信息,使用表格绘制地图,每个td单元格存储数据
  • 键盘上下左右控制
    使用JavaScript keyPress键盘事件监听WASD键,按键触发时人物做出相应操作
  • 障碍物碰撞检测(采用格子碰撞检测)
    人物下一步碰撞到石头时,提示遇到障碍,终止人物运动

本章节采用第一章节的键盘上下左右事件控制,同时把地图层与数据层(二维网格、人物)分离,作为单独的模块。


一、本章节效果图

[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

二、任务拆解

1、准备【地图层图片】,找一张酷炫的地图
2、准备【游戏窗口层】,设置为浏览器可视区域高、宽
3、准备【游戏地图层】,设置为地图图片自身高、宽
4、实现【键盘上下左右操作】,让【游戏地图层】在【游戏窗口层】可视区域内上下作用移动,并实现边界功能
5、看看最终效果
[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

2.1、准备【地图层图片】

找到一张足够大的Q版地图(PS:传奇、问道的大地图宽度可达2万+px)
[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

2.2、准备【游戏窗口层】

设置游戏窗口层为浏览器可视区域高、宽,其余内容将不可见
1、指定div的ID=parentDiv(id=“parentDiv”);
2、指定块高、块宽为浏览器窗口的95%(width: 95%; height: 95%; );
3、指定parentDiv,相对于body元件定位,初始状态下margin-left、margin-top都为0(默认值) ( position: absolute; );
4、设置背景色为红色(便于调试时避免图层超出游戏窗口层)(background-color: red; );
5、设置游戏窗口层溢出被剪切,其余内容将不可见(展示固定窗口的地图,其余内容不可见)(overflow: hidden; )

<body>

	<div style="width: 95%; height: 95%; position: absolute; 
		background-color: red; overflow: hidden; " id="parentDiv">
	</div>

</body>

涉及知识点:CSS position属性、CSS overflow属性、CSS background-color属性
[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

2.2.1、CSS position属性

position属性指定用于元素的定位方法的类型(static, relative, absolute, fixed, sticky)

  • CSS语法
    position: static|absolute|fixed|relative|sticky|initial|inherit;
  • 属性值
    性值 描述
    tatic 默认值。 按它们出现在文档流中元素顺序呈现
    bsolute 元件相对于其第一定位(非静态)祖先元件定位
    ixed 元素相对于浏览器窗口定位
    elative 元素相对于其正常位置定位,因此“left:20px”将20个像素添加到元素的左边位置
    ticky 元素根据用户的滚动位置定位,粘性元素在相对和固定之间切换,具体取决于滚动位置。 它被相对定位,直到在视口中满足给定的偏移位置 - 然后它“粘住”到位(如position:fixed)
    nherit 从其父元素继承此属性

2.2.2、CSS overflow属性

overflow属性指定内容溢出元素框时应发生的情况。此属性指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条。
注意:overflow属性仅适用于具有指定高度的块元素。

  • CSS语法
    overflow: visible|hidden|scroll|auto|initial|inherit;
  • 属性值
    性值 描述
    isible 溢出没有被剪裁。 它呈现在元素框之外。 这是默认的
    idden 溢出被剪切,其余内容将不可见
    croll 剪辑溢出,但添加滚动条以查看其余内容
    uto 如果剪切了溢出,则应添加滚动条以查看其余内容
    nherit 从其父元素继承此属性

2.2.3、CSS background-color属性

background-color属性设置元素的背景颜色。元素的背景是元素的总大小,包括填充和边框(但不是边距)。
提示:使用背景颜色和文本颜色使文本易于阅读,此处便于调试时便于调整画布的边界

  • CSS语法
    background-color: color|transparent|inherit;
  • 属性值
    性值 描述
    olor 指定背景颜色。 查看CSS颜色值以获取可能颜色值的完整列表。
    ransparent 指定背景颜色应该是透明的。 这是默认的
    nherit 从其父元素继承此属性。

2.3、准备【游戏地图层】

1、在id="parentDiv"的div容器里,放置【游戏地图层】;
2、设置【游戏地图层】的id=“mapDiv”;
3、设置【游戏地图层】的高度、宽度,1比1比例还原原图尺寸;
4、设置【游戏地图层】的z-index,使得能显示出来的地图,放置在parentDiv容器之上;

<div style="width: 95%; height: 95%; position: absolute;
	background-color: red; overflow: hidden; " id="parentDiv">
    <div style="z-index: 1; height: 2480px; width: 3280px" id="mapDiv">
    
    </div>
</div>

[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图
**涉及知识点:CSS z-index属性

2.3.1、CSS z-index属性

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。
注意: z-index仅适用于定位元素(position:absolute, position:relative, 或 position:fixed)

  • CSS语法
    z-index: auto|number|inherit;
  • 属性值
    性值 描述
    uto 将堆栈顺序设置为等于其父项。 这是默认的
    umber 设置元素的堆栈顺序。 允许使用负数
    nherit 从其父元素继承此属性。

2.4、实现【键盘上下左右操作】

让【游戏地图层】在【游戏窗口层】可视区域内上下作用移动,并实现边界功能
[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

<script>
		//文档准备好之后开始执行
        window.onload = function () {
            init();
        }

        var mapDivEle;
        var parentDivEle;
        var stepDistance = 20;
        
		/**
         * 定义游戏窗口层、游戏地图层,并渲染页面
         */
        function init() {

            // 定义游戏窗口层
            parentDivEle = document.getElementById("parentDiv");
            // 定义游戏地图层
            mapDivEle = document.getElementById('mapDiv');

			//渲染地图
            loadData();
        }

        /**
         *  渲染地图
         * @param mapData
         */
        function loadData() {
            // 加载地图
            mapDivEle.style.background= 'url("../img/item/bg/os.jpg")';
        }
        
		/**
         * 定义 键盘上下左右事件
         * 并判断边界
         * @param e
         */
        var keydown = function (e) {
            if (e.keyCode == 37) {
                console.log("向左")
                if( Number(mapDivEle.style.marginLeft.replaceAll("px", "")) < 0 ) {
                    mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) + stepDistance + "px";
                } else {
                    console.log("超出边界")
                }
            } else if (e.keyCode == 38) {
                console.log("向上")
                if( Number(mapDivEle.style.marginTop.replaceAll("px", "")) < 0 ) {
                    mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) + stepDistance + "px";
                } else {
                    console.log("超出边界")
                }
            } else if (e.keyCode == 39) {
                console.log("向右")
                if ( (parentDivEle.clientWidth) - mapDivEle.clientWidth + stepDistance <= Number(mapDivEle.style.marginLeft.replaceAll("px", ""))) {
                    mapDivEle.style.marginLeft = Number(mapDivEle.style.marginLeft.replaceAll("px", "")) - stepDistance + "px";
                } else {
                    console.log("超出边界")
                }
            } else if (e.keyCode == 40) {
                console.log("向下")
                if( (parentDivEle.clientHeight) - mapDivEle.clientHeight + stepDistance <= Number(mapDivEle.style.marginTop.replaceAll("px", "")) ) {
                    mapDivEle.style.marginTop = Number(mapDivEle.style.marginTop.replaceAll("px", "")) - stepDistance + "px";
                } else {
                    console.log("超出边界")
                }
            }
        }
</script>

<body onkeydown="keydown(event)">
	......
</body>

总结

以上就是今天要讲的内容,本文仅仅简单介绍地图的移动,后续以此为基本,实现地图跟随英雄人物动态移动功能。文章来源地址https://www.toymoban.com/news/detail-650629.html

到了这里,关于[JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

  • 键盘按键事件 通过键盘上下左右按键移动界面上图标

    #main.c文件 #include “keyevent.h” #include int main(int argc, char *argv[]) { QApplication a(argc, argv); KeyEvent w; w.show(); } #include “keyevent.h”//头文件 #ifndef KEYEVENT_H #define KEYEVENT_H #include #include #include class KeyEvent : public QWidget { Q_OBJECT public: KeyEvent(QWidget *parent = 0); ~KeyEvent(); void drawPix(); void keyPre

    2024年02月09日
    浏览(50)
  • vxe表格实现键盘上下左右方向键移动聚焦

    vxe 表格分为 vxe-table 一般表格和 vxe-grid 高级表格,两者之间的区别我就不说啦,我们来实现这两种表格用键盘按动上下左右方向键达到移动聚焦的效果。话不多说,上正文!!! 首先在标签放入这两个事件: 主要是利用vxe表格内置的@cell-click事件,来监听点击单元格的行号

    2024年02月07日
    浏览(78)
  • elementui表格插槽使用的input输入框,添加键盘快捷键上下左右箭头,获取焦点

    给表格行、列赋值index;获取表格的总列数 在el-table 添加 :cell-class-name=\\\"tableRowClassName\\\" 当某个单元格被点击时 获取行列 触发及键盘事件 @cell-click=\\\"handleCellClick\\\" 给input赋值id

    2024年02月02日
    浏览(49)
  • 参考 | 解决iPad向日葵远程Windows电脑无法使用蓝牙键盘上下左右tab键的问题

    本人一级懒狗,一向不喜欢背电脑出门,带个iPad和蓝牙键盘出门写代码才是最爱,所以我一直是向日葵的死忠粉。在以前一直没有什么问题,我大概记得2021年11月左右,向日葵新推一款蓝牙鼠标,可以适配向日葵的时候,真的欣喜若狂,因为在IOS上鼠标一直是个让人头疼的问

    2024年02月04日
    浏览(64)
  • Unity3D摄像机,键盘控制前后左右上下移动,鼠标控制旋转、放缩

    Unity3D中运行场景时,实现摄像机的前、后、左、右、上、下,以及鼠标滚轮的放缩,鼠标右键的旋转操作。亲测有效,可供参考。 按键功能介绍:W——前;S——后;A——左;D——右;Q——下降;E——上升;鼠标右键——旋转;鼠标滚轮——放缩。 Tourcamera脚本需要挂在摄

    2024年02月11日
    浏览(60)
  • 【ipad+向日葵远程控制】解决ipad上在向日葵中无法使用上下左右键、Tab键(解决方法是:在ipad上安装旧版本向日葵11.2.2,配合使用的是罗技K380键盘)

    如何下载老版本的ipad软件? - 我真的爱发明的回答 - 知乎 参考 | 解决iPad向日葵远程Windows电脑无法使用蓝牙键盘上下左右tab键的问题 解决ipad上在向日葵中无法使用上下左右键、Tab键 解决方法是:在ipad上下载旧版本 向日葵11.2.2 因此,下文的操作目的是:借助3个工具,实现在

    2024年02月10日
    浏览(67)
  • [JavaScript游戏开发] Q版地图上让英雄、地图都动起来

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

    2024年02月14日
    浏览(28)
  • Unity:鼠标【上下左右滑动时】控制相机【左右张望】和【上下抬头】

    相机旋转,看着是小事,但是却关系到用户的直观体验。旋转对了母慈子孝,旋转错了则翻江倒海。 鼠标左右移动时,控制相机左右转动 鼠标上下移动时,控制相机抬头低头 你可以在GPT里提问,他的回答也很给力,能转,但是都不符合人体的看东西的特点。 后来还是的自己

    2024年02月10日
    浏览(55)
  • 用css来实现上下左右箭头

       

    2024年02月12日
    浏览(65)
  • [Python中矩阵上下左右翻转(np.flip)]

    [Python中矩阵上下左右翻转(np.flip)] 现代编程语言和相关库的发展,使得数值计算和数据处理变得更加便捷和高效。在Python中,NumPy库是众多数据科学和工程应用领域的重要支撑之一。其中,np.flip函数可以用于进行矩阵的上下左右翻转操作,是我们在处理图像、信号、物理模

    2024年02月12日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包