补充：更改图片的大小

1、设置元素宽度 用于控制元素显示大小

plane.width = 100; plane.height = 230;

2、设置元素缩放比例 scale

缩放：plane.scale.x = 0.5; (水平方向) plane.scale.y = 0.5; (垂直方向)

反转：plane.scale.x= -1 ; 水平翻转180° plane.scale.y = -1 ; 垂直翻转180°

旋转：1、plane.rotation = 1； 1 表示弧度

2、plane.rotation = Math.PI ； Math.PI 表示180° （角度换算）

3、设置元素旋转角度 rotation

1、plane.rotation = 1； 1 表示弧度

2、plane.rotation = Math.PI ； Math.PI 表示180° （角度换算）

4、设置元素是否可见 visible

隐藏： plane.visible = false; 显示：plane.visible = true; visible默认值：true

5、设置元素的透明度 alpha

1表示完全不透明：plane.alpha = 1;

0表示完全透明即隐藏 plane.alpha = 0;

0-1之间： 半透明

6、设置文字颜色 fill

txt.style.fill = 0xffffff;

7、设置文字大小 fontsize

txt.style.fontsize = 20 ;

8、设置文字加粗

txt.style.fontweight = "bold" ;

9、设置文本内容为斜体

txt.style.fontstyle= "italic" ;

10、显示文本内容

txt.text = "内容" ；

一：游戏显示

1、添加显示元素

目标：飞机大战

//创建一个应用app，宽度 400、高度 400的显示区域。
var app = new PIXI.Application(400,400);
//将应用app的显示区域添加到浏览器中
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
//创建一个名称为plane的图片，显示图片的路径：/page2/res/plane_blue_01.png
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
var start = new PIXI.Sprite.fromImage("res/plane/ui/ui_new_battle_png_03.png");app.stage.addChild(bg);
app.stage.addChild(start);
//将图片显示元素 plane ，添加到应用app的舞台中。
app.stage.addChild(plane);//创建名称为 defen 的文字显示元素，显示内容为“得分：1000000”
var defen = new PIXI.Text("飞机大战游戏真好玩！");
//将名为 defen 的文字显示元素，添加到应用 app 的舞台中
app.stage.addChild(defen);
//设置字体颜色为白色
defen.style.fill = 0xffffff;//设置 defen 文本的显示位置
defen.y = 200;

完成效果图：

练习一：拼接竹子

//创建应用
var app = new PIXI.Application(400,430);
//显示创建的应用
document.body.appendChild(app.view);//添加背景图片var bg = new PIXI.Sprite.fromImage("http://www.yyfun001.com/newlession/res/lianxi/zhuzi/bg.png");//显示添加的背景图片
app.stage.addChild(bg);
//添加竹子
var zhu1 = new PIXI.Sprite.fromImage("http://www.yyfun001.com/newlession/res/lianxi/zhuzi/zhuzi.png");
//显示添加的竹子
app.stage.addChild(zhu1);
//设置竹子的显示位置
zhu1.x = 200;
zhu1.y = 50;var zhu2 = new PIXI.Sprite.fromImage("http://www.yyfun001.com/newlession/res/lianxi/zhuzi/zhuzi.png");
app.stage.addChild(zhu2);
zhu2.x = 200;
zhu2.y = 50+88;var zhu3 = new PIXI.Sprite.fromImage("http://www.yyfun001.com/newlession/res/lianxi/zhuzi/zhuzi.png");
app.stage.addChild(zhu3);
zhu3.x = 200;
zhu3.y = 50+88+88;var zhu4 = new PIXI.Sprite.fromImage("http://www.yyfun001.com/newlession/res/lianxi/zhuzi/zhuzi.png");
app.stage.addChild(zhu4);
zhu4.x = 200;
zhu4.y = 50+88+88+88;

完成效果图：

练习2：屏幕保护系统

var app = new PIXI.Application(500,350);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/lianxi/screenProtect/bg.png");
app.stage.addChild(bg);var ball = new PIXI.Sprite.fromImage("res/lianxi/screenProtect/ball.png");
app.stage.addChild(ball);
ball.x = 370;
ball.y = 170;var txt = new PIXI.Text("屏幕保护系统");
app.stage.addChild(txt);

完成效果图：

练习3：赛车游戏界面

var app = new PIXI.Application(480,800);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/racer/bg.jpg");
app.stage.addChild(bg);var car = new PIXI.Sprite.fromImage("res/racer/saiche-3_03.png");
app.stage.addChild(car);
car.x = 180;
car.y = 280;var car1 = new PIXI.Sprite.fromImage("res/racer/saiche-2_03.png");
app.stage.addChild(car1);
car1.x = 280;
car1.y = 600;

完成效果图：

章节测试：

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("http://www.yyfun001.com/lesson/res/bg_01.png");
app.stage.addChild(bg);var plane = new PIXI.Sprite.fromImage("http://www.yyfun001.com/lesson/res/plane_blue_01.png");
app.stage.addChild(plane);
plane.x = 104;
plane.y = 139;var score = new PIXI.Text("得分：560");
app.stage.addChild(score);
score.x =180;
score.y =50;
score.style.fill = 0xffffff;

完成效果图：

2、显示元素的属性

目标：

var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);var plane1 = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane1);
//设置x、y坐标
plane1.x = 300;
plane1.y = 300;var plane2 = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane2);
plane2.x = 400;
plane2.y = 50;
//设置宽高
plane2.width = 100;
plane2.height = 80;var plane3 = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane3);
//设置缩放比例
plane3.scale.x = 2;
plane3.scale.y = 2;var plane4 = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane4);
plane4.x = 200;
plane4.y = 300;
//设置旋转
plane4.rotation = Math.PI / 2;

完成效果图：

章节测试1:

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
var plane = new PIXI.Sprite.fromImage("http://www.youyu001.com/lesson/res/plane_blue_01.png");
app.stage.addChild(plane);
plane.x = 132;
plane.y = 116;
plane.rotation = Math.PI /3;var enemy = new PIXI.Sprite.fromImage("http://www.youyu001.com/lesson/res/enemy_02.png");
app.stage.addChild(enemy);
enemy.x = 232;
enemy.y = 199;
enemy.rotation = Math.PI /2;

完成效果图：

章节测试2：

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);var plane = new PIXI.Sprite.fromImage("http://www.youyu001.com/lesson/res/plane/main/img_plane_boss_15.png");
app.stage.addChild(plane);plane.width = 249;
plane.height = 186;

完成效果图：

章节测试3：

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);var plane = new PIXI.Sprite.fromImage("http://www.youyu001.com/lesson/res/plane/main/img_plane_boss_15.png");
app.stage.addChild(plane);
plane.scale.x = 0.27;
plane.scale.y = 0.90;

完成效果图：

3、图片路径与资源商城

目标：

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);//绝对路径
var plane1 = new PIXI.Sprite.fromImage("/res/plane/main/img_plane_enemy_04.png");
app.stage.addChild(plane1);//相对路径
var plane2 = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");
plane2.x = 200;
plane2.y = 250;
app.stage.addChild(plane2);

完成效果图：

练习1：植物大战僵尸


var app = new PIXI.Application(1008,640);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/lianxi/zhi/bg1.png");
app.stage.addChild(bg);var wupin = new PIXI.Sprite.fromImage("res/lianxi/zhi/item.png");
app.stage.addChild(wupin);var js4 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js4.png");
app.stage.addChild(js4);
js4.x = 500;
js4.y = 350;var js1 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js1.png");
app.stage.addChild(js1);
js1.x = 800;
js1.y = 350;var js2 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js2.png");
app.stage.addChild(js2);
js2.x = 600;
js2.y = 250;var js3 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js3.png");
app.stage.addChild(js3);
js3.x = 600;
js3.y = 130;var txt = new PIXI.Text("100");
app.stage.addChild(txt);
txt.x = 15;
txt.y = 65;

完成效果图：

练习2：跑酷游戏

var app = new PIXI.Application(800,400);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/pao/bg_back_02.png");
app.stage.addChild(bg);
bg.x = 0;
bg.y = 0;var bg1 = new PIXI.Sprite.fromImage("res/pao/bg_front_02.png");
app.stage.addChild(bg1);
bg1.x = 0;
bg1.y = 200;var ground = new PIXI.Sprite.fromImage("res/pao/ground01_2.png");
app.stage.addChild(ground);
ground.x = 0;
ground.y = 300;var pao = new PIXI.Sprite.fromImage("res/pao/gold.png");
app.stage.addChild(pao);
pao.x = 400;
pao.y = 150;var ext = new PIXI.Sprite.fromImage("res/pao/ext/luzhang004.png");
app.stage.addChild(ext);
ext.x = 550;
ext.y = -170;var player = new PIXI.Sprite.fromImage("res/pao/player003.png");
app.stage.addChild(player);
player.x = 100;
player.y = 220;var jump = new PIXI.Sprite.fromImage("res/pao/jumpBtn.png");
app.stage.addChild(jump);
jump.x = 0;
jump.y = 280;var dun = new PIXI.Sprite.fromImage("res/pao/dunBtn.png");
app.stage.addChild(dun);
dun.x = 650;
dun.y = 280;

完成效果图：

章节任务：

var app = new PIXI.Application(512,768);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);var texiao = new PIXI.Sprite.fromImage("res/texiao/yun02.png");
app.stage.addChild(texiao);
texiao.x = 20;
texiao.y = 140;var plane = new PIXI.Sprite.fromImage("res/plane/plane_blue_01.png");
app.stage.addChild(plane);
plane.x = 200;
plane.y = 600;var ui = new PIXI.Sprite.fromImage("res/plane/ui/2_03.png");
app.stage.addChild(ui);
ui.x = 0;
ui.y = 0;var ui1 = new PIXI.Sprite.fromImage("res/plane/ui/3_03.png");
app.stage.addChild(ui1);
ui1.x = 32;
ui1.y = 0;var ui2 = new PIXI.Sprite.fromImage("res/plane/ui/img_ui_16.png");
app.stage.addChild(ui2);
ui2.x = 25;
ui2.y = -5;var item = new PIXI.Sprite.fromImage("res/plane/item/img_plane_item_15.png");
app.stage.addChild(item);
item.x = 100;
item.y = 300;var txt = new PIXI.Text("得分：00000");
app.stage.addChild(txt);
txt.style.fill = 0xffffff;
txt.x = 300;

完成效果图：

二、游戏控制

鼠标事件的种类：
1、click：鼠标单击
2、mousedown：按下左键
3、mouseup：松开左键
4、mousemove：鼠标移动
5、mouseover：鼠标进入
6、mouseout：鼠标移开

1、鼠标控制事件

鼠标控制事件的使用

1、允许图片接收控制

bg.interactive = true;

设置bg显示元素，是否可以进行交互事件的开关。

当该值等于 true 时，on 监听事件有效。

2、给图片bg添加click鼠标事件

bg.on("click", move);

指定，当图片bg被点击时，通知计算机执行 move 函数的内容。

click：代表控制事件的名称

move：代表执行函数的名称

3、定义move函数，让飞机移动

function move(){

feiji.x += 10;

}

当点击bg图片时，计算机会执行move函数中的内容。

function：代表定义一个函数

move：代表函数的名称

左花括号：代表函数的开始

右花括号：代表函数的结束

feiji.x += 10：是函数中的内容，作用是让图片feiji的x坐标每次增加10像素

触屏常用事件介绍

触屏事件，是指通过手指触碰屏幕，来控制显示元素的变化

1) touchstart

介绍

当手指触摸屏幕时，会发生touchstart事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);

app.stage.addChild(bg);

bg.interactive = true;

bg.on(“touchstart”,函数名);

2) touchend

介绍

当手指离开屏幕时，会发生touchend事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);

app.stage.addChild(bg);

bg.interactive = true;

bg.on(“touchend”,函数名);

3) touchmove

介绍

当手指在屏幕上滑动时，会发生touchmove事件

使用方法

var bg = new PIXI.Sprite.fromImage(“res/plane/bg/img_bg_level_3.jpg”);

app.stage.addChild(bg);

bg.interactive = true;

bg.on(“touchmove”,函数名);

触屏事件的使用

1、允许图片接收控制

bg.interactive = true;

设置bg显示元素，是否可以进行交互事件的开关。

当该值等于 true 时，on 监听事件有效。

2、给图片bg添加事件

bg.on("touchstart",moveCar);

给图片bg添加touchstart事件，让程序识别触屏操作

bg.on("click",moveCar);

给图片bg添加click事件，让程序识别鼠标操作

注意：给图片bg同时添加click、touchstart事件，是为了让程序同时识别鼠标和触屏的操作。

3、定义moveCar函数，让小车移动

function moveCar(){

car.y -= 10;

}

当点击bg图片时，计算机会执行moveCar函数中的内容。

function：代表定义一个函数

moveCar：代表函数的名称

左花括号：代表函数的开始

右花括号：代表函数的结束

car.y -= 10：是函数中的内容，作用是让图片car的y坐标每次递减10像素

目标：

var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
var plane = new PIXI.Sprite.fromImage("res/plane/main/img_plane_enemy_04.png");app.stage.addChild(bg);
app.stage.addChild(plane);//允许bg图片，可以被鼠标点击
bg.interactive = true;
//bg图片当被点击时，通知执行 move 函数
bg.on("click",move);function move() {plane.y += 10;
}

完成效果图：

点击图片任意位置，飞机向下移动10像素

练习1：恐龙快打（控制角色方向）

var app = new PIXI.Application(740,460);
document.body.appendChild(app.view);var bg = new PIXI.Sprite.fromImage("res/lianxi/jack/bg.png");
app.stage.addChild(bg);var jack = new PIXI.Sprite.fromImage("res/lianxi/jack/jack.png");
jack.x = 100;
jack.y = 150;
app.stage.addChild(jack);var qj = new PIXI.Sprite.fromImage("res/lianxi/jack/bg1.png");
app.stage.addChild(qj);//添加上按钮，即设置按钮半透明度
var shang = new PIXI.Sprite.fromImage("res/lianxi/jack/shang.png");
app.stage.addChild(shang);
shang.x = 345;
shang.y = 350;
shang.alpha = 0.5;
//添加下按钮，即设置按钮半透明度
var xia = new PIXI.Sprite.fromImage("res/lianxi/jack/xia.png");
app.stage.addChild(xia);
xia.x = 345;
xia.y = 404;
xia.alpha = 0.5;
//添加左按钮，即设置按钮半透明度
var zuo = new PIXI.Sprite.fromImage("res/lianxi/jack/zuo.png");
app.stage.addChild(zuo);
zuo.x = 298;
zuo.y = 378;
zuo.alpha = 0.5;//添加右按钮，即设置按钮半透明度
var you = new PIXI.Sprite.fromImage("res/lianxi/jack/you.png");
app.stage.addChild(you);
you.x = 392;
you.y = 378;
you.alpha = 0.5;//调用函数，点击按钮人物向上移动10像素
shang.interactive = true;
shang.on("click",moveUp);
function moveUp(){jack.y -=10;
}
//调用函数，鼠标放在上按钮为透明度，离开按钮为半透明
shang.on("mouseover",shangIn);
function shangIn(){shang.alpha = 1;
}
shang.on("mouseout",shangOut);
function shangOut(){shang.alpha = 0.5;
}//调用函数，点击按钮人物向下移动10像素
xia.interactive = true;
xia.on("click",moveDown)
function moveDown(){jack.y +=10;
}
//调用函数，鼠标放在上按钮为透明度，离开按钮为半透明
xia.on("mouseover",xiaIn);
function xiaIn(){xia.alpha = 1;
}
xia.on("mouseout",xiaOut);
function xiaOut(){xia.alpha = 0.5;
}//调用函数，点击按钮人物向左移动10像素
zuo.interactive = true;
zuo.on("click",moveleft)
function moveleft(){jack.x -=10;
}
//调用函数，鼠标放在上按钮为透明度，离开按钮为半透明
zuo.on("mouseover",zuoIn);
function zuoIn(){zuo.alpha = 1;
}
zuo.on("mouseout",zuoOut);
function zuoOut(){zuo.alpha = 0.5;
}//调用函数，点击按钮人物向右移动10像素
you.interactive = true;
you.on("click",moveright)
function moveright(){jack.x +=10;
}
//调用函数，鼠标放在上按钮为透明度，离开按钮为半透明
you.on("mouseover",youIn);
function youIn(){you.alpha = 1;
}
you.on("mouseout",youOut);
function youOut(){you.alpha = 0.5;
}

完成效果：

点击按钮来控制人物移动。鼠标放到按钮上呈现完全透明，离开按钮则按钮显示半透明

2、植物大战僵尸（收太阳）

var app = new PIXI.Application(1008,640);
document.body.appendChild(app.view);
// 添加背景图片
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhi/bg1.png");
app.stage.addChild(bg);
// 添加工具选择栏
var item = new PIXI.Sprite.fromImage("res/lianxi/zhi/item.png");
app.stage.addChild(item);
item.x = 10;
item.y = 2;// 添加僵尸1
var zombies = new PIXI.Sprite.fromImage("res/lianxi/zhi/js1.png");
app.stage.addChild(zombies);
zombies.x = 690;
zombies.y = 125;
// 添加僵尸2
var zombies1 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js2.png");
app.stage.addChild(zombies1);
zombies1.x = 845;
zombies1.y = 125;
// 添加僵尸3
var zombies2 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js3.png");
app.stage.addChild(zombies2);
zombies2.x = 850;
zombies2.y = 240;
// 添加僵尸4
var zombies3 = new PIXI.Sprite.fromImage("res/lianxi/zhi/js4.png");
app.stage.addChild(zombies3);
zombies3.x = 775;
zombies3.y = 340;// 添加太阳1
var sunOne = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
app.stage.addChild(sunOne);
sunOne.x = 415;
sunOne.y = 240;
// 添加太阳2
var sunTwo = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
app.stage.addChild(sunTwo);
sunTwo.x = 580;
sunTwo.y = 170;
// 添加太阳3
var sunThree = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
app.stage.addChild(sunThree);
sunThree.x = 520;
sunThree.y = 430;
// 添加字体，设置字体大小
var style = {fontSize: 20,
};
var text = new PIXI.Text("100",style);
var score = 100;
app.stage.addChild(text);
text.x = 29;
text.y = 64;// 调用函数，点击太阳1时，太阳消失
sunOne.interactive = true;
// 调用函数，当鼠标放到太阳1上，鼠标指针变小手形状
sunOne.buttonMode = true;
sunOne.on("click",xiaoshi1);
function xiaoshi1(){sunOne.alpha = 0;
}
// 调用函数，点击太阳2时，太阳消失
sunTwo.interactive = true;
// 调用函数，当鼠标放到太阳2上，鼠标指针变小手形状
sunTwo.buttonMode = true;
sunTwo.on("click",xiaoshi2);
function xiaoshi2(){sunTwo.alpha = 0;
}
// 调用函数，点击太阳3时，太阳消失
sunThree.interactive = true;
// 调用函数，当鼠标放到太阳3上，鼠标指针变小手形状
sunThree.buttonMode = true;
sunThree.on("click",xiaoshi3);
function xiaoshi3(){sunThree.alpha = 0;
}

完成效果：

鼠标放在太阳上鼠标指针变成小手形状，点击太阳，太阳消失

练习3：斗地主手牌选择

var app = new PIXI.Application(1008,640);
document.body.appendChild(app.view);
// 添加背景图
var bg = new PIXI.Sprite.fromImage("res/lianxi/dou/bg.png");
app.stage.addChild(bg);
// 添加扑克牌1
var poker1 = new PIXI.Sprite.fromImage("res/lianxi/dou/dou0.png");
poker1.x = 294;
poker1.y = 467;
app.stage.addChild(poker1);
// 添加扑克牌2
var poker2 = new PIXI.Sprite.fromImage("res/lianxi/dou/dou1.png");
poker2.x = 378;
poker2.y = 467;
app.stage.addChild(poker2);
// 添加扑克牌3
var poker3 = new PIXI.Sprite.fromImage("res/lianxi/dou/dou2.png");
poker3.x = 462;
poker3.y = 467;
app.stage.addChild(poker3);
// 添加扑克牌4
var poker4 = new PIXI.Sprite.fromImage("res/lianxi/dou/dou3.png");
poker4.x = 546;
poker4.y = 467;
app.stage.addChild(poker4);
// 添加扑克牌5
var poker5 = new PIXI.Sprite.fromImage("res/lianxi/dou/dou4.png");
poker5.x = 630;
poker5.y = 467;
app.stage.addChild(poker5);// 调用函数，点击扑克牌1 向上移动400
poker1.interactive = true;
poker1.buttonMode = true;
poker1.on("click",move1);
function move1(){poker1.y =400;
}
// 调用函数，点击扑克牌2 向上移动400
poker2.interactive = true;
poker2.buttonMode = true;
poker2.on("click",move2);
function move2(){poker2.y =400;
}
// 调用函数，点击扑克牌3 向上移动400
poker3.interactive = true;
poker3.buttonMode = true;
poker3.on("click",move3);
function move3(){poker3.y =400;
}
// 调用函数，点击扑克牌4 向上移动400
poker4.interactive = true;
poker4.buttonMode = true;
poker4.on("click",move4);
function move4(){poker4.y =400;
}
// 调用函数，点击扑克牌5 向上移动400
poker5.interactive = true;
poker5.buttonMode = true;
poker5.on("click",move5);
function move5(){poker5.y =400;
}

完成效果图：

点击扑克牌，向上移动400像素

章节测试1：飞机大战（点击"游戏开始" 显示"飞机"）

var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
// 添加背景图
var bg = new PIXI.Sprite.fromImage("res/bg_01.png");
app.stage.addChild(bg);
// 添加游戏开始 图标
var startBtn = new PIXI.Sprite.fromImage("res/plane/ui/start.png");
app.stage.addChild(startBtn);
// 添加飞机图片
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.x = 200;
plane.y = 240;
plane.visible = false; // 设置飞机图片不可见
app.stage.addChild(plane);// 调用函数，当点击 游戏开始图标，游戏开始图标消失，飞机图片显示
startBtn.interactive = true;
plane.interactive = true;
startBtn.on("click",startGame);
function startGame(){startBtn.visible = false;plane.visible = true;
}

完成效果图：

点击游戏开始图标，游戏开始图标消失，飞机图片显示

章节测试2：植物大战僵尸（消失的太阳）

var app = new PIXI.Application(1000,600);
document.body.appendChild(app.view);
// 添加 背景图片
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhi/bg1.png");
bg.width = 1000;
bg.height = 600;
app.stage.addChild(bg);
// 添加太阳1
var one = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
one.x = 500;
one.y = 300;
one.width = 70;
one.height = 70;
app.stage.addChild(one);
// 添加太阳2
var two = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
two.x = 800;
two.y = 400;
two.width = 70;
two.height = 70;
app.stage.addChild(two);
// 添加太阳3
var three = new PIXI.Sprite.fromImage("res/lianxi/zhi/sun.png");
three.x = 600;
three.y = 200;
three.width = 70;
three.height = 70;
app.stage.addChild(three);// 调用函数,鼠标放在太阳上，太阳自动消失
one.interactive = true;
one.on("mouseover",clearOne);
function clearOne(){one.visible = false;
}
two.interactive = true;
two.on("mouseover",clearTwo);
function clearTwo(){two.visible = false;
}
three.interactive = true;
three.on("mouseover",clearThree);
function clearThree(){three.visible = false;
}

完成效果图：

鼠标放在太阳上，太阳立即消失

章节测试3：赛车跑道

var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
// 添加背景图
var bg = new PIXI.Sprite.fromImage("res/lianxi/carplay/bj.png");
app.stage.addChild(bg);
// 添加 汽车图片
var car = new PIXI.Sprite.fromImage("res/lianxi/carplay/car.png");
app.stage.addChild(car);
car.x = 210;
car.y = 200;
// 添加1车道
var btn1 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq12.png");
app.stage.addChild(btn1);
btn1.x = 60;
btn1.y = 400;
// 添加2车道
var btn2 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq13.png");
app.stage.addChild(btn2);
btn2.x = 230;
btn2.y = 400;
// 添加3车道
var btn3 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq14.png");
app.stage.addChild(btn3);
btn3.x = 390;
btn3.y = 400;
// 调用函数，点击1车道，小车回到1车道
btn1. interactive = true;
btn1.on("click",goto1);
function goto1(){car.x=50;
}
// 调用函数，点击2车道，小车回到2车道
btn2. interactive = true;
btn2.on("click",goto2);
function goto2(){car.x=210;
}
// 调用函数，点击3车道，小车回到3车道
btn3. interactive = true;
btn3.on("click",goto3);
function goto3(){car.x=380;
}

完成效果图：

点击那个车道，汽车回到那个车道

章节测试4：开心消消乐（显示隐藏图片）

var app = new PIXI.Application(800,500);
document.body.appendChild(app.view);
// 添加背景图片
var bg = new PIXI.Sprite.fromImage("res/lianxi/rabbit/bj.png");
bg.width = 1000;
bg.height = 600;
app.stage.addChild(bg);
// 添加图片1设置宽高
var one = new PIXI.Sprite.fromImage("res/lianxi/xxl/dwb1.png");
one.x = 150;
one.y = 350;
one.width = 70;
one.height = 70;
app.stage.addChild(one);
// 添加图片2设置宽高
var two = new PIXI.Sprite.fromImage("res/lianxi/xxl/dwb2.png");
two.x = 600;
two.y = 350;
two.width = 70;
two.height = 70;
app.stage.addChild(two);var oneShow = new PIXI.Sprite.fromImage("res/lianxi/xxl/dw1.png");
oneShow.x = 150;
oneShow.y = 350;
oneShow.anchor.x = 0.5;
oneShow.anchor.y = 0.5;
oneShow.width = 70;
oneShow.height = 70;
oneShow.visible = false;
app.stage.addChild(oneShow);var twoShow = new PIXI.Sprite.fromImage("res/lianxi/xxl/dw2.png");
twoShow.x = 600;
twoShow.y = 350;
twoShow.anchor.x = 0.5;
twoShow.anchor.y = 0.5;
twoShow.width = 70;
twoShow.height = 70;
twoShow.visible = false;
app.stage.addChild(twoShow);var clear = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq3.png");
clear.x = 380;
clear.y = 100;
clear.width = 70;
clear.height = 70;
app.stage.addChild(clear);bg.interactive = true;
bg.on("mousemove",moveImg);
function moveImg(event){var pos = event.data.getLocalPosition(app.stage);oneShow.x = pos.x;oneShow.y = pos.y;twoShow.x = pos.x;twoShow.y = pos.y;
}
// 调用函数，点击图片1显示，图片2隐藏
one.interactive= true;
one.on("click",showOne);
function showOne(){oneShow.visible = true;twoShow.visible = false;
}
two.interactive= true;
two.on("click",showTwo);
function showTwo(){oneShow.visible = false;twoShow.visible = true;
}
clear.interactive= true;
clear.on("mouseover",clearImg);
function clearImg(){oneShow.visible = false;twoShow.visible = false;
}

完成效果图：

章节测试5：飞机大战（移动飞机）

var app = new PIXI.Application(700,400);
document.body.appendChild(app.view);var plane = new PIXI.Sprite.fromImage("res/lianxi/yidong/plane.png");
app.stage.addChild(plane);
plane.scale.x = 2;
plane.scale.y = 2;
plane.x = 180;
//添加左箭头并设置其坐标和透明度
var btnLeft = new PIXI.Sprite.fromImage("res/lianxi/yidong/left.png");
app.stage.addChild(btnLeft);
btnLeft.x = 200;
btnLeft.y = 300;
btnLeft.alpha = 0.5;
//添加右箭头并设置其坐标和透明度
var btnRight = new PIXI.Sprite.fromImage("res/lianxi/yidong/right.png");
app.stage.addChild(btnRight);
btnRight.x = 400;
btnRight.y = 300;
btnRight.alpha = 0.5;//设置btnleft的mouseover、mouseout和click事件
btnLeft.interactive = true;
btnLeft.on("mouseover",showLeft);
function showLeft(){btnLeft.alpha = 1;
}
btnLeft.on("mouseout",hideLeft);
function hideLeft(){btnLeft.alpha = 0.5;
}
btnLeft.on("click",moveLeft);
function moveLeft(){plane.x -=10;
}
//设置btnRight的mouseover、mouseout和click事件
btnRight.interactive = true;
btnRight.on("mouseover",showRight);
function showRight(){btnRight.alpha = 1;
}
btnRight.on("mouseout",hideRight);
function hideRight(){btnRight.alpha = 0.5;
}
btnRight.on("click",moveRight);
function moveRight(){plane.x +=10;
}

完成效果图：点击左箭头飞机向左移动10像素，点击右箭头飞机向右移动10像素

2、获取鼠标位置（鼠标跟随）

1、获得鼠标坐标

在鼠标事件中，我们可以获得鼠标坐标，也就是鼠标指针坐标位置x、y的值

bg.interactive = true;
bg.on("mousemove", movePlane);
function movePlane(event) {var pos = event.data.getLocalPosition(app.stage);var a = pos.x;var b = pos.y;
}

1、允许图片接收控制

bg.interactive = true;

2、给图片bg添加mousemove事件

bg.on("mousemove", movePlane);

3、定义movePlane函数，获得鼠标坐标

function movePlane(event) {

var pos = event.data.getLocalPosition(app.stage);

var a = pos.x;

var b = pos.y;

}

event：代表当前鼠标的事件，该事件中存储了鼠标的相关信息

var pos = event.data.getLocalPosition(app.stage)：在应用程序的舞台上，通过event获得鼠标信息，并存储到pos变量中

var a = pos.x：通过pos获得鼠标指针的x坐标

var b = pos.y：通过pos获得鼠标指针的y坐标

注：任何一个鼠标事件，都可以通过上述代码获得鼠标坐标

2、设置锚点

显示元素的锚点，也可以叫做定位点。

当我们通过x、y设置显示元素位置时，显示元素是以哪个点来对应的，那么对应的点，就是锚点。

显示元素默认的锚点位置，是显示元素的左上角。如下图：

当我们指定图片位置为 x=200;y=100; 时，实际是图片左上角对应 x=200; y=100;

我们可以通过代码，来设置显示元素的锚点位置。代码如下：

plane.anchor.x = 值：设置x方向锚点位置

plane.anchor.y = 值：设置y方向锚点位置

或者

plane.anchor.set(值,值)：同时设置x、y方向锚点位置

锚点的取值是有一定范围的。如下图：

图片左上角对应锚点位置：plane.anchor.x=0，plane.anchor.y=0 或 plane.anchor.set(0,0)

图片右上角对应锚点位置：plane.anchor.x=1，plane.anchor.y=0 或 plane.anchor.set(1,0)

图片左下角对应锚点位置：plane.anchor.x=0，plane.anchor.y=1 或 plane.anchor.set(0,1)

图片右下角对应锚点位置：plane.anchor.x=1，plane.anchor.y=1 或 plane.anchor.set(1,1)

图片中心点对应锚点位置：plane.anchor.x=0.5，plane.anchor.y=0.5 或 plane.anchor.set(0.5,0.5)

注意：锚点的位置并不是固定的，可以任意给值，但锚点的范围是0到1之间

3、鼠标跟随

鼠标跟随，就是控制显示元素，跟随鼠标指针一起移动

1、设置飞机plane图片的锚点

plane.anchor.set(0.5,0.5);

设置plane图片的锚点，将锚点位置设置到图片的中心点

2、设置飞机plane图片，鼠标跟随

var pos = event.data.getLocalPosition(app.stage);

plane.x = pos.x;

plane.y = pos.y;

var pos = event.data.getLocalPosition(app.stage)：获得鼠标相关信息

plane.x = pos.x：将鼠标的x坐标赋给飞机图片的x坐标

plane.y = pos.y：将鼠标的y坐标赋给飞机图片的y坐标

4、mousemove 事件的特殊性

mousemove 事件，是一个非常特殊的鼠标事件。

因为不管把 mousemove 事件添加给舞台上哪一个显示元素，最终都是由应用程序窗口，响应该事件。

5、鼠标click，放置豌豆射手

1、定义isStop变量

var isStop = 0;

通过isStop变量，控制豌豆peas图片是否鼠标跟随

如果isStop等于0，则鼠标跟随，否则，豌豆图片不动

2、设置豌豆peas图片，鼠标跟随

bg.interactive = true;

bg.on("mousemove",movePeas);

function movePeas(event){

if(isStop == 0){

var pos = event.data.getLocalPosition(app.stage);

peas.x = pos.x;

peas.y = pos.y;

}

}

设置豌图peas图片鼠标跟随

if(isStop == 0)：如果isStop等于0时，则豌豆图片鼠标跟随，否则不动

3、给图片bg添加click鼠标事件

bg.on("click",stopMove);

function stopMove(){

isStop = 1;

}

给图片bg添加click鼠标事件，用于将isStop的值改为1，实现放置豌豆peas图片的功能

JavaScript应用程序开发（游娱平台）相关推荐

javascript 一次开发，多平台运行
0x00. 前言早上起床惯例刷刷微博,突然看到 React Native 宣布支持 Android 的消息,一时感觉 Facebook 太给力了,不仅没有推迟发布 React Native For ...
开源版小程序开发一键生成平台源码完整前后端+搭建教程
分享一个一键生成微信小程序的源码,含15大功能模块,像微同城.电商类.在线报名.社区团购.外卖点餐.AI智能名片等小程序都有,根据需求可任意调用,自由DIY,开发属于你自己的小程序,源码开源可二开,含 ...
移动应用程序开发_7种用于移动应用程序开发的终极编程语言
移动应用程序开发 " " 您是否知道21%的人每天打开一个应用50次以上? (Do you know that 21% of people open an app 50+ time ...
amos看拟合度在哪里看_小程序开发公司哪里强？看这几点
如今小程序开发已不罕见,越来越多的线下商家需要布局线上渠道,小程序是一个非常好的选择.但是,对于不懂任何技术.也没有自身技术团队的小白而言,若想拥有自己的小程序,就需要找靠谱的微信小程序开发公司,但是 ...
小程序开发代码_快速学会微信小程序开发，无需懂代码！
现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...
华为桌面小程序在哪里_小程序开发公司哪里强？看这几点
如今小程序开发已不罕见,越来越多的线下商家需要布局线上渠道,小程序是一个非常好的选择.但是,对于不懂任何技术.也没有自身技术团队的小白而言,若想拥有自己的小程序,就需要找靠谱的微信小程序开发公司,但是 ...
商城类小程序开发全过程（附源码）
商城类小程序是所有类别小程序中开发的热点,但其相对于其他类别的小程序,具有逻辑复杂.功能需求较大等特点,因此,对开发者具有一定的基础要求. 那我们就止步于前了吗? 当然不! 本文主要讲述商城小程序开发 ...
java cuba_CUBA平台–用于快速应用程序开发的开源Java框架
java cuba 传统上,自计算时代开始以来,企业软件开发自然面临着一个挑战,当时自然而然地,企业软件开发本应专注于解决实际的业务问题,但与此同时,开发人员必须在技术上花费大量时间和精力.解决方案的 ...
CUBA平台–用于快速应用程序开发的开源Java框架
传统上,自计算时代开始以来,企业软件开发自然面临着一个挑战,当时自然而然地,企业软件开发本应专注于解决实际的业务问题,但与此同时,开发人员必须在技术上花费大量时间和精力.解决方案的一面,例如架构和通用 ...
IBM 发布企业级社交协作平台 Domino V10，开启快速应用程序开发的新时代
北京时间 2018 年 10 月 10 日,IBM 正式全球发布企业级社交协作平台 Domino V10.全新版本 Domino V10 坚持安全可控,在保留传统开发模式的同时拥抱现代化设计,创造更快 ...

JavaScript应用程序开发（游娱平台）

补充：更改图片的大小

一：游戏显示

1、添加显示元素

完成效果图：

练习一：拼接竹子

完成效果图：

练习2：屏幕保护系统

完成效果图：

练习3：赛车游戏界面

完成效果图：

章节测试：

完成效果图：

2、显示元素的属性

目标：

完成效果图：

章节测试1:

完成效果图：

章节测试2：

完成效果图：

章节测试3：

完成效果图：

3、图片路径与资源商城

目标：

完成效果图：

练习1：植物大战僵尸

完成效果图：

练习2：跑酷游戏

完成效果图：

章节任务：

完成效果图：

二、游戏控制

1、鼠标控制事件

鼠标控制事件的使用

目标：

完成效果图：

练习1：恐龙快打（控制角色方向）

完成效果：

2、植物大战僵尸（收太阳）

练习3： 斗地主手牌选择

章节测试1：飞机大战（点击"游戏开始" 显示"飞机"）

章节测试2：植物大战僵尸（消失的太阳）

章节测试3：赛车跑道

章节测试4：开心消消乐（显示隐藏图片）

章节测试5：飞机大战（移动飞机）

2、获取鼠标位置（鼠标跟随）

1、获得鼠标坐标

2、设置锚点

3、鼠标跟随

4、mousemove 事件的特殊性

JavaScript应用程序开发（游娱平台）相关推荐

最新文章

热门文章

练习3：斗地主手牌选择