咋做网站,seo整站优化服务,永久新域名225222,企业管理咨询公司招聘目录 一、鼠标移动跟随 1.1 获取鼠标坐标 1.2 鼠标跟随 二、锚点、元素组合 2.1 锚点 2.2 元素组合 三、图片图层 四、实战 例题一#xff1a;完成合金弹头人物交互 例题二#xff1a;反恐重击瞄准和弹痕 例题一代码#xff1a; 例题二代码#xff1a; 总结 前言 为了提高作…目录 一、鼠标移动跟随 1.1 获取鼠标坐标 1.2 鼠标跟随 二、锚点、元素组合 2.1 锚点 2.2 元素组合 三、图片图层 四、实战 例题一完成合金弹头人物交互 例题二反恐重击瞄准和弹痕 例题一代码 例题二代码 总结 前言 为了提高作者的代码编辑水品作者在使用博客的时候使用的集成工具为 HBuilderX。
下文所有截图使用此集成工具读者随意。
此系列文章需要HTML JavaScript 基础知识 操作系统 版本 Windows 11 家庭中文版 版本 23H2 安装日期 2024/5/28 操作系统版本 22631.3593 体验 Windows Feature Experience Pack 1000.22700.1003.0 一、鼠标移动跟随
1.1 获取鼠标坐标
程序会记录鼠标在元素中触发时间的坐标位置x,y[监听器引入] 我们可以通过在自定义函数中设置参数获取触发事件时的x,y getlocalPosition() 获取某个元素鼠标事件的触发位置 实例
function move(event){var pos event.data.getLocalPosition(app.stage);var x pos.x ;var y pos.y ;console.log(当前水平坐标为x 当前垂直坐标为y)}
注释
event触发的事件
data数据
getlocalPosition()获取某个元素鼠标事件的触发位置
var x pos.x ;获取事件触发时的x坐标
var y pos.y ;获取事件触发时的y坐标 任意一种鼠标事件都可以通过以上案例的方式获取到鼠标坐标。 1.2 鼠标跟随
鼠标跟随就是控制元素可以跟着鼠标指针一起移动。 思路
鼠标移动触发mousemove事件
在事件中通过event.data.getLocalposition(app.stage)获取当前鼠标坐标(x,y)
把当前获取到的x,y设置为图片元素定位坐标 代码
script typetext/javascriptvar appnew PIXI.Application(512,768);document.body.appendChild(app.view); function add(img,x,y){//创建图片元素var anew PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.xxa.yy //对当前元素直接开启监听a.interactivetrue;return a;}//添加背景var bg add(img/bg_01.png,0,0); //添加飞机var plane add(img/plane_blue_01.png, 100, 300);//设置飞机锚点plane.anchor.set(0.5);var zuobiaonew PIXI.Text(坐标);app.stage.addChild(zuobiao);zuobiao.style.fill#000000;zuobiao.x50;zuobiao.y40;//为背景设置鼠标移动事件绑定bg.on(mousemove,mousemove);//提供函数function mousemove(event){//获取鼠标触发时的坐标var posevent.data.getLocalPosition(app.stage)//飞机元素鼠标跟随plane.xpos.xplane.ypos.y//将坐标显示到页面上 zuobiao.text 坐标 Xpos.x\n坐标 Y pos.y}/script
运行效果 其中zuobiao.text 坐标 Xpos.x\n坐标 Y pos.y
这句代码使用了字符拼接将 内的字符用 和获取到的字符进行了拼接
\n 是 转义字符 表示换行 我们可以看到这样坐标显示的总有一大串小数我们不需要那么精确小数太多反而影响观看因此可以使用取整。
取整常用有方法
//向上取整
Math.ceil(参数)//向下取整
Math.floor()//忽略小数部分
parseInt(参数)
然后我们对原代码进行编辑修改。
修改函数内的代码为 //提供函数function mousemove(event){//获取鼠标触发时的坐标var posevent.data.getLocalPosition(app.stage)//飞机元素鼠标跟随plane.xpos.xplane.ypos.y//对获取到的坐标进行取整var zxMath.ceil(pos.x)var zyMath.ceil(pos.y)//将坐标显示到页面上 zuobiao.text 坐标 Xzx\n坐标 Y zy}我们可以看到此时的坐标均为整数 此时坐标显示便于观看。 二、锚点、元素组合 2.1 锚点
元素的锚点也可以叫做定位点指元素以xy哪个点来对齐该坐标。
语法格式 元素.anchor.set(值,值) 实例
plane.anchor.set(1,1);2.2 元素组合
将独立的多个元素合并到一起视为一个整体便于程序对多个元素的统一处理。 //将元素添加到另一个元素中var liaoji1 add(img/liaoji1.png, -120, 10)var liaoji2 add(img/liaoji2.png, 60, 10)//将元素添加到舞台中plane.addChild(liaoji1,liaoji2);
liaoji1添加元素定义的名称
add(img/liaoji1.png, -120, 10)添加元素的本地路径
-12010添加元素位于被添加元素锚点的坐标 注意辅元素添加到主元素中时辅元素的默认起始位置等于主元素的锚点 当为辅元素设置位置时x,yx与y表示的是辅元素与主元素之间的距离。 代码 script typetext/javascriptvar appnew PIXI.Application(500,700);document.body.appendChild(app.view); function add(img,x,y){//创建图片元素var anew PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.xxa.yy //对当前元素直接开启监听a.interactivetrue;return a;}var bg add(img/bg_01.png,0,0); var plane add(img/plane_blue_01.png, 250, 350);plane.anchor.set(0.5,0.5);//为个元素绑定移动事件bg.on(mousemove,planemove);function planemove(event){var posevent.data.getLocalPosition(app.stage)plane.xpos.x;plane.ypos.y;}//将元素添加到另一个元素中var liaoji1 add(img/liaoji1.png, -120, 10)var liaoji2 add(img/liaoji2.png, 60, 10)//将元素添加到舞台中plane.addChild(liaoji1,liaoji2);/script
运行效果 此时小飞机跟随大飞机的移动它和大飞机成为一个整体。 三、图片图层
图片图层图片在应用窗口的层级
默认图层效果先插入的元素低于后插入的元素后插入的元素会遮盖先插入的元素
合并元素图层效果辅元素会与主元素图层一致并将主元素向下压一级辅元素会遮盖主元素 原来遮盖主元素的其他元素现在将同时遮盖主元素与辅元素 script typetext/javascriptvar app new PIXI.Application(1008,640);document.body.appendChild( app.view );//第一个元素,层级最低的元素 主元素var bg new PIXI.Sprite.fromImage(img/bg1.png);bg.x 0;bg.y 0;app.stage.addChild(bg);//第二个元素 此图层高于背景var js new PIXI.Sprite.fromImage(img/js1.png);js.x 600;js.y 400;app.stage.addChild(js);/script
效果展示 注意当两个元素合并时辅元素的默认宽高会受到主元素的影响如果不希望辅元素受到影响需要 为辅元素单独设置宽高。 四、实战
例题一完成合金弹头人物交互
要求
创建应用宽600高380.左右键人物移动转身。人物上半身下半身应该是主辅元素的关系
结果图 例题二反恐重击瞄准和弹痕
要求
创建应用宽800高600.瞄准镜瞄准移动显示坐标按下鼠标留下弹坑
示范图 例题一代码 script typetext/javascriptvar appnew PIXI.Application(600,380);document.body.appendChild(app.view); function add(img,x,y){//创建图片元素var anew PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.xxa.yy //对当前元素直接开启监听a.interactivetrue;return a;}var bg add(img/bg.png,0,0); var shen add(img/image1390.png, 300, 250);var zuoadd(img/zuo.png, 20, 250);var youadd(img/you.png, 90, 250);//shen.anchor.set(0.5);//初始为左shen.scale.x 1zuo.on(click,fzuo);you.on(click,fyou);function fzuo(){if(shen.scale.x 1){shen.x-20;}else{shen.scale.x 1// shen.x20;} }function fyou(){if(shen.scale.x -1){shen.x20;}else{shen.scale.x -1// shen.x20;} }//将元素添加到另一个元素中var jiao add(img/image1334.png, 0,18 )shen.addChild(jiao);//将元素添加到舞台中/script
运行效果 例题二代码 script typetext/javascriptvar appnew PIXI.Application(800,600);document.body.appendChild(app.view); function add(img,x,y){//创建图片元素var anew PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.xx;a.yy;//对当前元素直接开启监听a.interactivetrue;return a;}var bg add(img/bg.jpg,0,0); var miao add(img/miao.png,0,0);//设置瞄准锚点miao.anchor.set(0.5);var zuobiaonew PIXI.Text(坐标);app.stage.addChild(zuobiao);zuobiao.style.fill000000;zuobiao.x30;zuobiao.y500;bg.on(mousemove,mousemove);miao.on(click,danmove);function danmove(event){var posevent.data.getLocalPosition(app.stage)add(img/dan.png,pos.x,pos.y);}//瞄准镜瞄准移动 添加坐标函数function mousemove(event){var posevent.data.getLocalPosition(app.stage) miao.xpos.x;miao.ypos.y;//将坐标显示到页面上zuobiao.textXMath.ceil(pos.x)\nYMath.ceil(pos.y);}/script
运行结果 本文所用到的图片以及项目源码
https://download.csdn.net/download/qq_56376552/89412764 总结
本文 鼠标跟随、元素组合与图片位控 就此结束
如有错误或者网址更新步骤更改代码错误欢迎私信作者进行更正
感谢您的观看。
