目录
一、鼠标移动跟随
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 type="text/javascript">
var app=new PIXI.Application(512,768);
document.body.appendChild(app.view);
function add(img,x,y){
//创建图片元素
var a=new PIXI.Sprite.fromImage(img);
//将元素添加到页面中
app.stage.addChild(a);
//调整位置
a.x=x
a.y=y
//对当前元素直接开启监听
a.interactive=true;
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 zuobiao=new PIXI.Text("坐标:");
app.stage.addChild(zuobiao);
zuobiao.style.fill="#000000";
zuobiao.x=50;
zuobiao.y=40;
//为背景设置鼠标移动事件绑定
bg.on("mousemove",mousemove);
//提供函数
function mousemove(event){
//获取鼠标触发时的坐标
var pos=event.data.getLocalPosition(app.stage)
//飞机元素鼠标跟随
plane.x=pos.x
plane.y=pos.y
//将坐标显示到页面上
zuobiao.text = "坐标 X:"+pos.x+"\n"+"坐标 Y:" + pos.y
}
</script>
运行效果:
其中:zuobiao.text = "坐标 X:"+pos.x+"\n"+"坐标 Y:" + pos.y
这句代码使用了字符拼接,将" "内的字符用 + 和获取到的字符进行了拼接
"\n" 是 转义字符 表示换行
我们可以看到这样坐标显示的总有一大串小数,我们不需要那么精确,小数太多反而影响观看,因此可以使用取整。
取整常用有方法:
//向上取整
Math.ceil(参数)
//向下取整
Math.floor()
//忽略小数部分
parseInt(参数)
然后我们对原代码进行编辑修改。
修改函数内的代码为:
//提供函数
function mousemove(event){
//获取鼠标触发时的坐标
var pos=event.data.getLocalPosition(app.stage)
//飞机元素鼠标跟随
plane.x=pos.x
plane.y=pos.y
//对获取到的坐标进行取整
var zx=Math.ceil(pos.x)
var zy=Math.ceil(pos.y)
//将坐标显示到页面上
zuobiao.text = "坐标 X:"+zx+"\n"+"坐标 Y:" + zy
}
我们可以看到此时的坐标均为整数:
此时坐标显示便于观看。
二、锚点、元素组合
2.1 锚点
元素的锚点,也可以叫做定位点,指元素以x,y哪个点来对齐该坐标。
语法格式:
元素.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):添加元素的本地路径
-120,10:添加元素位于被添加元素锚点的坐标
注意:辅元素添加到主元素中时,辅元素的默认起始位置等于主元素的锚点 当为辅元素设置位置时(x,y),x与y表示的是辅元素与主元素之间的距离。
代码:
<script type="text/javascript">
var app=new PIXI.Application(500,700);
document.body.appendChild(app.view);
function add(img,x,y){
//创建图片元素
var a=new PIXI.Sprite.fromImage(img);
//将元素添加到页面中
app.stage.addChild(a);
//调整位置
a.x=x
a.y=y
//对当前元素直接开启监听
a.interactive=true;
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 pos=event.data.getLocalPosition(app.stage)
plane.x=pos.x;
plane.y=pos.y;
}
//将元素添加到另一个元素中
var liaoji1 = add("img/liaoji1.png", -120, 10)
var liaoji2 = add("img/liaoji2.png", 60, 10)
//将元素添加到舞台中
plane.addChild(liaoji1,liaoji2);
</script>
运行效果:
此时小飞机跟随大飞机的移动,它和大飞机成为一个整体。
三、图片图层
图片图层:图片在应用窗口的层级
默认图层效果:先插入的元素低于后插入的元素(后插入的元素会遮盖先插入的元素)
合并元素图层效果:辅元素会与主元素图层一致并将主元素向下压一级(辅元素会遮盖主元素) 原来遮盖主元素的其他元素,现在将同时遮盖主元素与辅元素
<script type="text/javascript">
var 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 type="text/javascript">
var app=new PIXI.Application(600,380);
document.body.appendChild(app.view);
function add(img,x,y){
//创建图片元素
var a=new PIXI.Sprite.fromImage(img);
//将元素添加到页面中
app.stage.addChild(a);
//调整位置
a.x=x
a.y=y
//对当前元素直接开启监听
a.interactive=true;
return a;
}
var bg = add("img/bg.png",0,0);
var shen = add("img/image1390.png", 300, 250);
var zuo=add("img/zuo.png", 20, 250);
var you=add("img/you.png", 90, 250);
//
shen.anchor.set(0.5);
//初始为左
shen.scale.x = 1
zuo.on("click",fzuo);
you.on("click",fyou);
function fzuo(){
if(shen.scale.x == 1){
shen.x-=20;
}else{
shen.scale.x = 1
// shen.x+=20;
}
}
function fyou(){
if(shen.scale.x == -1){
shen.x+=20;
}else{
shen.scale.x = -1
// shen.x+=20;
}
}
//将元素添加到另一个元素中
var jiao = add("img/image1334.png", 0,18 )
shen.addChild(jiao);
//将元素添加到舞台中
</script>
运行效果:
例题二代码:
<script type="text/javascript">
var app=new PIXI.Application(800,600);
document.body.appendChild(app.view);
function add(img,x,y){
//创建图片元素
var a=new PIXI.Sprite.fromImage(img);
//将元素添加到页面中
app.stage.addChild(a);
//调整位置
a.x=x;
a.y=y;
//对当前元素直接开启监听
a.interactive=true;
return a;
}
var bg = add("img/bg.jpg",0,0);
var miao = add("img/miao.png",0,0);
//设置瞄准锚点
miao.anchor.set(0.5);
var zuobiao=new PIXI.Text("坐标:");
app.stage.addChild(zuobiao);
zuobiao.style.fill="000000";
zuobiao.x=30;
zuobiao.y=500;
bg.on("mousemove",mousemove);
miao.on("click",danmove);
function danmove(event){
var pos=event.data.getLocalPosition(app.stage)
add("img/dan.png",pos.x,pos.y);
}
//瞄准镜瞄准移动 添加坐标函数
function mousemove(event){
var pos=event.data.getLocalPosition(app.stage)
miao.x=pos.x;
miao.y=pos.y;
//将坐标显示到页面上
zuobiao.text="X:"+Math.ceil(pos.x)+"\n"+"Y:"+Math.ceil(pos.y);
}
</script>
运行结果:
本文所用到的图片以及项目源码:
https://download.csdn.net/download/qq_56376552/89412764
总结
本文 鼠标跟随、元素组合与图片位控 就此结束,
如有错误或者网址更新,步骤更改,代码错误欢迎私信作者进行更正,
感谢您的观看。