目录
前言
为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 HBuilderX。
下文所有截图使用此集成工具，读者随意。
此系列文章需要：HTML ，JavaScript 基础知识
操作系统：
版本 Windows 11 家庭中文版
版本 23H2
安装日期 2024/5/28
操作系统版本 22631.3593
体验 Windows Feature Experience Pack 1000.22700.1003.0
一、常用元素属性
元素属性可以分成两类
公共属性：所有的元素都有的属性（例如x，y）
独有属性：只作用与某一种元素（style.fill字体颜色）
| 属性类别 | 属性名称 | 作用 |
|---|---|---|
| 公共属性 | x | 调整元素水平位置 |
| 公共属性 | y | 调整元素垂直位置 |
| 公共属性 | width | 调整元素宽度 |
| 公共属性 | heigh | 调整元素高度 |
| 公共属性 | scale | 调整元素的缩小和放大的比例 缩小取值（0-1之间） （例：js4.scale.x = 0.5） 放大取值（1-n之间） （例：js4.scale.y = 0.5） 用于水平翻转 （元素名.scale.x = -1） 用于垂直翻转 （元素名.scale.y = -1） |
| 公共属性 | visible | 设置元素是否可见 （0或者false表示元素不可见，1或者true表示元素可见） |
| 公共属性 | alpha | 设置元素透明度（0-1） |
| 文本属性 | text | 设置文本 |
| 文本属性 | style | fill：设置字体颜色 fontSize:设置字体大小 fontWeight:字体加粗 fontFamily:字体 |
代码：
<script type="text/javascript">
//创建应用窗口
var app=new PIXI.Application(1008,640)
//添加窗口到页面
document.body.appendChild(app.view)
//创建背景图片元素
var bg=new PIXI.Sprite.fromImage("img/bg.png")
//添加图片到窗口
app.stage.addChild(bg)
//创建僵尸图片元素
var js=new PIXI.Sprite.fromImage("img/js.png")
//添加图片到窗口
app.stage.addChild(js)
//设置僵尸的水平坐标
js.x=400
//设置僵尸的垂直坐标
js.y=300
//设置僵尸的元素宽度
js.width=50
//设置僵尸的元素高度
js.heigh=10
//僵尸水平翻转
js.scale.x=-1
//僵尸可见
js.visible=1
//僵尸透明度
js.alpha=0.8
</script>运行结果：
二、函数
函数是一段可以反复执行的功能性代码，将功能代码定义到函数中通过反复执行来降低代码的冗余，提高程序的可 拓展性，可维护性。
2.1 定义与调用函数语法
定义：
function 函数名(参数列表){
函数体
}
调用：
函数名();
注释：
function：关键字
函数名：函数的标识
（参数列表）：调用时，接收的一些数据。
函数体：函数需要实现的功能
代码：
<script type="text/javascript">
//定义一个函数：
function speak(str){
//函数功能为控制台输出语句
console.log(str);
}
//调用函数
speak("三十功名尘与土")
speak("八千里路云和月")
</script>运行截图：
此代码中 str 为函数的参数，用来接收一些数据，可以使函数的功能更强大更灵活。
函数执行流程： 程序中代码顺序执行，当程序发现当前代码为函数调用时，则会找到被调用的函数，执行完毕之后回到函数调用 处，继续向下执行。
三、事件
事件：表示用户在应用界面所做的操作 例如，单击，双击，移动 事件触发：当用户在操作某个元素时，不同的操作会触发不同的事件。
事件处理：当用户触发某种事件（操作）可以执行一段代码来响应用户的操作
3.1 鼠标常用的事件介绍与监听事件
鼠标事件：指通过鼠标操作才能触发的事件
| 事件名称 | 触发操作 |
|---|---|
| click | 单击 |
| mousedown | 按下 |
| mouseup | 松开 |
| mouseover | 移入 |
| mouseout | 移除 |
| mousemove | 移动 |
监听处理事件
监听：监视用户在某个元素中触发了什么事件
元素只有被监听后，程序才会关注用户在元素中触发的事件
代码：
<script type="text/javascript">
//创建应用窗口
var app=new PIXI.Application(1008,640)
//添加窗口到页面
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 js=add("img/js.png",400,300)
//创建阳光元素
var sun=add("img/sun.png",600,200)
//创建点击事件
function fsun(){
//点击阳光，阳光消失
sun.visible=0
}
//为个阳光元素绑定点击事件
sun.on("click",fsun);
</script>运行效果：
四、实战
例题一：植物大战僵尸收阳光：
要求：
- 窗口大小为：(1008,640）
- 拼接完成 植物大战僵尸图片
- 实现点击阳光 阳光消失 得分增加
示范图：
例题二：斗地主-手牌选择
要求：
- 窗口大小为：(1008,640）
- 拼接完成 斗地主 图片
- 点击其中一张手牌 手牌上升 再点击一次手牌下降
示范图：
例题一代码：
<script type="text/javascript">
//创建应用窗口
var app = new PIXI.Application(1008,640)
//添加窗口到页面
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 js=add("img/js.png",500,450)
var js2=add("img/js2.png",300,200)
var js3=add("img/js3.png",400,450)
var js4=add("img/js4.png",600,150)
var sun1=add("img/sun.png",400,100)
var sun2=add("img/sun.png",500,300)
var sun3=add("img/sun.png",600,286)
var item=add("img/item.png",0,0)
//创建得分
var score = 0
var scoreText = new PIXI.Text(score)
app.stage.addChild(scoreText)
scoreText.x = 20
scoreText.y = 60
sun1.on("click",fsun1)
sun2.on("click",fsun2)
sun3.on("click",fsun3)
function fsun1(){
//点击阳光，阳光消失
sun1.visible = 0
//调用更新阳光的函数
update()
}
function fsun2(){
//点击阳光，阳光消失
sun2.visible = 0
//调用更新阳光的函数
update()
}
function fsun3(){
//点击阳光，阳光消失
sun3.visible = 0
//调用更新阳光的函数
update()
}
//更新阳光
function update(){
score += 50
scoreText.text = score
}
</script>运行结果：
例题二代码：
<script type="text/javascript">
//创建应用窗口
var app = new PIXI.Application(1008,640)
//添加窗口到页面
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 bg2=add("img/bg2.png",0,0)
var dou0=add("img/dou0.png",420,450)
var dou1=add("img/dou1.png",500,450)
var dou2=add("img/dou2.png",580,450)
var dou3=add("img/dou3.png",660,450)
var dou4=add("img/dou4.png",740,450)
dou2.on("click",fdou2)
dou3.on("click",fdou3)
function fdou2(){
//点击手牌手牌上升
if(dou2.y==450){
dou2.y -= 100
}else{
dou2.y += 100
}
}
function fdou3(){
//点击手牌手牌上升
if(dou3.y==450){
dou3.y -= 100
}else{
dou3.y += 100
}
}
</script>运行效果：
本篇文章所有 实战源码
地址：https://download.youkuaiyun.com/download/qq_56376552/89385318?spm=1001.2014.3001.5503
总结
本文 属性、函数、事件 就此结束，
如有错误或者网址更新，步骤更改，代码错误欢迎私信作者进行更正，
感谢您的观看。
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
