基础代码篇
游戏窗体
//制作基础窗体，这里的两个构造函数分别是width和height
var app = new PIXI.Application(500, 500)
document.body.appendChild(app.view)
//当然我们可以使用五个构造函数的创建窗体方式
var app = new PIXI.Application({
width: 256, // default: 800
height: 256, // default: 600
antialias: true, // default: false 抗锯齿
transparent: false, // default: false 是否透明
resolution: 1 // default: 1 好像跟清晰度有关
}
);
图片、文本添加
//图片对象
var bg = new PIXI.Sprite.fromImage(
'http://www.youyu001.com/newlession/page2/res/bg_02.png'
)
//绝对路径
var plane1 = new PIXI.Sprite.fromImage(
'/lesson/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'
)
//显示图片、文本
app.stage.addChild(bg)
//创建文本
var defen = new PIXI.Text('得分：1000000')
//文本重新赋值
defen.text = '游戏结束';
元素样式与属性
//填充颜色
score.style.fill = 0xffffff
//设置宽高
plane2.width = 100
plane2.height = 80
// 设置缩放比例
plane3.scale.x = 2
plane3.scale.y = 2
//设置旋转
plane4.rotation = Math.PI / 2
//使对象隐藏，方法2
plane.visible = true //true可见，false不可见
//透明度为0
//object.alpha = 0
//元素纹理
//创建纹理
var texture1 = new PIXI.Texture.fromImage("res/plane_blue_01.png");
//通过已经创建的纹理，来改变元素纹理
plane.texture = texture1
元素事件开启
//允许bg图片，可以被鼠标点击
bg.interactive = true
//更改鼠标指针,鼠标放到当前对象时,会变成小手状
bg.buttonMode = true
//bg图片当被点击时，通知执行 move 函数
bg.on('click', move)
// 当在显示元素上，松开鼠标按键时，会发生mouseup事件
bg.on('mouseup', 函数名)
//同类的有mousedown事件，鼠标长按事件
//手机控制、触碰屏幕
bg.on('touchstart',函数名)
//手机控制、移动手指
bg.on('touchmove',函数名)
基本函数
//编辑一个函数
function move() {
//每次点击都会使plane右移5像素
plane.x += 5
//使对象隐藏，方法1
plane.x = -10000
}
鼠标控制
获取鼠标指针坐标
plane.on("mousemove",movePlane)
function movePlane(event){
//获得当前鼠标指针的坐标
var pos = event.data.getLocalPosition(app.stage)
//把鼠标的坐标赋值给飞机的坐标，使飞机跟随鼠标指针
plane.x = pos.x;
plane y = pox.y;
}
发现问题，引出锚点
- 图片默认的锚点都在左上角
锚点设置
锚点分辨
默认是0，0
0，1就是往上移动一个身位
1，0就是往左移动一个身位
1，1就是往右上角移动一个身位
案例演示1
- 使这三张图片向上移动一个身位
- 显然，这很简单，把他们y轴锚点调到1
building01.anchor.set(0,1)
building02.anchor.set(0,1)
building03.anchor.set(0,1)
案例演示2
- 因为对的是x轴，并且正好对准一个身位，毫不犹豫，我们选a
动画移动
//指定应用 app 的帧频函数是 animate
app.ticker.add(animate);
//定义一个名叫 animate 的函数
function animate() {
plane1.y += 1;
plane2.x += 1;
}
循环
基本使用
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);
for(var i =0; i < 9;i++){
if(i % 2 !== 0){
var plane = new PIXI.Sprite.fromImage("res/enemy_01.png")
app.stage.addChild(plane)
}else{
var plane = new PIXI.Sprite.fromImage("res/enemy_02.png")
app.stage.addChild(plane)
}
plane.x = i * 50
plane.y = i * 60
}
飞机以菱形分布打印
var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);
function Plane(x,y){
var plane = PIXI.Sprite.fromImage("res/plane/main/img_plane_main_09.png");
plane.x = x;
plane.y = y;
plane.scale.x = 0.8;
plane.scale.y = 0.8;
app.stage.addChild(plane);
}
//代码编写区域
var planeX = 0;
var planeY = 0;
function Rhombus() {
for(var i = 0 ; i < 5; i ++){
for (var j = 0; j < 5; j++){
if(i === 0 || i === 4){
if(j === 2){
planeX = 100 * j
planeY = 100 * i
Plane(planeX,planeY);
}
}else if(i === 1 || i === 3){
if(j === 1 || j === 2 || j ===3){
planeX = 100 * j
planeY = 100 * i
Plane(planeX,planeY);
}
}else{
planeX = 100 * j
planeY = 100 * i
Plane(planeX,planeY);
}
}
}
}
Rhombus();
每行递增式打印飞机
var app = new PIXI.Application(500, 500);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_01.png");
bg.width = 500;
bg.height = 600;
app.stage.addChild(bg);
function Plane(x,y){
var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");
plane.x = x;
plane.y = y;
plane.scale.x = 0.8;
plane.scale.y = 0.8;
bg.addChild(plane);
}
var planeX = 0;
var planeY = 0;
function add(){
//代码编辑区域
var i = 0;
var j = 0
while(i < 5){
j = 0;
while(j < i + 1){
planeX = j * 88
planeY = i * 80
Plane(planeX,planeY)
j++
}
i++
}
}
add();
数组
基本使用
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
//存储飞机的数组
var arr = [];
//通过循环创建6架飞机
for(var i=0;i<6;i++){
var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");
app.stage.addChild(plane);
plane.x = i * 80;
//将飞机plane，存入arr数组中
arr.push(plane);
}
//更改arr数组中1、5下标对应飞机的坐标
arr[1].y = 100;
arr[5].y = 100;
//帧频函数，控制arr数组中所有飞机移动
app.ticker.add(animate);
function animate() {
for(var i=0;i<arr.length;i++){
arr[i].y += 2;
}
}
经典题目
鱼缸中的鱼儿（arrList点击事件并向数组添加对象）
var app = new PIXI.Application(800,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/yu2/bg.png");
app.stage.addChild(bg);
var fishList = []
var speedX = []
var speedY = []
bg.interactive = true
bg.on("mousemove",function(event){
//获取鼠标指针位置
var pos = event.data.getLocalPosition(app.stage)
//这里只有1和2
var choose = Math.round(Math.random() * 1 + 1);
if(choose == 1){
var fish = new PIXI.Sprite.fromImage("res/lianxi/yu2/yu1.png")
app.stage.addChild(fish);
fish.anchor.set(0.5,0.5)
fish.x = pos.x
fish.y = pos.y
fishList.push(fish)
speedX.push(Math.random() * 5)
speedY.push(Math.random() * 5)
}else{
fish = new PIXI.Sprite.fromImage("res/lianxi/yu2/yu2.png")
app.stage.addChild(fish)
fish.anchor.set(0.5,0.5)
fish.x = pos.x
fish.y = pos.y
fishList.push(fish)
speedX.push(-Math.random() * 5)
speedY.push(-Math.random() * 5)
}
})
app.ticker.add(function(){
for(var i = 0;i < fishList.length; i++){
fishList[i].x += speedX[i]
fishList[i].y += speedY[i]
if(fishList[i].x > 800 - fishList[i].width / 2){
speedX[i] *= -1
}
if(fishList[i].y < 0 + fishList[i].height / 2){
speedY[i] *= -1
}
if(fishList[i].x < 0 + fishList[i].width / 2){
speedX[i] *= -1
}
if(fishList[i].y > 600 - fishList[i].height / 2){
speedY[i] *= -1
}
}
})
arr.splice()
案例详解
- splice() 方法用于添加或删除数组中的元素。
- 删除任意数量的项，只需要传入两个参数即可。要删除的第一项的位置和要删除的项数
初始环境
var str = [];
str[0] = "red";
str[1] = "yellow";
str[2] = "black";
str[3] = "lime";
str[4] = "pink";
str[5] = "gary";
删除
var con = str.splice(1,1); //从下标为1的元素后删除一个元素【包括下标1】
console.log(str); //["red", "black", "lime", "pink", "gary"]
console.log(con); //["yellow"]
添加
var con = str.splice(1,0,"orange","blue"); //从位置1开始插入2个元素
console.log(str); // ["red", "orange", "blue", "black", "lime", "pink", "gary"]
console.log(con); // [] //con元素不改变
删除并替换
var con = str.splice(1,2,"blue"); //从第二个元素删除2个元素， 然后在删除的位置上添加1个元素
console.log(str); // ["red", "blue", "black", "lime", "pink", "gary"]
console.log(con); // ["orange", "blue"]
不接收返回值情况（只改变元素组）
str.splice(0,3,"red");
console.log(str); // ["red", "lime", "pink", "gary"]
代码分析案例1
- 大概就是从第i元素移除一个元素
增加和删除竹子功能
var app = new PIXI.Application(400,430);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuzi/bg.png");
app.stage.addChild(bg);
var bambooArr = [];
//代码编写区域
var addButton = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq11.png");
addButton.x = 330;
addButton.y = 250;
app.stage.addChild(addButton);
addButton.interactive = true;
addButton.on("click",add);
var i = 0;
//添加竹子图片，并放入 bambooArr 数组
var positionBambooX = 0
var positionBambooY = 0
var countBamboo = 0 //用于分辨添加了几个竹子，使更好的控制数组中每个竹子的x，y轴，而且后面可以作为spclice方法的参数,默认0元素的位置
function add(){
var bamboo = new PIXI.Sprite.fromImage("res/lianxi/zhuzi/zhuzi.png")
app.stage.addChild(bamboo)
positionBambooX = 200
positionBambooY = 300 - 89 * countBamboo
bamboo.x = positionBambooX
bamboo.y = positionBambooY
bambooArr.push(bamboo)
countBamboo++; //用于分辨添加了几个竹子，使更好的控制数组中每个竹子的x，y轴
console.log(countBamboo)
}
var deleteButton = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq7.png");
deleteButton.x = 330;
deleteButton.y = 330;
app.stage.addChild(deleteButton);
deleteButton.interactive = true;
deleteButton.on("click",remove);
//删除竹子图片
function remove(){
countBamboo-- //当remove竹子时计数减一,使countBamboo的值正好等于bambooArr的最后一个元素，我们每次正好移除的就是最后一个元素
console.log("bambooArr:" + bambooArr.length)
app.stage.removeChild(bambooArr[countBamboo])
bambooArr.splice(countBamboo,1) //从下标为countBamboo处移除1个元素
console.log(countBamboo)
}
根据数组内容生成对应对象
var app = new PIXI.Application(1000,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/peas/bg.png");
app.stage.addChild(bg);
var arrPic = [1,2,1,2,1,1,2];
for(var i = 0; i < arrPic.length; i++){
if(arrPic[i] === 1){
var peashooter = new PIXI.Sprite.fromImage("res/lianxi/peas/peas.png")
app.stage.addChild(peashooter)
peashooter.x = 270 + i * 100
peashooter.y = 300
}else if(arrPic[i] === 2){
var sunFlower = new PIXI.Sprite.fromImage("res/lianxi/zhi/SunFlower10.png")
app.stage.addChild(sunFlower)
sunFlower.x = 270 + i * 100
sunFlower.y = 300
}
}
连续随机建筑物（有点难度）
var app = new PIXI.Application(1920,500);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/xyt/fz.png");
app.stage.addChild(bg);
bg.y = 100;
var road = new PIXI.Sprite.fromImage("res/lianxi/xyt/lu.png");
app.stage.addChild(road);
road.y = 414;
var jzList = [];
jzList[0]= "res/lianxi/xyt/cafe.png";
jzList[1]= "res/lianxi/xyt/mianbaofang.png";
jzList[2]= "res/lianxi/xyt/muwu.png";
jzList[3]= "res/lianxi/xyt/shanlan.png";
jzList[4]= "res/lianxi/xyt/shumasahngdian.png";
var widthList = [];
widthList[0]=353;
widthList[1]=419;
widthList[2]=318;
widthList[3]=176;
widthList[4]=419;
// 更改数组下标顺序
function randomSortArray(arr) {
var stack = [];
while (arr.length) {
//Math.random()：返回 [0,1) 之间的一个随机数
var index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机索引值
stack.push(arr[index]); // 将随机索引对应的数组元素添加到新的数组中
arr.splice(index, 1); // 删除原数组中随机生成的元素
}
return stack;
}
var arr = [0,1,2,3,4]
var arrRuffle = randomSortArray(arr); //这是打乱后的数组，当然我们这里可以每次触发事件时重新赋值
var jzWidth = 0
var newBuildWidth = 0 //用来存放总宽度
for(var i = 0; i < 5; i++){
var build = new PIXI.Sprite.fromImage(jzList[arrRuffle[i]]) //这里取出的是打乱数组下标为i的值，比如2，3，1，4，0
buildWidth = widthList[arrRuffle[i]] //与上方一样，因为arrRuffle[i]的值相同，所以我们得到是对应的建筑宽度
app.stage.addChild(build)
build.x = newBuildWidth
newBuildWidth += widthList[arrRuffle[i]] //不断叠加上一个建筑宽度
console.log(newBuildWidth)
build.y = 420
build.anchor.set(0,1) //设置建筑的锚点
}
for(var i = 0; i < 2; i++){
var build = new PIXI.Sprite.fromImage(jzList[arrRuffle[i]]) //这里取出的是打乱数组下标为i的值，比如2，3，1，4，0
buildWidth = widthList[arrRuffle[i]] //与上方一样，因为arrRuffle[i]的值相同，所以我们得到是对应的建筑宽度
app.stage.addChild(build)
build.x = newBuildWidth
newBuildWidth += widthList[arrRuffle[i]] //不断叠加上一个建筑宽度
console.log(newBuildWidth)
build.y = 420
build.anchor.set(0,1) //设置建筑的锚点
}
二维数组
生成三排金币
var app = new PIXI.Application(800,500);
document.body.appendChild(app.view);
var bgup = new PIXI.Sprite.fromImage("res/pao/bg_back_02.png");
app.stage.addChild(bgup);
var bgdown = new PIXI.Sprite.fromImage("res/pao/bg_front_02.png");
app.stage.addChild(bgdown);
bgdown.y =210;
var dimian = new PIXI.Sprite.fromImage("res/pao/ext/ground03_1.png");
app.stage.addChild(dimian);
dimian.y =400;
var gold = new Array(2); //这表示数组长度是2
gold[0] = "res/pao/gold.png";
gold[1] = "res/pao/ext/gold_01.png";
var arr = [[1,1,1,1,1,1,0,0,0,1,0,0,1,1,1], //注意这是个二维数组!!!!!!!!!!
[1,1,0,0,0,1,1,1,0,0,0,1,1,0,1],
[1,0,0,0,1,0,0,1,1,1,0,1,1,0,1]];
for(var i = 0; i < 3; i ++){
for(var j = 0; j < 15; j++){
if (arr[i][j]) {
var silverGold = new PIXI.Sprite.fromImage(gold[1])
app.stage.addChild(silverGold)
silverGold.x = 20 + 50 * j;
silverGold.y = 300 + i * 50;
silverGold.anchor.set(0.5,0.5)
}else{
var fineGold = new PIXI.Sprite.fromImage(gold[0])
app.stage.addChild(fineGold)
fineGold.x = 20 + 50 * j;
fineGold.y = 300 + i * 50;
fineGold.anchor.set(0.5,0.5)
}
}
}
碰撞检测
当子弹与飞机碰撞时，飞机向后移动5像素
var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
//添加敌机
var enemy = PIXI.Sprite.fromImage("res/plane/enemy_04.png");
enemy.anchor.set(0.5,0.5);
enemy.x = 200;
enemy.y = 200;
app.stage.addChild(enemy);
//添加子弹图片
var bullet = PIXI.Sprite.fromImage("res/plane/bullet_01.png");
bullet.anchor.set(0.5,0.5);
bullet.x = 234;
bullet.y = 400;
app.stage.addChild(bullet);
//帧频函数
app.ticker.add(animate);
function animate() {
moveBullet();//移动子弹
crash();//碰撞判断
}
//移动子弹
function moveBullet() {
bullet.y -= 10;
if(bullet.y < 0) {
bullet.y = 400;
}
console.log(enemy.width) //104
console.log(enemy.height) //74
console.log(bullet.width) //50
console.log(bullet.height) //65
}
//敌机与子弹碰撞
function crash(){
var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);
//判断是否发生碰撞
if(pos < 60 * 60) {
enemy.y -= 5;
bullet.y = 400;
}
}
吃道具功能
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
bg.width = 500;
bg.height = 1200;
app.stage.addChild(bg);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 500;
app.stage.addChild(plane);
//道具图片
var power = new PIXI.Sprite.fromImage("res/plane/item/img_plane_item_10.png");
power.anchor.set(0.5,0.5);
power.x = Math.random()*500;
power.y = -100;
app.stage.addChild(power);
//鼠标移动
bg.interactive = true;
bg.on("mousemove",movePlane);
function movePlane(event){
var pos = event.data.getLocalPosition(app.stage);
plane.x = pos.x;
plane.y = pos.y;
}
app.ticker.add(animate);
function animate(){
moveBg();
movePower();
crash();
}
//移动背景
function moveBg(){
bg.y += 2;
if(bg.y > 0){
bg.y = -600;
}
}
//移动道具
function movePower(){
power.y += 1;
if(power.y > 700){
power.y = -100;
}
}
//碰撞
function crash(){
var pos = Math.pow(plane.x - power.x,2) + Math.pow(plane.y - power.y,2)
if(pos < 55 * 55){
power.x = Math.random() * 500
power.y = -100
}
}
双球碰撞
var app = new PIXI.Application(1000, 600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/collision/bg.png");
app.stage.addChild(bg);
var ball1 = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu1.png");
ball1.anchor.set(0.5, 0.5);
ball1.width = 200;
ball1.height = 200;
ball1.x = 150;
ball1.y = 500;
app.stage.addChild(ball1);
var ball2 = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball2.anchor.set(0.5, 0.5);
ball2.width = 200;
ball2.height = 200;
ball2.x = 800;
ball2.y = 500;
app.stage.addChild(ball2);
var speed1 = 6;
var speed2 = 6;
app.ticker.add(animate);
var frameCount = 0
function animate() {
moveBall1();
moveBall2();
crash()
}
var ballTurnType_1 = true
var ballTurnType_2 = true
function moveBall1() {
if(ballTurnType_1){ //向右
ball1.x += speed1
ball1.rotation += 0.05
}else{ //向左
if(ball1.x > 100){
ball1.x -= speed1
ball1.rotation -= 0.05
}else{
ballTurnType_1 = true
}
}
}
function moveBall2() {
if(ballTurnType_2){ //向左
ball2.x -= speed2
ball2.rotation -= 0.05
}else{ //向右
if(ball2.x < 900){
ball2.x += speed2
ball2.rotation += 0.05
}else{
ballTurnType_2 = true
}
}
}
var pos = 0
function crash() {
pos = Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2)
if(pos < 200 * 200){
ballTurnType_1 = false
ballTurnType_2 = false
}
}
双球碰撞（改游戏）
var app = new PIXI.Application(1000, 600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/collision/bg.png");
app.stage.addChild(bg);
var ball1 = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu1.png");
ball1.anchor.set(0.5, 0.5);
ball1.width = 200;
ball1.height = 200;
ball1.x = 150;
ball1.y = 500;
app.stage.addChild(ball1);
var ball2 = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball2.anchor.set(0.5, 0.5);
ball2.width = 200;
ball2.height = 200;
ball2.x = 800;
ball2.y = 500;
app.stage.addChild(ball2);
var speed1 = 1;
var speed2 = 1;
app.ticker.add(animate);
var frameCount = 0
function animate() {
moveBall1();
moveBall2();
crash()
}
var ballTurnType_1 = true
var ballTurnType_2 = true
function moveBall1() {
if(ballTurnType_1){ //向右
ball1.x += speed1
ball1.rotation += ball1RotationSpeed
}else{ //向左
if(ball1.x > 100){
ball1.x -= speed1
ball1.rotation -= ball1RotationSpeed
}else{
ballTurnType_1 = true
}
}
}
function moveBall2() {
if(ballTurnType_2){ //向左
ball2.x -= speed2
ball2.rotation -= ball2RotationSpeed
}else{ //向右
if(ball2.x < 900){
ball2.x += speed2
ball2.rotation += ball2RotationSpeed
}else{
ballTurnType_2 = true
}
}
}
var pos = 0
function crash() {
pos = Math.pow(ball1.x - ball2.x,2) + Math.pow(ball1.y - ball2.y,2)
if(pos < 200 * 200){
ballTurnType_1 = false
ballTurnType_2 = false
}
}
//提示文本
var tip = new PIXI.Text('点击任意一个小球，来给他加速吧！！！')
tip.style.fontSize = 30
tip.style.fill = 0xFFC0CB
tip.x = 250
tip.y = 100
app.stage.addChild(tip)
var ball1RotationSpeed = 0.05
var ball2RotationSpeed = 0.05
ball1.interactive = true
ball1.on("touchstart",function(){
speed1 += 2
ball1RotationSpeed += 0.05
if(speed1 >= 12){
tip.text = '哈哈哈，快的点不到了吧'
tip.x = 300
tip.y = 100
}
})
ball2.interactive = true
ball2.on("touchstart",function(){
speed2 += 2
ball2RotationSpeed += 0.05
console.log("执行正常")
if(speed2 >= 12){
tip.text = '哈哈哈，快的点不到了吧'
tip.x = 300
tip.y = 100
}
})
击中后爆炸
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);
//子弹
var bullet = new PIXI.Sprite.fromImage("res/bullet_01.png");
bullet.anchor.set(0.5,0.5);
app.stage.addChild(bullet);
//敌机
var enemy = new PIXI.Sprite.fromImage("res/enemy_02.png");
enemy.anchor.set(0.5,0.5);
enemy.x = Math.random()*500;
enemy.y = -100;
app.stage.addChild(enemy);
//飞机
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 500;
app.stage.addChild(plane);
//爆炸的图片数组
var imageList = [];
for(var i=1;i<=7;i++){
imageList.push("res/texiao/bao0"+i+".png");
}
//给背景添加鼠标移动事件
bg.interactive = true;
bg.on("mousemove",movePlane);
function movePlane(event){
var pos = event.data.getLocalPosition(app.stage);
plane.x = pos.x;
plane.y = pos.y;
}
//帧频函数
app.ticker.add(animate);
function animate(){
moveBullet();
moveEnemy();
crash();
}
//移动子弹
function moveBullet(){
bullet.y -= 20;
if(bullet.y < -50){
bullet.x = plane.x;
bullet.y = plane.y - 50;
}
}
//移动敌机
function moveEnemy(){
enemy.y += 2;
if(enemy.y > 700){
enemy.x = Math.random()*500;
enemy.y = -100;
}
}
//子弹碰撞敌机
function crash(){
var a = bullet.x - enemy.x;
var b = bullet.y - enemy.y;
var c = 60;
if(c*c > a*a+b*b){
//设置爆炸
startBoom(enemy.x,enemy.y);
//设置敌机
enemy.x = Math.random()*500;
enemy.y = -100;
//设置子弹
bullet.x = plane.x;
bullet.y = plane.y - 50;
}
}
var fire = new PIXI.extras.AnimatedSprite.fromImages(imageList)
app.stage.addChild(fire)
fire.visible = false
fire.animationSpeed = 0.3
//不可重复
fire.loop = false
function startBoom(x,y){
fire.x = x
fire.y = y
fire.visible = true
//从第一个图片开始
fire.gotoAndPlay(0)
fire.anchor.set(0.5,0.5)
fire.play();
// console.log('执行正常')
}
常用类
变量类型（typeof()）与类型转换
typeof(变量/数据值);
typeof 变量/数据值;
// 定义变量
var app = new PIXI.Application(500,500);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
var arr = [1,2,3,4,5];
var num = 10;
var str = "hello";
// 查看变量类型并打印
console.log(typeof(app)); // object
console.log(typeof(plane)); // object
console.log(typeof(arr)); // object
console.log(typeof(num)); // number
console.log(typeof(str)); // string
console.log(typeof(true)); // boolean
数字类型
var sn = "3.1415926";
var n1 = parseInt(sn); // 3
var n2 = parseFloat(sn); // 3.1415926
var n3 = Number(sn); // 3.1415926
//布尔转数字
var a = Number(true);
console.log(a);
var b = Number(false);
console.log(b);
//数字转布尔
console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(0.0));
console.log(Boolean(1.0));
字符串类型
var n = 100;
var b = true;
console.log(typeof(n)); // Number
console.log(typeof(b)); // Boolean
var sn1 = n.toString();
var sn2 = String(n);
var sb1 = b.toString();
var sb2 = String(b);
console.log(typeof(sn1)); // String
console.log(typeof(sn2)); // String
console.log(typeof(sb1)); // String
console.log(typeof(sb2)); // String
//字符串转布尔
console.log(Boolean(''));
console.log(Boolean(""));
console.log(Boolean("a"));
console.log(Boolean('0'));
console.log(Boolean("Hello"));
//字符串自动转换
var s1 = 'hello' + 100;
console.log(s1);
var s2 = 'hello' + 100 + 200;
console.log(s2);
var s3 = 100 + "Hello";
console.log(s3);
var s4 = 100 + 200 + "Hello";
console.log(s4);
date
var app = new PIXI.Application(500,300);
document.body.appendChild(app.view);
//定义显示日期的文本
var txt = new PIXI.Text("0000-00-00 00:00:00");
txt.style.fill = 0xffffff;
app.stage.addChild(txt);
//定义帧频函数
app.ticker.add(animate);
function animate(){
//获得日期
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
//拼接日期字符串
var dt = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
//通过文本显示日期
txt.text = dt;
}
String类
Array
逐帧动画
var app =new PIXI.Application(510,260);
document.body.appendChild(app.view);
var gameBg = new PIXI.Sprite.fromImage("res/pao/bg_back_01.png");
gameBg.width = 1020;
app.stage.addChild(gameBg);
var groundBg = new PIXI.Sprite.fromImage("res/pao/ext/ground03_1.png");
groundBg.x = 0;
groundBg.y = 180;
groundBg.width = 1020;
app.stage.addChild(groundBg);
app.ticker.add(animate)
function animate(){
//背景移动
bgMove();
groundMove();
}
function bgMove(){
gameBg.x -= 0.5
console.log(gameBg.x)
if(gameBg.x <= -510){
gameBg.x = 0
}
}
function groundMove(){
groundBg.x -= 5
if(groundBg.x <= -510){
groundBg.x = 0
}
}
var playerList = []
for(var i = 3; i <= 7; i++){
playerList.push('res/pao/player00' + i + '.png')
}
var player = new PIXI.extras.AnimatedSprite.fromImages(playerList)
app.stage.addChild(player)
player.animationSpeed = 0.3
player.x = 50
player.y = 100
player.play();
游戏开发技巧
斗地主
选中、撤回
poker1.interactive = true
poker2.interactive = true
poker3.interactive = true
poker1.on("click",selectPokers)
poker2.on("click",selectPokers)
poker3.on("click",selectPokers)
function selectPokers(){
if(this.y == 467){
this.y -= 30;
}else{
this.y += 30;
}
}
提示功能（数组）
var app = new PIXI.Application(1000,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/dou/bg.png");
app.stage.addChild(bg);
var btn = new PIXI.Sprite.fromImage("res/lianxi/dou/btn3.png");
app.stage.addChild(btn);
btn.x = 780;
btn.y = 260;
var pokerArr = [];
function createPoker(){
for(var i = 0;i < 2;i++){
var arr = [3,16];
var poker = PIXI.Sprite.fromImage("res/lianxi/dou/"+arr[i]+".jpg");
app.stage.addChild(poker);
poker.x = 425+i*40;
poker.y = 100;
}
for(var i = 0; i < 4;i++){
var arr = [26,39,34,47];
var poker = PIXI.Sprite.fromImage("res/lianxi/dou/"+arr[i]+".jpg");
app.stage.addChild(poker);
poker.x = 355+i*40;
poker.y = 400;
pokerArr.push(poker);
}
}
createPoker();
btn.interactive = true;
btn.on("click",prompt);
function prompt(){ //实现提示功能
//代码编写区域
// for(var i = 0; i < pokerArr.length; i++){
// if(i < 2){
// pokerArr[i].y = 370
// }else{
// pokerArr[i].y = 370
// }
// }
if(pokerArr[0].y === 370){
pokerArr[0].y = 400
pokerArr[1].y = 400
pokerArr[2].y = 370
pokerArr[3].y = 370
}else{
pokerArr[0].y = 370
pokerArr[1].y = 370
pokerArr[2].y = 400
pokerArr[3].y = 400
}
}
打出的牌放到桌面上，重复图片复制（非数组）
bg.interactive = true
bg.on("click",createLife)
function createLife(event){
var pos = event.data.getLocalPosition(app.stage)
var heart = new PIXI.Sprite.fromImage("res/plane/item/img_plane_item_03.png")
app.stage.addChild(heart);
heart.x = pos.x;
heart.y = pos.y;
heart.scale.x = 0.5
heart.scale.y = 0.5
heart.anchor.set(0.5,0.5)
}
展示所有牌（牌不同）
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);
//代码编写区域
var playCardSrc = ''
for(var i = 0 ; i < 13; i++){
playCardSrc = 'res/kdjl/0' + (i+1) +'.png'
var playCard = new PIXI.Sprite.fromImage(playCardSrc);
playCard.x = 150 + i * 50
playCard.y = 400
app.stage.addChild(playCard)
}
从54张牌中随机抽取30张牌（重点难点）
var app = new PIXI.Application(800,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/dou/bg.png");
app.stage.addChild(bg);
var pkUrlArr = [];
for(var i = 1; i <= 54; i ++) {
pkUrlArr.push("res/lianxi/dou/" + i + ".jpg");
}
// 方法2：随机抽取法, 时间复杂度 O(n^2)
function randomSortArray(arr) {
var stack = [];
while (arr.length) {
//Math.random()：返回 [0,1) 之间的一个随机数
var index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机索引值
stack.push(arr[index]); // 将随机索引对应的数组元素添加到新的数组中
arr.splice(index, 1); // 删除原数组中随机生成的元素
}
return stack;
}
var riffle = [] //数组riffle（洗牌），用于打乱pkUrlArr数组的元素顺序
riffle = randomSortArray(pkUrlArr)
//随机发 30 张扑克牌
var playCardList = []
var round = 0; //控制随机牌的下标元素，在0 - 53
for(var i = 0; i < 30; i++){
var playCard = new PIXI.Sprite.fromImage(riffle[i]) //这里控制随机牌
playCardList.push(playCard)
app.stage.addChild(playCardList[i])
playCardList[i].y = 400
playCardList[i].x = 100 + 20 * i
}
分配3 + 17 + 17 + 17张图片到各个指定位置（有点小难）
var app = new PIXI.Application(1000,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/dou/bg1.png");
app.stage.addChild(bg);
var reset = new PIXI.Sprite.fromImage("res/lianxi/dou/btn2.png");
reset.x = 850;
reset.y = 500;
app.stage.addChild(reset);
var pkUrlArr = [];
//扑克牌路径
function getPokerArr(){
pkUrlArr = [];
for(var i = 1; i <= 54; i ++) {
pkUrlArr.push("res/lianxi/dou/" + i + ".jpg");
}
}
function setView(arr,x,y){
for(var i=0;i<arr.length;i++){
pai = arr[i];
pai.y = y;
pai.x = 100 + x * i;
app.stage.addChild(pai);
}
}
reset.interactive = true;
reset.buttonMode = true;
reset.on("click",change1);
function change1(){
//↓↓↓ 补全重选代码开始 ↓↓↓
removeAll()
getPokerArr() //得到牌的路径数组
pkUrlArrChanged = randomSortArray(pkUrlArr) //每次点击都会重新刷新所有牌路径的排序
for(var i = 0 ; i < 54; i++){
console.log(typeof(pkUrlArrChanged)) //Object
console.log(pkUrlArrChanged.length)
console.log(pkUrlArr.length)
var poker = new PIXI.Sprite.fromImage(pkUrlArrChanged[i])
if(i >= 0 && i < 3){ //前三张牌赋给arr1,然后以此类推
arr1.push(poker)
} else if(i >= 3 && i < 20){
arr2.push(poker)
} else if(i >= 20 && i < 37){
arr3.push(poker)
} else if(i >= 37){
arr4.push(poker)
}
}
//↑↑↑ 补全重选代码结束 ↑↑↑
setView(arr1,20,100);
setView(arr2,20,200);
setView(arr3,20,300);
setView(arr4,20,400);
}
var pkUrlArrChanged = [] //存放改变过顺序的牌池
function randomSortArray(arr){
var stack = [];
while(arr.length){
var index = parseInt(Math.random() * arr.length)
stack.push(arr[index]) //这里的stack有自增机制
arr.splice(index,1); //删除index下标位的1个元素
}
return stack;
}
//清空所有牌
function removeAll(){
for(var i = 0; i < 54; i++){
if(i >= 0 && i < 3){
app.stage.removeChild(arr1[i])
} else if(i >= 3 && i < 20){
app.stage.removeChild(arr2[i - 3])
} else if(i >= 20 && i < 37){
app.stage.removeChild(arr3[i - 20])
} else if(i >= 37){
app.stage.removeChild(arr4[i - 37])
}
}
arr1.splice(0,3)
arr2.splice(0,17)
arr3.splice(0,17)
arr4.splice(0,17)
}
var arr1 = []; //存放三张图片对象
var arr2 = []; //存放第二列17张牌
var arr3 = []; //存放第三列17张牌
var arr4 = []; //存放第四列17张牌
角色扮演
方向键透明度切换
//默认透明度
btnLeft.alpha = 0.5;
btnRight.alpha = 0.5;
btnLeft.interactive = true
btnRight.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.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
}
人物转向
- 这里我们直接可以使用缩放属性来实现
- 注意锚点设置为0.5，0.5
head.anchor.set(0.5,0.5)
leg.anchor.set(0.5,0.5)
leftButton.on("click",moveLeft)
function moveLeft(){
head.x -= 5;
head.scale.x = 1;
}
rightButton.on("click",moveRight)
function moveRight(){
head.x += 5;
head.scale.x = -1;
}
敌人击飞-逐帧旋转、缩小、右上
app.ticker.add(animate)
function animate(){
//旋转
zombie.rotation -= 0.1;
// zombie.rotation += 0.1
//缩小
zombie.scale.x -= 0.005
zombie.scale.y -= 0.005
//右上移动
zombie.x += 1;
zombie.y -= 1.2;
}
血条回复（基地血条回复-帧频动画）
var app = new PIXI.Application(500,350);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/blood/bg.png");
app.stage.addChild(bg);
var blood = new PIXI.Sprite.fromImage("res/lianxi/blood/blood.png");
blood.x = 131;
blood.y = 88;
blood.width = 0;
app.stage.addChild(blood);
app.ticker.add(animate);
var frameCount = 0
function animate(){
frameCount++
if(frameCount >= 30){
frameCount = 0
if(blood.width < 190){
blood.width += 10
}
}
}
设置游戏音量动画
btn1.interactive = true
btn2.interactive = true
btn1.on("click",delVoice)
function delVoice(){
voice.scale.x -= 0.1;
}
btn2.on("click",addVoice)
function addVoice(){
voice.scale.x += 0.1
}
雨水缓缓落下
var app = new PIXI.Application(800,500);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/xyt/yun.png");
app.stage.addChild(bg);
var fz = new PIXI.Sprite.fromImage("res/lianxi/xyt/fz.png");
app.stage.addChild(fz);
fz.y = 91;
var lm = new PIXI.Sprite.fromImage("res/lianxi/xyt/lu.png");
app.stage.addChild(lm);
lm.y = 414;
var yuArr = [];
app.ticker.add(animate);
function animate(){
createYu();
moveYu();
}
//创建雨点
var frameCount = 0
function createYu(){
frameCount ++
if(frameCount === 30){
var rainWater = new PIXI.Sprite.fromImage("res/lianxi/xyt/yu.png")
app.stage.addChild(rainWater)
rainWater.x = Math.random() * 800
rainWater.y = -50
yuArr.push(rainWater)
frameCount = 0
}
}
function moveYu(){
for(var i = 0; i < yuArr.length; i++){
yuArr[i].y += 2
if(yuArr[i].y === 420){
app.stage.removeChild(yuArr[i])
yuArr.splice(i,1)
}
}
}
人物出击（起飞）
var app = new PIXI.Application(640,960);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/ldcq/bg19.jpg");
app.stage.addChild(bg);
var rock = new PIXI.Sprite.fromImage("res/lianxi/jack/jack.png");
rock.x = 300;
rock.y = 650;
rock.anchor.set(0.5,1);
app.stage.addChild(rock);
app.ticker.add(animate);
//计数器
var index = 0;
function animate(){
index ++
if(index >= 20 && index < 26){
rock.scale.x += 0.2
rock.scale.y -= 0.1
}else if(index >= 26 && index < 40){
rock.scale.x -= 0.1
rock.scale.y += 0.1
}else if(index >= 40){
rock.y -= 50
}
}
FPS游戏
射击功能和鼠标跟踪
zhunxing.interactive = true;
zhunxing.on("mousemove",moveBead);
function moveBead(event){
var pos = event.data.getLocalPosition(app.stage);
zhunxing.x = pos.x;
zhunxing.y = pos.y;
zuobiaoX.text = 'X:' + pos.x
zuobiaoY.text = 'Y:' + pos.y
}
//bullet 弹痕
var bullet = new PIXI.Sprite.fromImage("res/lianxi/sheji/danhen.png");
bullet.width = 50
bullet.height = 50
bullet.anchor.set(0.5,0.5)
zhunxing.on("click",Shoot)
function Shoot(event){
var pos = event.data.getLocalPosition(app.stage)
app.stage.addChild(bullet)
bullet.x = pos.x
bullet.y = pos.y
}
数字保留两位小数1、2
zuobiaoX.text = 'X:' + Math.round(pos.x * 10) / 10
zuobiaoY.text = 'Y:' + Math.round(pos.y * 10) / 10
- 方法二
(number).toFixed(1);
战机游戏
僚机设置
- 正常情况下我们的参照物是app窗体app.stage
- 而僚机需要把参照物设置为plane
plane.addChild(planeRight);
//右侧僚机
var planeRight = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeRight.anchor.set(0.5,0.5)
planeRight.x = 100;
planeRight.y = 60;
plane.addChild(planeRight);
两种子弹射击功能
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 bullet3 = new PIXI.Sprite.fromImage("res/bullet_01.png");
bullet3.x = 380;
bullet3.y = 560;
bullet3.anchor.set(0.5,0.5);
app.stage.addChild(bullet3);
var bullet4 = new PIXI.Sprite.fromImage("res/plane/bullet/img_bullet_13.png");
bullet4.x = 450;
bullet4.y = 560;
bullet4.anchor.set(0.5,0.5);
app.stage.addChild(bullet4);
var txt = new PIXI.Text("选择子弹");
txt.x = 360;
txt.y = 480;
txt.style.fill = 0xffffff;
app.stage.addChild(txt);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 460;
app.stage.addChild(plane);
var bullet1 = new PIXI.Sprite.fromImage("res/bullet_01.png");
bullet1.x= plane.x;
bullet1.y= plane.y-50;
bullet1.anchor.set(0.5,0.5);
app.stage.addChild(bullet1);
var bullet2 = new PIXI.Sprite.fromImage("res/plane/bullet/img_bullet_13.png");
bullet2.x= plane.x;
bullet2.y= plane.y-50;
bullet2.anchor.set(0.5,0.5);
app.stage.addChild(bullet2);
app.ticker.add(animate)
function animate(){
bullet1.y -= 10
bullet2.y -= 15
}
//点击发射红波子弹
bullet3.interactive = true;
bullet3.buttonMode = true;
bullet3.on("click",selOne);
function selOne(){
bullet1.x = plane.x
bullet1.y = plane.y-50
}
//点击发射蓝波子弹
bullet4.interactive = true;
bullet4.buttonMode = true;
bullet4.on("click",selTwo);
function selTwo(){
bullet2.x = plane.x
bullet2.y = plane.y-50
}
NPC循环移动
app.ticker.add(animate);
function animate(){
//代码修改区域
car.y -= 3;
if(car.y <= -80){
car.y = 600;
}
}
交替运动
function animate() {
car.y -= 5;
if(car.y < -100) {
car.y = 600;
if(car.x == 370){
car.x = 50
}else if(car.x == 50){
car.x = 210
}else{
car.x = 370
}
}
}
app.ticker.add(animate);
背景循环移动和循环不透明度
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_1.jpg");
bg.width = 500;
bg.height = 1200;
app.stage.addChild(bg);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 500;
app.stage.addChild(plane);
var bullet = new PIXI.Sprite.fromImage("res/bullet_01.png");
bullet.anchor.set(0.5,0.5);
bullet.x = 250;
bullet.y = 450;
app.stage.addChild(bullet);
var txtMsg = new PIXI.Text("终级BOSS即将出现",{fontSize:40,fontWeight:"bold"});
txtMsg.anchor.set(0.5,0.5);
txtMsg.x = 250;
txtMsg.y = 100;
app.stage.addChild(txtMsg);
app.ticker.add(animate)
function animate(){
bgMove();
bulletMove();
bossTip();
}
function bgMove(){
bg.y += 1
if(bg.y > 0){
bg.y = -600
}
}
function bulletMove(){
bullet.y -= 10
if(bullet.y < 0){
bullet.y = plane.y
bullet.x = plane.x
}
}
function bossTip(){
txtMsg.alpha -= 0.05
if(txtMsg.alpha <= 0.01){
txtMsg.alpha = 1
}
}
player加速移动效果
- 实现原理，使图片更快的向下移动即可
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 = 230;
car.y = 580;
var txtTip = new PIXI.Text('轻击手机屏幕，给汽车提速')
app.stage.addChild(txtTip)
txtTip.style.fill = 0x00FFFF
txtTip.x = 100
txtTip.y = 100
var txt = new PIXI.Text('提速中...')
app.stage.addChild(txt)
txt.x = 200
txt.y = 100
txt.style.fill = 0xFF1493
txt.visible = false
bgSpeed = 1
bg.interactive = true
bg.on("touchstart",speedUp)
function speedUp(){
bgSpeed += 5
txt.visible = true
txtTip.visible = false
if(bgSpeed == 80 || bgSpeed == 81){
alert('您的时速是80km/小时')
}
if(bgSpeed >= 100){
alert('您已超速，请安全驾驶')
bgSpeed = 1
}
}
app.ticker.add(function (){
bg.y += bgSpeed
if(bg.y >= 0){
bg.y = -800;
}
})
通过点击事件或满足特定条件、变更物体的移动速度
var speed = 1;
bg.interactive = true
bo.on("click",change)
function changeSpeed(){
if(speed == 1){
speed = 2
}else{
speed = 1
}
}
app.ticker.add(animate)
function animate(){
plane += speed
}
实现暂停、继续游戏
isMove = 0
//点击继续游戏
continueBtn.interactive = true
continueBtn.on("click",go_on)
function go_on(){
isMove = 1;
continueBtn.visible = false
pauseBtn.visible = true
}
//点击暂停游戏
pauseBtn.interactive = true
pauseBtn.on("click",pause)
function pause(){
isMove = 0;
continueBtn.visible = true
pauseBtn.visible = false
}
app.ticker.add(animate)
function animate(){
plane.y += isMove
}
物体碰撞
var a = 1
var b = 2
app.ticker.add(function(){
ball1.x += a
ball2.x -= b
if(ball2.x - ball1.x < ball1.x){
a *= -1
b *= -1
}
if(ball1.x <= 0){
a *= -1
}
if(ball2.x >= 1008 - ball2.width){
b *= -1
}
})
框内物体循环滚动
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);
var speedX = 1
var speedY = 1
app.ticker.add(function (){
ball.x += speedX
ball.y += speedY
if(ball.y >= 350 - ball.height){
speedY = -1
}
if(ball.x >= 500 - ball.width){
speedX = -1
}
if(ball.y <= 0){
speedY = 1
}
if(ball.x <= 0){
speedX = 1
}
})
每秒产生一架随机x轴飞机
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);
var planeList = [];//飞机列表
app.ticker.add(animate);
function animate(){
createPlane();
movePlane();
}
var frameCount = 0;
function createPlane(){
frameCount++
if(frameCount >= 60){
var plane = new PIXI.Sprite.fromImage("res/enemy_02.png");
app.stage.addChild(plane)
plane.x = Math.round(Math.random() * 500)
plane.y = -50
planeList.push(plane);
frameCount = 0
}
}
//移动飞机
function movePlane(){
for(var i = 0; i < planeList.length; i++){
planeList[i].y += 5
if(planeList[i].y >= 650){
//从数组以及图像中移除飞机
app.stage.removeChild(planeList[i])
planeList.splice(i,1);
}
console.log(planeList.length)
}
}
每半秒生成小车向左移动
var app = new PIXI.Application(800,480);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/racer/bg.jpg");
bg.rotation = Math.PI/2;
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.y = 240;
app.stage.addChild(bg);
app.ticker.add(animate);
function animate(){
moveBg();
createCar();
moveCar();
}
function moveBg(){
bg.x +=1;
if(bg.x >800){
bg.x = 0
}
}
var carArr = [];
var a = 0 //计算帧数
function createCar(){
a ++
if(a >= 30){
var car = new PIXI.Sprite.fromImage("res/racer/saiche-3_031.png");
app.stage.addChild(car)
car.x = 800;
car.y = Math.round(Math.random() * 180 + 140)
carArr.push(car)
a = 0
console.log('正常执行ing')
}
}
function moveCar(){
for(var i = carArr.length - 1; i >= 0; i--){
if(carArr[i].x >= -50){
carArr[i].x -= 5
}else{
app.stage.removeChild(carArr[i])
carArr.splice(i,1);
}
}
}
按住按键时每0.5秒射出一发子弹
var app = new PIXI.Application(400, 600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
app.stage.addChild(bg);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 200;
plane.y = 550;
app.stage.addChild(plane);
var bulletList = [];//子弹数组
app.ticker.add(animate);
function animate(){
createBullet();
moveBullet();
}
var isStart = false;//是否发射子弹
var frameCount = 0;
//创建子弹
function createBullet(){
if(isStart){
frameCount ++
if(frameCount == 30){
var bullet1 = new PIXI.Sprite.fromImage("res/plane/bullet_01.png");
bullet1.anchor.set(0.5,0.5);
bullet1.x = plane.x;
bullet1.y = plane.y-60;
app.stage.addChild(bullet1);
bulletList.push(bullet1);
frameCount = 0
}
}
}
//子弹移动
function moveBullet(){
for(var i = 0; i < bulletList.length; i++){
bulletList[i].y -= 5
if(bulletList[i].y < -50){
app.stage.removeChild(bulletList[i])
bulletList.splice(i,1)
}
}
}
bg.interactive = true;
bg.on("mousedown",downBullet);
//鼠标按下，开始发射
function downBullet(){
isStart = true
}
bg.on("mouseup",upBullet);
//鼠标弹起，停止发射
function upBullet(){
isStart = false
}
射击途中更改子弹纹理
var app = new PIXI.Application(1200,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/peas/bg.png");
bg.width = 1200;
bg.height = 600;
app.stage.addChild(bg);
var peas = new PIXI.Sprite.fromImage("res/lianxi/peas/peas.png");
peas.x = 330;
peas.y = 300;
app.stage.addChild(peas);
var huo = new PIXI.Sprite.fromImage("res/lianxi/peas/huo.png");
huo.y = 300;
huo.x = 750;
app.stage.addChild(huo);
var bullet = new PIXI.Sprite.fromImage("res/lianxi/peas/zidan1.png");
bullet.x = 400;//770;
bullet.y = 310;
app.stage.addChild(bullet);
//创建纹理
var texture1 = new PIXI.Texture.fromImage("res/lianxi/peas/zidan1.png")
var texture2 = new PIXI.Texture.fromImage("res/lianxi/peas/zidan2.png")
app.ticker.add(animate);
function animate(){
bulletMove();
}
function bulletMove(){
bullet.x += 10
if(bullet.x > 1200){
bullet.x = 400
bulletChange(1); //改变纹理,传入type参数
}else if(bullet.x > 770){
bulletChange(2);
}
}
function bulletChange(a){
if(a == 1){
bullet.texture = texture1
}else if(a == 2){
bullet.texture = texture2
}
}
商城模块
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/findFace/bg.png");
app.stage.addChild(bg);
//商城按钮
var store = new PIXI.Sprite.fromImage("res/lianxi/interface/btn1.png")
app.stage.addChild(store)
store.y=50
//拍卖按钮
var auction = new PIXI.Sprite.fromImage("res/lianxi/interface/btn0.png")
app.stage.addChild(auction)
auction.y=150
var shop = new PIXI.Sprite.fromImage("res/lianxi/findFace/gameoverPanel.png")
shop.visible = false
app.stage.addChild(shop)
shop.x = 30
var shopTitle = new PIXI.Text('商店')
shop.addChild(shopTitle)
shopTitle.x = 200
shopTitle.y = 50
var goods = new PIXI.Sprite.fromImage("res/plane/item/img_plane_item_05.png")
shop.addChild(goods)
goods.x=50
goods.y=200
var good_1_dollars = new PIXI.Text('100金币')
goods.addChild(good_1_dollars)
good_1_dollars.x = 180
good_1_dollars.y = 35
var close1 = new PIXI.Sprite.fromImage("res/lianxi/interface/close.png")
shop.addChild(close1)
close1.x = 360
close1.y = 45
var buy = new PIXI.Sprite.fromImage("res/lianxi/gunziHero/gameoverPanel.png")
buy.visible = false
app.stage.addChild(buy)
buy.x=30
var close2 = new PIXI.Sprite.fromImage("res/lianxi/interface/close.png")
buy.addChild(close2)
close2.x = 360
close2.y = 45
var buyTitle = new PIXI.Text('拍卖')
buy.addChild(buyTitle)
buyTitle.x = 200
buyTitle.y = 50
var buyContext = new PIXI.Text('模块正在开发中....')
buy.addChild(buyContext)
buyContext.x = 150
buyContext.y = 250
store.interactive = true
store.on("click",showShop)
function showShop(){
shop.visible = true;
}
close1.interactive = true
close1.on("click",closeShop)
function closeShop(){
shop.visible = false;
}
auction.interactive = true
auction.on("click",showBuy)
function showBuy(){
buy.visible = true;
}
close2.interactive = true
close2.on("click",closeBuy)
function closeBuy(){
buy.visible = false;
}
把物品放入传送带
//创建应用
var app = new PIXI.Application(500,800);
document.body.appendChild(app.view);
//添加游戏层背景图片
var bj = new PIXI.Sprite.fromImage("res/lianxi/qsqx/beijing.png");
app.stage.addChild(bj);
//添加底部背景图片
var hongdi =new PIXI.Sprite.fromImage("res/lianxi/qsqx/hongdi.png");
app.stage.addChild(hongdi);
hongdi.y=538;
//添加传送带
var csd = new PIXI.Sprite.fromImage("res/lianxi/qsqx/chuansongdai.png");
app.stage.addChild(csd);
csd.y=234.5;
//左侧物品
var goods1= new PIXI.Sprite.fromImage("res/lianxi/qsqx/daizi5.png");
app.stage.addChild(goods1);
goods1.y = 610;
goods1.x = 260;
//右侧物品
var goods2= new PIXI.Sprite.fromImage("res/lianxi/qsqx/daizi2.png");
app.stage.addChild(goods2);
goods2.y = 560;
goods2.x = 360;
goods1.interactive = true;
goods1.on("click",goods1Click);
goods2.interactive = true;
goods2.on("click",goods2Click);
function goods1Click(){
goods1.x = 450
goods1.y = 300
}
function goods2Click(){
goods2.x = 450
goods2.y = 300
}
//场景绑定帧频函数
app.ticker.add(animate);
//添加帧频函数
function animate(){
csdMove();
goodsMove();
}
//控制物品移动
function goodsMove(){
if(goods1.y == 300)
goods1.x -= 2
if(goods2.y == 300)
goods2.x -=2
}
//传送带移动函数
function csdMove(){
csd.x-=2;
if(csd.x <= -500) {
csd.x = 0;
}
}
游戏转盘旋转控制
var app =new PIXI.Application(400,713);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/turnplate-1/turnplate.png");
app.stage.addChild(bg);
var turnbg = new PIXI.Sprite.fromImage("res/lianxi/turnplate-1/zhuangpan-bg1.png");
turnbg.x = 200;
turnbg.y = 250;
turnbg.anchor.set(0.5,0.5);
app.stage.addChild(turnbg);
var turn = new PIXI.Sprite.fromImage("res/lianxi/turnplate-1/zhuangpan-bg2.png");
turn.anchor.set(0.5,0.5);
turnbg.addChild(turn);
var left = new PIXI.Sprite.fromImage("res/lianxi/qsqx/fanhuianniu.png");
left.anchor.set(0.5,0.5);
left.x = 50;
left.y = 550;
left.scale.x = 0.5;
left.scale.y = 0.5;
left.interactive = true;
bg.addChild(left);
var right = new PIXI.Sprite.fromImage("res/lianxi/qsqx/fanhuianniu.png");
right.anchor.set(0.5,0.5);
right.x = 350;
right.y = 550;
right.scale.x = -0.5;
right.scale.y = 0.5;
right.interactive = true;
bg.addChild(right);
var play = new PIXI.Sprite.fromImage("res/lianxi/fun/pic/start.png");
play.anchor.set(0.5,0.5);
play.x = 150;
play.y = 550;
play.scale.x = 0.7;
play.scale.y = 0.7;
play.interactive = true;
bg.addChild(play);
var pause = new PIXI.Sprite.fromImage("res/lianxi/fun/pic/stop.png");
pause.anchor.set(0.5,0.5);
pause.x = 250;
pause.y = 550;
pause.scale.x = 0.7;
pause.scale.y = 0.7;
pause.interactive = true;
bg.addChild(pause);
//代码编写区域
left.on("click",leftClick);
function leftClick(){
rotateSpeed = -2
}
right.on("click",rightClick);
function rightClick(){
rotateSpeed = 2
}
play.on("click",playClick);
function playClick(){
rotateSpeed = 2
}
pause.on("click",pauseClick);
function pauseClick(){
rotateSpeed = 0
}
var rotateSpeed = 2
app.ticker.add(animate);
function animate(){
//角度制计算公式（弧度）
turn.rotation += (Math.PI/180) * rotateSpeed
}
判断星座（非对象）
var month = 6;
var day = 30;
val.text = "不在此程序的查询范围"
function judge(){
//代码编写区域
if(month == 3){
if(day > 0 && day <= 20){
val.text = '双鱼座'
}else{
val.text = '白羊座'
}
}else if(month == 4){
if(day > 0 && day < 20){
val.text = '白羊座'
}else{
val.text = '金牛座'
}
}else if(month == 5){
if(day > 0 && day <21){
val.text = '金牛座'
}else{
val.text = '双子座'
}
}else if(month == 6){
if(day > 0 && day < 22){
val.text = '双子座'
}else{
val.text = '巨蟹座'
}
}
}
打砖块
规律砖块打印（看一眼）
var app = new PIXI.Application(495,780);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/zhuan/bg3.png");
bg.x = 0;
bg.y = 0;
app.stage.addChild(bg);
var picture = ["1_06","2_08","3_10","4_12","5_14","6_16","7_18"];
function Brick(x,y,z){
var brick = new PIXI.Sprite.fromImage("res/lianxi/zhuan/zhuankuai-"+z+".png");
bg.addChild(brick);
brick.x = x;
brick.y = y;
}
function add(){
//代码编写区域
for(var i = 0; i < 13; i++){
for(var k = 0; k < 13; k++){
if(i % 2 !== 0 && k % 2 === 0){
var x = 33 * i + 33;
var y = 33 * k + 113;
var z = Math.round(Math.random()*6);
Brick(x,y,picture[z]);
}else if(i % 2 === 0 && k % 2 !== 0){
x = 33 * i + 33;
y = 33 * k + 113;
z = Math.round(Math.random()*6);
Brick(x,y,picture[z]);
}else{
continue;
}
}
}
}
add();
游戏开发实战
飞机大战（正规代码）
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);
var bulletList = [];//长机子弹列表
var leftBulletList = [];//左僚机子弹列表
var rightBulletList = [];//右僚机子弹列表
var enemyList = [];//敌机列表
//长机
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 500;
app.stage.addChild(plane);
//左僚机
var planeLeft = new PIXI.Sprite.fromImage("res/plane/liaoji_02_11.png");
planeLeft.anchor.set(0.5,0.5);
planeLeft.x = -100;
planeLeft.y = 50;
plane.addChild(planeLeft);
//右僚机
var planeRight = new PIXI.Sprite.fromImage("res/plane/liaoji_02_11.png");
planeRight.anchor.set(0.5,0.5);
planeRight.x = 100;
planeRight.y = 50;
plane.addChild(planeRight);
//移动鼠标
bg.interactive = true;
bg.on("mousemove",movePlane);
function movePlane(event){
var pos = event.data.getLocalPosition(app.stage);
plane.x = pos.x;
plane.y = pos.y;
}
//帧频函数
app.ticker.add(animate);
function animate(){
createBullet();
moveBullet();
createEnemy();
moveEnemy();
crash();
}
//创建子弹
var cbIndex = 0;
function createBullet(){
if(cbIndex == 10){
//长机子弹
var bullet = new PIXI.Sprite.fromImage("res/plane/bullet/img_bullet_14.png");
bullet.anchor.set(0.5,0.5);
bullet.x = plane.x;
bullet.y = plane.y - 50;
app.stage.addChild(bullet);
bulletList.push(bullet);
//左僚机子弹
var leftBullet = new PIXI.Sprite.fromImage("res/plane/bullet/img_bullet_13.png");
leftBullet.anchor.set(0.5,0.5);
leftBullet.x = plane.x-100;
leftBullet.y = plane.y - 10;
app.stage.addChild(leftBullet);
leftBulletList.push(leftBullet);
//右僚机子弹
var rightBullet = new PIXI.Sprite.fromImage("res/plane/bullet/img_bullet_13.png");
rightBullet.anchor.set(0.5,0.5);
rightBullet.x = plane.x+100;
rightBullet.y = plane.y - 10;
app.stage.addChild(rightBullet);
rightBulletList.push(rightBullet);
cbIndex = 0;
}
cbIndex++;
}
//移动子弹
function moveBullet(){
//移动长机子弹
for(var i=bulletList.length-1;i>=0;i--){
var bullet = bulletList[i];
bullet.y -= 10;
if(bullet.y < -100){
app.stage.removeChild(bullet);
bulletList.splice(i,1);
}
}
//移动左僚机子弹
for(var i=leftBulletList.length-1;i>=0;i--){
var leftBullet = leftBulletList[i];
leftBullet.y -= 10;
if(leftBullet.y < -100){
app.stage.removeChild(leftBullet);
leftBulletList.splice(i,1);
}
}
//移动右僚机子弹
for(var i=rightBulletList.length-1;i>=0;i--){
var rightBullet = rightBulletList[i];
rightBullet.y -= 10;
if(rightBullet.y < -100){
app.stage.removeChild(rightBullet);
rightBulletList.splice(i,1);
}
}
}
//创建敌机
var ceIndex = 0;
function createEnemy(){
if(ceIndex == 30){
var enemy = new PIXI.Sprite.fromImage("res/enemy_04.png");
enemy.anchor.set(0.5,0.5);
enemy.x = Math.random()*500;
enemy.y = -100;
app.stage.addChild(enemy);
enemyList.push(enemy);
ceIndex = 0;
}
ceIndex++;
}
//移动敌机
function moveEnemy(){
for(var i=enemyList.length-1;i>=0;i--){
var enemy = enemyList[i];
enemy.y += 5;
if(enemy.y > 700){
app.stage.removeChild(enemy);
enemyList.splice(i,1);
}
}
}
//碰撞
var pos = 0;
var running = true //终止内层for
function crash(){
running = true //从这里重新开始，有点break的感觉
for(var i = enemyList.length - 1; i >= 0; i--){
//长机子弹
if(running){
for(var j = bulletList.length - 1; j >= 0; j--){
try{
pos = Math.pow(enemyList[i].x - bulletList[j].x,2) + Math.pow(enemyList[i].y - bulletList[j].y,2)
if(pos < 80 * 80){
//移除子弹
app.stage.removeChild(bulletList[j])
bulletList.splice(j,1)
//移除enemyPlane
app.stage.removeChild(enemyList[i])
enemyList.splice(i,1)
running = false //终止内层for
break;
}
console.log("1")
}catch(e){
console.log('you are wrong at Master')
}
}
}
// 左僚机子弹
if(running){
for(var j = leftBulletList.length - 1; j >= 0; j--){
try{
pos = Math.pow(enemyList[i].x - leftBulletList[j].x,2) + Math.pow(enemyList[i].y - leftBulletList[j].y,2)
if(pos < 80 * 80){
//移除子弹
app.stage.removeChild(leftBulletList[j])
leftBulletList.splice(j,1)
//移除enemyPlane
app.stage.removeChild(enemyList[i])
enemyList.splice(i,1)
running = false;
break;
}
console.log("2")
}catch(e){
console.log('you are wrong at left')
}
}
}
// 右僚机子弹
if(running){
for(var j = rightBulletList.length - 1; j >= 0; j--){
try{
pos = Math.pow(enemyList[i].x - rightBulletList[j].x,2) + Math.pow(enemyList[i].y - rightBulletList[j].y,2)
if(pos < 80 * 80){
//移除子弹
app.stage.removeChild(rightBulletList[j])
rightBulletList.splice(j,1)
//移除enemyPlane
app.stage.removeChild(enemyList[i])
enemyList.splice(i,1)
running = false;
break;
}
console.log("2")
}catch(e){
console.log('you are wrong at right')
}
}
}
}
}
飞机大战（自己的代码）
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_1.jpg");
bg.width = 500;
bg.height = 1200;
app.stage.addChild(bg);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 250;
plane.y = 500;
app.stage.addChild(plane);
//提示文
var txtMsg = new PIXI.Text("终级BOSS即将出现",{fontSize:40,fontWeight:"bold"});
txtMsg.anchor.set(0.5,0.5);
txtMsg.x = 250;
txtMsg.y = 100;
app.stage.addChild(txtMsg);
//右侧僚机
var planeRight = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeRight.anchor.set(0.5,0.5)
planeRight.x = 100;
planeRight.y = 60;
plane.addChild(planeRight);
//左侧僚机
var planeLeft = new PIXI.Sprite.fromImage("res/plane/liaoji_01_11.png");
planeLeft.anchor.set(0.5,0.5)
planeLeft.x = -100;
planeLeft.y = 60;
plane.addChild(planeLeft);
//player飞机移动
bg.interactive = true
bg.on('touchmove',playerMove)
//触屏事件
function playerMove(event){
var pos = event.data.getLocalPosition(app.stage)
plane.y = pos.y
plane.x = pos.x
}
//帧动画
app.ticker.add(animate)
function animate(){
//背景控制
bgMove();
//子弹控制
addBullet();
bulletMove();
//僚机控制
//僚机子弹控制
childBullet_Left();
childBullet_Right();
bossTip();
//敌机
createEnemyPlane();
enemyPlaneMove();
}
//背景控制
function bgMove(){
bg.y += 1
if(bg.y > 0){
bg.y = -600
}
}
var bulletList = [] //存放子弹对象
var time = 0 //控制子弹频率
//子弹控制
//创建子弹
function addBullet(){
if(time >= 10){
var bullet = PIXI.Sprite.fromImage("res/plane/bullet_02.png")
bullet.anchor.set(0.5,0.5)
bullet.x = plane.x;
bullet.y = plane.y;
app.stage.addChild(bullet);
//将子弹存入bulletList数组
bulletList.push(bullet);
time = 0;
}
time++;
}
//player主角色的bullet
function bulletMove(){
for(var i = 0; i < bulletList.length; i++){
//移动bulletList数组中的子弹
bulletList[i].y -= 8;
//遍历数组，如果子弹超出边界则删除子弹
if(bulletList[i].y < -100){
app.stage.removeChild()
bulletList.splice(i,1);
}
}
}
//左僚机的bullet
var leftPlane = true //控制左僚机是否存在
var bulletList_Left = []
function childBullet_Left(){
if(leftPlane){ //如果左僚机存在
if(time >= 10){
var bullet = PIXI.Sprite.fromImage("res/plane/bullet_01.png")
bullet.anchor.set(0.5,0.5)
bullet.x = planeLeft.x + 100;
bullet.y = planeLeft.y - 90
planeLeft.addChild(bullet); //跟踪左僚机
//将子弹存入bulletList数组
bulletList_Left.push(bullet); //这里与player飞机的子弹并不影响，因为僚机的子弹到边缘后必定会被销毁
}
//左僚机子弹移动
for(var i = 0; i < bulletList_Left.length; i++){
//移动bulletList_Left数组中的子弹
bulletList_Left[i].y -= 8;
//遍历数组，如果子弹超出边界则删除子弹
if(bulletList_Left[i].y < -700){ //因为参照物是planeLeft，所以给的-600
app.stage.removeChild()
bulletList_Left.splice(i,1);
}
}
}
}
//右僚机的bullet
var rightPlane = true //控制右僚机是否存在
var bulletList_Right = []
function childBullet_Right(){
if(rightPlane){ //如果左僚机存在
if(time >= 10){
var bullet = PIXI.Sprite.fromImage("res/plane/bullet_01.png")
bullet.anchor.set(0.5,0.5)
bullet.x = planeRight.x - 100;
bullet.y = planeRight.y - 90
planeRight.addChild(bullet); //跟踪左僚机
//将子弹存入bulletList数组
bulletList_Right.push(bullet); //这里与player飞机的子弹并不影响，因为僚机的子弹到边缘后必定会被销毁
}
//左僚机子弹移动
for(var i = 0; i < bulletList_Right.length; i++){
//移动bulletList_Left数组中的子弹
bulletList_Right[i].y -= 8;
//遍历数组，如果子弹超出边界则删除子弹
if(bulletList_Right[i].y < -700){ //因为参照物是planeLeft，所以给的-700
app.stage.removeChild()
bulletList_Right.splice(i,1);
}
}
}
}
function bossTip(){
txtMsg.alpha -= 0.05
if(txtMsg.alpha <= 0.01){
txtMsg.alpha = 1
}
}
//敌机
//敌机
//创建敌机
var enemyPlaneList = []
var frameCount = 0; //统计帧数
function createEnemyPlane(){
frameCount++
if(frameCount >= 60){
var enemyPlane = new PIXI.Sprite.fromImage("res/enemy_02.png");
app.stage.addChild(enemyPlane)
enemyPlane.x = Math.round(Math.random() * 470 + 30)
enemyPlane.y = -50
enemyPlane.anchor.set(0.5,0.5)
enemyPlaneList.push(enemyPlane);
frameCount = 0
}
}
//enemy飞机移动
function enemyPlaneMove(){
var i = 0
for(; i < enemyPlaneList.length; i++){
enemyPlaneList[i].y += 5
if(enemyPlaneList[i].y >= 650){
//从数组以及图像中移除飞机
app.stage.removeChild(enemyPlaneList[i])
enemyPlaneList.splice(i,1);
}
//碰撞检测，勾股定理
//假设子弹宽高分别是30，50
//假设enemy宽高分别是100，50
for(var j = 0; j < bulletList.length; j++){
var leg1 = Math.pow(bulletList[j].x - enemyPlaneList[i].x,2) //直角边平方
var leg2 = Math.pow(bulletList[j].y - enemyPlaneList[i].y,2)
var value = leg1 + leg2
if(value < 45 * 45){ //这里的45是15 + 30估计出来的，并不准确，可以适当调
app.stage.removeChild(enemyPlaneList[i])
}
}
// console.log(enemyPlaneList.length)
}
}
天天酷跑
var app = new PIXI.Application(700,500);
document.body.appendChild(app.view);
var bgUp = new PIXI.Sprite.fromImage("res/pao/bg_back_02.png");
bgUp.width = 700;
bgUp.height = 250;
app.stage.addChild(bgUp);
var bgDown = new PIXI.Sprite.fromImage("res/pao/bg_mid_01.png");
bgDown.width = 700;
bgDown.height = 250;
bgDown.y = 250;
app.stage.addChild(bgDown);
var road = new PIXI.Sprite.fromImage("res/pao/ext/ground03_1.png");
road.y = 300;
road.width = 1400;
app.stage.addChild(road);
var textureList = [];
for(var i=1;i<=9;i++){
//创建纹理，并添加到数组
textureList.push(new PIXI.Texture.fromImage("res/pao/player00"+i+".png"));
}
var player = new PIXI.Sprite.fromImage("res/pao/player001.png");
player.x = 100;
player.y = 210;
app.stage.addChild(player);
app.ticker.add(animate);
function animate(){
moveRoad();
changeTexture();
}
//移动桥
function moveRoad(){
road.x -= 10;
if(road.x < -700){
road.x = 0;
}
}
//改变纹理
var index = 0;
function changeTexture(){
index++
for(var i = 0; i < textureList.length; i++){
player.texture = textureList[index];
if(index >= textureList.length){
index = 0
}
}
}
天天酷跑（游戏改）
var app = new PIXI.Application(700,500);
document.body.appendChild(app.view);
var bgUp = new PIXI.Sprite.fromImage("res/pao/bg_back_02.png");
bgUp.width = 700;
bgUp.height = 250;
app.stage.addChild(bgUp);
var bgDown = new PIXI.Sprite.fromImage("res/pao/bg_mid_01.png");
bgDown.width = 700;
bgDown.height = 250;
bgDown.y = 250;
app.stage.addChild(bgDown);
var road = new PIXI.Sprite.fromImage("res/pao/ext/ground03_1.png");
road.y = 300;
road.width = 1400;
app.stage.addChild(road);
var textureList = [];
for(var i=1;i<=9;i++){
//创建纹理，并添加到数组
textureList.push(new PIXI.Texture.fromImage("res/pao/player00"+i+".png"));
}
var player = new PIXI.Sprite.fromImage("res/pao/player001.png");
player.x = 100;
player.y = 210;
app.stage.addChild(player);
app.ticker.add(animate);
function animate(){
moveRoad();
changeTexture();
//金币
createGold();
goldMove();
//金币碰撞检测
crach_Gold_Player();
//积分面板
integralPanel();
//跳跃键以及跳跃功能
jumpingTime++ //计算按下跳跃的时间，当时间等于xx时，控制其他变量
if(jumpingType === 1){
if(jumpingTime <= 30){
player.y -= 1 / 2 * 0.05 * Math.pow(jumpingTime,2) //上升的时候使用牛顿定理
player.x += 1 / 2 * 0.03 * Math.pow(jumpingTime,2)
}else if(jumpingTime > 30){
player.y += 1 / 2 * 0.05 * Math.pow(jumpingTime - 30,2)
player.x -= 1 / 2 * 0.03 * Math.pow(jumpingTime - 30,2)
}
if(jumpingTime >= 30){ //多少帧切换下一个纹理
player.texture = jumping02;
}
if(jumpingTime >= 60){
jumpingType = 0 //使落地后的player还原跑步状态
}
}
//生命值
playerLifePanel();
}
//移动桥
function moveRoad(){
road.x -= 3;
if(road.x < -700){
road.x = 0;
}
}
//改变奔跑纹理
var index = 0;
var indexCount = 0 //用于减速纹理
function changeTexture(){
if(jumpingType === 0){ //当没有点击跳跃键时，奔跑纹理持续更改
indexCount++
if(indexCount % 10 === 0){ //indexCount是十的倍数的话
index ++
}
for(var i = 0; i < textureList.length; i++){
player.texture = textureList[index];
if(index >= textureList.length){
index = 0
}
}
}
}
//生成金币
var whiteGoldList = [] //存放银色金币的数组
var goldFrameCount = 0 //用于控制多少帧创建一个金币
function createGold(){
goldFrameCount ++
if(goldFrameCount >= 90){
var whiteGold = new PIXI.Sprite.fromImage("res/pao/gold.png") //这里我使用的是黄色金币
whiteGold.x = 750
whiteGold.y = Math.round(Math.random() * 200 + 50) //250到450之间
app.stage.addChild(whiteGold);
whiteGoldList.push(whiteGold)
goldFrameCount = 0
}
}
function goldMove(){
for(var i = whiteGoldList.length - 1; i >= 0; i--){
whiteGoldList[i].x -= 4;
if(whiteGoldList[i].x <= -50){
//移除金币
app.stage.removeChild(whiteGoldList[i])
whiteGoldList.splice(i,1);
//每当从屏幕外移除一枚金币，使角色生命值减一
playerLife.text = '生命值：'+ (--life) + ' X ⭐'
if(life === 0){
gameOver();
}
}
}
}
//金币与角色的碰撞检测
var pos = 0
var integral = 0 //用于给integral_Text赋值
function crach_Gold_Player(){
for(var i = whiteGoldList.length - 1; i >= 0; i--){
pos = Math.pow(whiteGoldList[i].x - player.x,2) + Math.pow(whiteGoldList[i].y - player.y,2)
if(pos < 70 * 70){
//移除金币
app.stage.removeChild(whiteGoldList[i])
whiteGoldList.splice(i,1);
// console.log('移除金币')
//增加积分
integral += 1
integral_Text.text = '总积分：' + integral
}
}
}
//积分显示
var integral_Text = new PIXI.Text('总积分：0')
function integralPanel(){
integral_Text.x = 30
integral_Text.y = 10
app.stage.addChild(integral_Text)
}
//跳跃键以及跳跃功能
var jumpBtn = new PIXI.Sprite.fromImage("res/pao/jumpBtn.png");
jumpBtn.x = 500;
jumpBtn.y = 350;
app.stage.addChild(jumpBtn);
jumpBtn.interactive = true
//跳跃动作
var jumping01 = new PIXI.Texture.fromImage("res/pao/player012.png") //准备起跳纹理
var jumping02 = new PIXI.Texture.fromImage("res/pao/player014.png") //准备跳跃ing纹理
var jumpingType = 0 //跳跃类型 作为其他纹理改变的条件
var jumpingTime = 0 //跳跃计时，一定帧数内纹理不会改变
var jumpingStartTime = 0 //跳跃计时的开始时间
var playerInitializeY = 0 //用于初始化player.y
jumpBtn.on("touchstart",jumpClick)
function jumpClick(){
console.log(jumpingTime)
jumpingTime = 0 //每次按下，时间清空
player.texture = jumping01; //变更纹理为“准备起跳”
jumpingType = 1 //使跑步状态停止
}
//生命值
var life = 3
var playerLife = new PIXI.Text('生命值：' + life + ' X ⭐')
function playerLifePanel(){
playerLife.x = 400
playerLife.y = 10
app.stage.addChild(playerLife)
}
//游戏结束
var gameoverText = new PIXI.Text(' ')
function gameOver(){
app.stage.addChild(gameoverText)
gameoverText.x = 100
gameoverText.y = 100
gameoverText.text = '你的最高得分为:' + integral_Text.text.substring(integral_Text.text.indexOf('：') + 1) + ' 请刷新页面重新开始游戏'
//使其它选项隐藏
playerLife.visible = false
integral_Text.visible = false
}
闹钟定时器
//0代表游戏未开，1代表游戏开始
var gameType = 0;
var app = new PIXI.Application(500,800);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/findFace/bg.png");
app.stage.addChild(bg);
//进度条
var tiaoBg = new PIXI.Sprite.fromImage("res/lianxi/findFace/tiaoBg.png");
app.stage.addChild(tiaoBg);
tiaoBg.x = 45;
tiaoBg.y = 70;
var tiao = new PIXI.Sprite.fromImage("res/lianxi/findFace/tiao.png");
tiaoBg.addChild(tiao);
tiao.x = 2;
tiao.y = 2;
//时钟
var tiaoIcon = new PIXI.Sprite.fromImage("res/lianxi/findFace/tiaoIcon.png");
tiaoBg.addChild(tiaoIcon);
tiaoIcon.anchor.x = 0.5;
tiaoIcon.x = 380;
tiaoIcon.y = -30;
var tiaoAllTime = 60 * 60;//固定 60秒 * 60帧
var tiaoTime = 60 * 60;//当前
//文本样式
var style = {
font : '20px 微软雅黑',//加粗 倾斜 字号 字体名称
fill : '#F7EDCA',//颜色
stroke : '#4a1850',//描边颜色
strokeThickness : 3,//描边宽度
dropShadow : true,//开启阴影
dropShadowColor : '#000000',//阴影颜色
dropShadowAngle : Math.PI / 6,//阴影角度
dropShadowDistance : 2,//投影距离
};
//文本
var str = "Time: "+tiaoTime/60;
//创建文本
var timeTxt = new PIXI.Text(str,style);
app.stage.addChild(timeTxt);
timeTxt.x = 380;
timeTxt.y = 10;
//开始按钮
var startBtn = new PIXI.Sprite.fromImage("res/lianxi/findFace/start.png");
startBtn.x = 129;
startBtn.y = 450;
app.stage.addChild(startBtn);
startBtn.interactive = true
startBtn.on("click",startGame)
function startGame(){
gameType = 1
startBtn.visible = false
}
app.ticker.add(function(){
if(gameType == 1){
tiaoTime--
if(tiaoTime <= 0){
tiaoTime = 0
gameType = 0
}
//闹钟图标移动
tiaoIcon.x = 380 * tiaoTime / tiaoAllTime
//Time文本变更
timeTxt.text = 'time:' + (tiaoTime/60).toFixed(1)
//进度条变更
tiao.scale.x = tiaoTime / tiaoAllTime
}
})
游戏界面加载
var app =new PIXI.Application(400,700);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/royal/loadingBg.jpg");
app.stage.addChild(bg);
var progress = new PIXI.Sprite.fromImage("res/lianxi/jumpRect/overBlock.png");
app.stage.addChild(progress);
progress.width = 0;
progress.height = 25;
progress.y = 675;
var numtext = new PIXI.Text(0+"%");
numtext.x = 200;
numtext.y = 675;
numtext.style.fill = 0xffffff;
numtext.anchor.set(0.5,0);
app.stage.addChild(numtext);
//代码编写区域
var num = 0
app.ticker.add(animate);
function animate(){
if(num < 100){
num += 1
progress.width += 400 / 100
}
numtext.text = num + "%"
}
游戏进度条（缩放比例10s内从0到1）
var app = new PIXI.Application(500,200);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/collision/bg.png");
app.stage.addChild(bg);
//进度条
var tiaoBg = new PIXI.Sprite.fromImage("res/lianxi/findFace/tiaoBg.png");
app.stage.addChild(tiaoBg);
tiaoBg.x = 40;
tiaoBg.y = 80;
var tiao = new PIXI.Sprite.fromImage("res/lianxi/findFace/tiao.png");
tiaoBg.addChild(tiao);
tiao.x = 2;
tiao.y = 2;
tiao.scale.x = 0;
app.ticker.add(animate);
function animate(){
if(tiao.scale.x > 1){
}else{
tiao.scale.x += 0.1 / 60
}
}
Player移动
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 = 330;
jack.anchor.x = 0.5;
jack.anchor.y = 0.5;
app.stage.addChild(jack);
var qj = new PIXI.Sprite.fromImage("res/lianxi/jack/bg1.png");
app.stage.addChild(qj);
var upBtn = new PIXI.Sprite.fromImage("res/lianxi/jack/shang.png");
app.stage.addChild(upBtn);
upBtn.x = 345;
upBtn.y = 350;
var downBtn = new PIXI.Sprite.fromImage("res/lianxi/jack/xia.png");
app.stage.addChild(downBtn);
downBtn.x = 345;
downBtn.y = 404;
var leftBtn = new PIXI.Sprite.fromImage("res/lianxi/jack/zuo.png");
app.stage.addChild(leftBtn);
leftBtn.x = 298;
leftBtn.y = 378;
var rightBtn = new PIXI.Sprite.fromImage("res/lianxi/jack/you.png");
app.stage.addChild(rightBtn);
rightBtn.x = 392;
rightBtn.y = 378;
var upType = false
var downType = false
var leftType = false
var rightType = false
upBtn.interactive = true;
upBtn.on("mousedown",goShang);
function goShang(){
upType = true
}
upBtn.on("mouseup",stopShang);
function stopShang(){
upType = false
}
downBtn.interactive = true;
downBtn.on("mousedown",goXia);
function goXia(){
downType = true
}
downBtn.on("mouseup",stopXia);
function stopXia(){
downType = false
}
leftBtn.interactive = true;
leftBtn.on("mousedown",goZuo);
function goZuo(){
jack.scale.x = -1;
leftType = true
}
leftBtn.on("mouseup",stopZuo);
function stopZuo(){
leftType = false
}
rightBtn.interactive = true;
rightBtn.on("mousedown",goYou);
function goYou(){
jack.scale.x = 1;
rightType = true
}
rightBtn.on("mouseup",stopYou);
function stopYou(){
rightType = false
}
app.ticker.add(animate);
function animate(){
if(upType)
jack.y -= 2
if(downType)
jack.y += 2
if(leftType)
jack.x -= 2
if(rightType)
jack.x += 2
}
down、up判断实现Player移动
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);
bg.y=-800;
//创建赛车
var myCar = new PIXI.Sprite.fromImage("res/racer/saiche-2_03.png");
myCar.anchor.set(0.5,0.5);
myCar.x=230;
myCar.y=580;
app.stage.addChild(myCar);
//开启背景点击事件
bg.interactive = true;
bg.on("mousedown",cardown);
bg.on("mouseup",carup);
downPosX = 0
//背景移动
function animate(){
bg.y+=3;
if(bg.y>0){
bg.y=-800;
}
}
//帧频函数
app.ticker.add(animate);
//鼠标点击事件
function cardown(event){
var pos = event.data.getLocalPosition(app.stage)
downPosX = pos.x
}
//鼠标松开事件
function carup(event){
var pos = event.data.getLocalPosition(app.stage)
if(pos.x - downPosX > 0){
myCar.x += 50
}else if(pos.x - downPosX < 0){
myCar.x -= 50
}
}
计算器显示器数字拼接
var app =new PIXI.Application(290,440);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/ji/bg.png");
app.stage.addChild(bg);
var num1 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq12.png");
num1.x = 50;
num1.y = 150;
num1.anchor.set(0.5,0.5);
app.stage.addChild(num1);
var num2 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq13.png");
num2.x = 110;
num2.y = 150;
num2.anchor.set(0.5,0.5);
app.stage.addChild(num2);
var numtext = new PIXI.Text("");
app.stage.addChild(numtext);
numtext.x = 20;
numtext.y = 55;
//代码编写区域
var app =new PIXI.Application(290,440);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/ji/bg.png");
app.stage.addChild(bg);
var num1 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq12.png");
num1.x = 50;
num1.y = 150;
num1.anchor.set(0.5,0.5);
app.stage.addChild(num1);
var num2 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq13.png");
num2.x = 110;
num2.y = 150;
num2.anchor.set(0.5,0.5);
app.stage.addChild(num2);
var numtext = new PIXI.Text("");
app.stage.addChild(numtext);
numtext.x = 20;
numtext.y = 55;
//代码编写区域
var num = 0
// var stringNum = ''
// var count = 0
num1.interactive = true;
num1.on("click",addnum1);
function addnum1(){
if(num < 17){
// stringNum += "1"
// num = Number(stringNum)
numtext.text += "1"
// console.log(stringNum.typeof)
// console.log(num.typeof)
num++
}
}
num2.interactive = true;
num2.on("click",addnum2);
function addnum2(){
if(num < 17){
// stringNum += "1"
// num = Number(stringNum)
numtext.text += "2"
// console.log(stringNum.typeof)
// console.log(num.typeof)
num++
}
}
计算器（1+2）功能实现
var app =new PIXI.Application(290,440);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/ji/bg.png");
app.stage.addChild(bg);
var num1 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq12.png");
num1.x = 50;
num1.y = 150;
num1.anchor.set(0.5,0.5);
app.stage.addChild(num1);
var num2 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq13.png");
num2.x = 110;
num2.y = 150;
num2.anchor.set(0.5,0.5);
app.stage.addChild(num2);
var addBtn = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq11.png");
addBtn.x = 230;
addBtn.y = 210;
addBtn.anchor.set(0.5,0.5);
app.stage.addChild(addBtn);
var minusBtn = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq7.png");
minusBtn.x = 230;
minusBtn.y = 270;
minusBtn.anchor.set(0.5,0.5);
app.stage.addChild(minusBtn);
var equalBtn = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq15.png");
equalBtn.x = 230;
equalBtn.y = 360;
equalBtn.anchor.set(0.5,0.5);
app.stage.addChild(equalBtn);
var emptyBtn = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq0.png");
emptyBtn.x = 50;
emptyBtn.y = 390;
emptyBtn.anchor.set(0.5,0.5);
app.stage.addChild(emptyBtn);
var numtext = new PIXI.Text("");
numtext.anchor.set(0.5,0.5);
app.stage.addChild(numtext);
numtext.x = 145;
numtext.y = 70;
function updata(){
numtext.text = number1+operator+number2;
}
//代码编写区域
var number1 = "";
var number2 = "";
var operator = "";
var result = "";
//按钮1
num1.interactive = true;
num1.on("click",addnum1);
function addnum1(){
if(number1 === ''){
number1 = 1
}
if(operator !== ''){
number2 = 1
}
updata();
}
//按钮2
num2.interactive = true;
num2.on("click",addnum2);
function addnum2(){
if(number1 === ''){
number1 = 2
}
if(operator !== ''){
number2 = 2
}
updata();
}
//加号
addBtn.interactive = true;
addBtn.on("click",Add);
function Add(){
if(number1 !== ''){
operator = '+'
}else if(number1 === ''){
operator = ''
}
updata();
}
//减号
minusBtn.interactive = true;
minusBtn.on("click",Minus);
function Minus(){
if(number1 !== ''){
operator = '-'
}else if(number1 === ''){
operator = ''
}
updata();
}
//等号
equalBtn.interactive = true;
equalBtn.on("click",Equal);
function Equal(){
if(number2 !== ''){
if(operator === '+'){
result = number1 + number2
numtext.text = number1 + operator + number2 + '=' + result
console.log(result)
}else if(operator === '-'){
result = number1 - number2
numtext.text = number1 + operator + number2 + '=' + result
console.log(result)
}
}
}
//清空
emptyBtn.interactive = true;
emptyBtn.on("click",Empty);
function Empty(){
numtext.text = ' ';
number1 = ''
number2 = ''
operator = ''
result = ''
}
计算器加法功能完善
var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
//存储所有数字按扭的数组
var btnNumberList = [];
//背景
var bg = new PIXI.Sprite.fromImage("res/lianxi/ji/bg.png");
bg.width = 300;
bg.height = 500;
bg.x = 250;
bg.y = 250;
bg.anchor.set(0.5,0.5);
app.stage.addChild(bg);
//显示文本
var txtEditor = new PIXI.Text();
txtEditor.x = 120;
txtEditor.y = 60;
app.stage.addChild(txtEditor);
//清屏按扭
var btnClear = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq0.png");
btnClear.x = 130;
btnClear.y = 140;
app.stage.addChild(btnClear);
//数字按扭
var btn1 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq12.png");
btn1.x = 130;
btn1.y = 200;
app.stage.addChild(btn1);
var btn2 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq13.png");
btn2.x = 190;
btn2.y = 200;
app.stage.addChild(btn2);
var btn3 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq14.png");
btn3.x = 250;
btn3.y = 200;
app.stage.addChild(btn3);
var btn4 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq8.png");
btn4.x = 130;
btn4.y = 260;
app.stage.addChild(btn4);
var btn5 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq9.png");
btn5.x = 190;
btn5.y = 260;
app.stage.addChild(btn5);
var btn6 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq10.png");
btn6.x = 250;
btn6.y = 260;
app.stage.addChild(btn6);
var btn7 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq4.png");
btn7.x = 130;
btn7.y = 320;
app.stage.addChild(btn7);
var btn8 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq5.png");
btn8.x = 190;
btn8.y = 320;
app.stage.addChild(btn8);
var btn9 = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq6.png");
btn9.x = 250;
btn9.y = 320;
app.stage.addChild(btn9);
//加法按扭
var btnAdd = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq11.png");
btnAdd.x = 320;
btnAdd.y = 200;
app.stage.addChild(btnAdd);
//等号按扭
var btnResult = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq15.png");
btnResult.x = 320;
btnResult.y = 260;
app.stage.addChild(btnResult);
//将所有数字按扭，添加到数组
btnNumberList.push(btn1);
btnNumberList.push(btn2);
btnNumberList.push(btn3);
btnNumberList.push(btn4);
btnNumberList.push(btn5);
btnNumberList.push(btn6);
btnNumberList.push(btn7);
btnNumberList.push(btn8);
btnNumberList.push(btn9);
//数字按扭添加事件
for(var i=0;i<btnNumberList.length;i++){
btnNumberList[i].interactive = true;
btnNumberList[i].on("touchstart",changeEditor);
}
function changeEditor(event){
//这里我们使用event.target获取被点击的图像
var str = txtEditor.text.trim();
if(str.length < 15 && str.indexOf('=') === -1){ //当str到达15个长度时并且字符串中包含等号时不能再添加数据，+也占一个字符长度
if(event.target === btn1){
txtEditor.text += '1'
}else if(event.target === btn2){
txtEditor.text += '2'
}else if(event.target === btn3){
txtEditor.text += '3'
}else if(event.target === btn4){
txtEditor.text += '4'
}else if(event.target === btn5){
txtEditor.text += '5'
}else if(event.target === btn6){
txtEditor.text += '6'
}else if(event.target === btn7){
txtEditor.text += '7'
}else if(event.target === btn8){
txtEditor.text += '8'
}else if(event.target === btn9){
txtEditor.text += '9'
}
}else{
alert('please click "C" before you input any number')
}
}
//清屏按扭添加事件
btnClear.interactive = true;
btnClear.on("touchstart",clearEditor);
function clearEditor(){
txtEditor.text = "";
}
//加法按扭添加事件
btnAdd.interactive = true;
btnAdd.on("touchstart",add);
function add(){
var str = txtEditor.text.trim(); //过滤首尾空格
if(str.substr(str.length - 1) !== '+' && txtEditor.text !== ' ' && str.indexOf('=') === -1){ //如果最后一个字符不是“+”，并且str不是空值，则
txtEditor.text += '+'
}else{
alert('please check your inputBox,Mybe your content "lastChar" is already include "+" or this inputBox is empty or your last result is not clear')
}
}
//等号按扭添加事件
btnResult.interactive = true;
btnResult.on("touchstart",getResult);
function getResult(){
var str = txtEditor.text.trim(); //赋值并去掉空格
var lastChar = str.substr(str.length - 1) //获得最后一个字符，是否等于+
if(str.indexOf('=') === -1 && lastChar !== '+'){ //如果str中没有找到=，并且lastChar不等于+，则
var numberList = str.split('+') //以+为数组分割点，切割数组元素，转为Number后计算
var sum = 0 //用来存取计算结果
for(var i = 0; i < numberList.length; i++){
sum += Number(numberList[i])
}
txtEditor.text += '=' + sum
}else{
alert('your inpuBox must end with a "Number" or your last result is not clear')
}
}
敌人随机位置出现
var app = new PIXI.Application(480,600);
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-7_03.png");app.stage.addChild(car);
car.x = Math.round(Math.random() * 180 + 150)
car.y = 550
app.ticker.add(function(){
car.y -= 10;
if(car.y < -100){
car.y = 700
car.x = Math.round(Math.random() * 180 + 150)
}
})
控制两个
var app = new PIXI.Application(500,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/plane/bg/img_bg_level_3.jpg");
app.stage.addChild(bg);
var plane1 = new PIXI.Sprite.fromImage("res/enemy_02.png");
plane1.anchor.set(0.5,0.5);
plane1.x = 100;
plane1.y = 50;
app.stage.addChild(plane1);
var plane2 = new PIXI.Sprite.fromImage("res/enemy_03.png");
plane2.anchor.set(0.5,0.5);
plane2.x = 400;
plane2.y = 50;
app.stage.addChild(plane2);
var speed1 = Math.round(Math.random() * 5 + 5)
var speed2 = Math.round(Math.random() * 5 + 5)
app.ticker.add(animate)
function animate(){
plane1.y += speed1;
plane2.y += speed2;
if(plane1.y > 650){
plane1.y = -50
speed1 = Math.round(Math.random() * 5 + 5)
}
if(plane2.y > 650){
plane2.y = -50
speed2 = Math.round(Math.random() * 5 + 5)
}
}
随机在三个位置出现
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;
var position = 0; //默认出现位置为0，为1则car.x = 50,为2则car.x = 210，为3则car.x = 370;
function animate() {
car.y -= 5
if(car.y < -100){
car.y = 600
position = Math.round(Math.random() * 2 + 1) //这样的话position的值只有1，2，3了
if(position === 1){
car.x = 50
}else if(position === 2){
car.x = 210
}else{
car.x = 370
}
}
}
app.ticker.add(animate);
屏幕抖动、舞台抖动（app.stage）
var app = new PIXI.Application(500,800);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/findFace/bg.png");
app.stage.addChild(bg);
//文本样式
var style = {
font : '20px 微软雅黑',
fill : '#F7EDCA',
stroke : '#4a1850',
strokeThickness : 3,
dropShadow : true,
dropShadowColor : '#000000',
dropShadowAngle : Math.PI / 6,
dropShadowDistance : 2
};
//创建文本
var timeTxt = new PIXI.Text("点击头像抖屏",style);
app.stage.addChild(timeTxt);
timeTxt.x = 180;
timeTxt.y = 30;
//头像
var headPic = new PIXI.Sprite.fromImage("res/lianxi/findFace/1.png");
headPic.x = 250;
headPic.y = 350;
headPic.anchor.set(0.5, 0.5);
app.stage.addChild(headPic);
var count = 0; //控制抖动次数
var isShaking = false; //控制是否抖动
headPic.interactive = true
headPic.on("click",function(){
isShaking = true
})
app.ticker.add(function (){
if(isShaking){
console.log('抖动ing')
app.stage.x = Math.round(Math.random() * 10 - 5)
app.stage.y = Math.round(Math.random() * 10 - 5)
count++
if(count === 30){
isShaking = false
//初始化app.stage.x,y
app.stage.x = 0
app.stage.y = 0
count = 0
}
}
})
帧频升级
每60帧添加一个血包在舞台随机位置
var app = new PIXI.Application(500,350);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/fish/fishBg.png");
app.stage.addChild(bg);
app.ticker.add(animate);
function animate(){
addHeart();
}
var frameCount = 0
function addHeart(){
if (frameCount >= 60){
var life = new PIXI.Sprite.fromImage("res/plane/ui/xue_1_03.png")
app.stage.addChild(life)
life.x = Math.round(Math.random() * 500)
life.y = Math.round(Math.random() * 350)
life.width = 30
life.height = 30
frameCount = 0
}
frameCount ++;
}
抓住我我就让你嘿嘿嘿（飞机和球）
var app = new PIXI.Application(700,600);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/collision/bg.png");
bg.width = 700;
bg.height = 600;
app.stage.addChild(bg);
var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
plane.anchor.set(0.5,0.5);
plane.x = 600;
plane.y = 500;
app.stage.addChild(plane);
//鼠标移动
bg.interactive = true;
bg.on("mousemove",movePlane);
function movePlane(event){
if(isStop == false){
var pos = event.data.getLocalPosition(app.stage);
plane.x = pos.x;
plane.y = pos.y;
}
}
var xList = [];//存储小球 x 方向
var yList = [];//存储小球 y 方向
var ballList = [];//小球数组
var isStop = false;//游戏是否停止
//随机产生10个小球
for(var i=0;i<10;i++){
var ball = new PIXI.Sprite.fromImage("res/lianxi/zhuan/qiu-2_77.png");
ball.anchor.set(0.5,0.5);
ball.width = 20;
ball.height = 20;
ball.x = Math.random()*(690-10)+10;
ball.y = Math.random()*(590-10)+10;
app.stage.addChild(ball);
ballList.push(ball);
var r1 = Math.random();
if(r1 < 0.5){
xList.push(1);
}
else{
xList.push(-1);
}
var r2 = Math.random();
if(r2 < 0.5){
yList.push(1);
}
else{
yList.push(-1);
}
}
//帧频函数
app.ticker.add(animate);
function animate(){
if(isStop == false){
moveBall();
crash();
}
}
//移动小球
function moveBall(){
for(var i=0;i<ballList.length;i++){
ballList[i].x += xList[i];
ballList[i].y += yList[i];
if(ballList[i].x < 10 || ballList[i].x > 690){
xList[i] *= -1;
}
if(ballList[i].y < 10 || ballList[i].y > 590){
yList[i] *= -1;
}
}
}
//碰撞
var pos = 0
function crash(){
for(var i = 0; i < ballList.length; i++){
pos = Math.pow(ballList[i].x - plane.x,2) + Math.pow(ballList[i].y - plane.y,2)
console.log(pos)
if(pos < 35 * 35){
isStop = true
}
}
}
难点汇总
帧频物体旋转一周
var app = new PIXI.Application(500,500);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/collision/bg.png");
bg.width = 500;
bg.height = 500;
app.stage.addChild(bg);
var ball = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball.anchor.set(0.5,0.5);
ball.width = 50;
ball.height = 50;
ball.x = 44;
ball.y = 44;
app.stage.addChild(ball);
var ori = 1;//1向右 2向下 3向左 4向上
var count1 = 0
app.ticker.add(animate);
function animate(){
if(ori == 1){
ball.x += 3
// console.log('右')
if(ball.y < 440 && ball.x >= 440){
ori = 2
}
}
if(ori == 2){
// console.log('下')
ball.y += 3
if(ball.y >= 440 && ball.x >= 440){
ori = 3
}
}
if(ori == 3){
// console.log('左')
ball.x -= 3
if(ball.y >= 440 && ball.x <= 45){
ori = 4
}
}
if(ori == 4){
// console.log('上')
ball.y -= 3
if(ball.y <= 45 && ball.x <= 45){
ori = 1
}
}
// if(ball.y < 440 && ball.x < 440){
// ori = 1
// if(ball.y >= 440 && ball.x < 440){
// ori = 2
// if(ball.y >= 440 && ball.x >= 440){
// ori = 3
// if(ball.y < 440 && ball.x >= 440){
// ori = 4
// }
// }
// }
// }
// if(ball.y < 440 && ball.x < 440){
// console.log('右'+ count1++)
// ball.x += 3
// if(ball.y < 440 && ball.x >= 440){
// console.log('下')
// ball.y += 3
// if(ball.y >= 440 && ball.x >= 440){
// console.log('左')
// ball.x -= 3
// if(ball.y >= 440 && ball.x < 440){
// console.log('上')
// ball.y -= 3
// }
// }
// }
// }
// if(ball.y < 440 && ball.x < 440){
// ori = 1
// }else if(ball.y >= 440 && ball.x < 440){
// ori = 2
// }else if(ball.y >= 440 && ball.x >= 440){
// ori = 3
// }else if(ball.y < 440 && ball.x >= 440){
// ori = 4
// }
}
计时器（难）
- 自己的垃圾代码
if(a < 10 || b < 10 || c < 10){
if(a < 10){
if(a < 10 && b < 10 && c < 10 ){
txt.text = c0 + b0 + a0,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}else if(a < 10 && b < 10 && c >= 10){
txt.text = c + b0 + a0,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}else if(a < 10 && b >= 10 && c < 10){
txt.text = c0 + b1 + a0,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}
}else if(a >= 10){
if(a >= 10 && b < 10 && c < 10 ){
txt.text = c0 + b0 + a1,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}else if(a >= 10 && b < 10 && c >= 10){
txt.text = c + b0 + a1,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}else if(a >= 10 && b >= 10 && c < 10){
txt.text = c + b0 + a1,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}
}
if(a >= 10 && b < 10 && c >= 10){
txt.text = c + b0 + a1
}else if(a >= 10 && b >= 10 && c < 10){
txt.text = c0 + b1 + a1,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}
}
if( a >= 60 ){
b++
a = 0
if(b >= 60){
c++
b = 0
}
}
- 通关答案
var app = new PIXI.Application(400,400);
document.body.appendChild(app.view);
//秒表时间
var txt = new PIXI.Text("00:00:00",{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"});
txt.anchor.set(0.5,0.5);
txt.x = 200;
txt.y = 200;
app.stage.addChild(txt);
//是否开始计时
var isStart = false;
//开始、暂停按扭
var txtBtn = new PIXI.Text("开始",{fill:0xBD3333,fontSize:40,fontFamily:"微软雅黑"});
txtBtn.anchor.set(0.5,0.5);
txtBtn.x = 200;
txtBtn.y = 50;
txtBtn.buttonMode = true;
app.stage.addChild(txtBtn);
var a = 0;//低位
var b = 0;//中位
var c = 0;//高位
var aStr = ""
var bStr = ""
var cStr = ""
// 你要把逻辑变量和显示变量区分开
// 你现在用一个变量，又管逻辑又管显示，确实烧脑，容易吐
// 你定义6个变量，三个管记时，三个管显示，一下逻辑就干净了
app.ticker.add(animate);
function animate(){
if(isStart){
a += 1
if(a >= 59){
a = 0
b++;
}
if(b == 60){
b = 0
c++
}
if(a < 10){
aStr = "0" + a;
}else{
aStr = a
}
if(b < 10){
bStr = "0" + b;
}else{
bStr = b
}
if(c < 10){
cStr = "0" + c;
}else{
cStr = c
}
txt.text = cStr + ":" + bStr + ":" + aStr,{fill:0xffffff,fontSize:40,fontFamily:"微软雅黑"}
}
}
txtBtn.interactive = true
txtBtn.on("click",changeTime)
function changeTime(){
isStart
if(!isStart){
isStart = true
}else{
isStart = false
}
if(txtBtn.text == '开始'){
txtBtn.text = '暂停',{fill:0xBD3333,fontSize:40,fontFamily:"微软雅黑"}
}else{
txtBtn.text = '开始',{fill:0xBD3333,fontSize:40,fontFamily:"微软雅黑"}
}
}
控制总开关（需要优化）
var app = new PIXI.Application(500,800);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/carplay/bj.png");
app.stage.addChild(bg);
var car1 = new PIXI.Sprite.fromImage("res/racer/saiche-5_03.png");
app.stage.addChild(car1);
car1.x = 70;
car1.y = 700;
var car2 = new PIXI.Sprite.fromImage("res/racer/saiche-8_03.png");
app.stage.addChild(car2);
car2.x = 240;
car2.y = 700;
var car3 = new PIXI.Sprite.fromImage("res/racer/saiche-2_03.png");
app.stage.addChild(car3);
car3.x = 400
car3.y = 700;
var kg1 = new PIXI.Sprite.fromImage("res/racer/zhanting-2_03.png");
app.stage.addChild(kg1);
kg1.x = 70;
kg1.y = 600;
var kg2 = new PIXI.Sprite.fromImage("res/racer/zhanting-2_03.png");
app.stage.addChild(kg2);
kg2.x = 240;
kg2.y = 600;
var kg3 = new PIXI.Sprite.fromImage("res/racer/zhanting-2_03.png");
app.stage.addChild(kg3);
kg3.x = 400;
kg3.y = 600;
var zkg = new PIXI.Sprite.fromImage("res/lianxi/ji/jsq0.png");
app.stage.addChild(zkg);
zkg.x = 405;
zkg.y = 720;
var car1Speed = false
var car2Speed = false
var car3Speed = false
var isChange1 = false
var isChange2 = false
var isChange3 = false
zkg.interactive = true;
zkg.buttonMode = true;
zkg.on("click",change4);
function change4(){
//补全代码
if(isChange1){
if(car1Speed){
car1Speed = false
}else{
car1Speed = true
}
}
if(isChange2){
if(car2Speed){
car2Speed = false
}else{
car2Speed = true
}
}
if(isChange3){
if(car3Speed){
car3Speed = false
}else{
car3Speed = true
}
}
}
kg1.interactive = true;
kg1.buttonMode = true;
kg1.on("click",change1);
function change1(){
//补全代码
if(car1Speed){
car1Speed = false
}else{
car1Speed = true
}
//如果car1停止，则无法被控制
if(!car1Speed){
isChange1 = false
}else{
isChange1 = true
}
}
kg2.interactive = true;
kg2.buttonMode = true;
kg2.on("click",change2);
function change2(){
//补全代码
if(car2Speed){
car2Speed = false
}else{
car2Speed = true
}
//如果car1停止，则无法被控制
if(!car2Speed){
isChange2 = false
}else{
isChange2 = true
}
}
kg3.interactive = true;
kg3.buttonMode = true;
kg3.on("click",change3);
function change3(){
//补全代码
if(car3Speed){
car3Speed = false
}else{
car3Speed = true
}
//如果car1停止，则无法被控制
if(!car3Speed){
isChange3 = false
}else{
isChange3 = true
}
}
app.ticker.add(animate);
function animate(){
//补全代码
if(car1Speed)
car1.y -= 5;
if(car2Speed)
car2.y -= 5;
if(car3Speed)
car3.y -= 5;
if(car1.y < -50){
car1.y = 800;
}
if(car2.y < -50){
car2.y = 800;
}
if(car3.y < -50){
car3.y = 800;
}
}
小球弹跳
var app = new PIXI.Application(700,600);
document.body.appendChild(app.view);
var txtMsg = new PIXI.Text("点击小球试试~~~");
txtMsg.style.fontSize = 30;
txtMsg.style.fill = 0xffffff;
txtMsg.x = 250;
txtMsg.y = 100;
app.stage.addChild(txtMsg);
var ball = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball.anchor.set(0.5,0.5);
ball.x = 350;
ball.y = 550;
ball.width = 100;
ball.height = 100;
app.stage.addChild(ball);
var isJump = false;//是否跳起
var maxSpeed = 32;//初始的最大速度
var speed = maxSpeed;
//点击小球，让小球起跳
ball.interactive = true;
ball.on("click",jump);
function jump(){
isJump = true;
}
app.ticker.add(animate);
function animate(){
if(isJump){
ball.y -= speed
speed--
if(ball.y > 550){
maxSpeed -= 3
speed = maxSpeed
if(maxSpeed < 0){
isJump = false
maxSpeed = 32
speed = maxSpeed
ball.y = 550
}
}
}
}
- 增加一个起飞功能
var app = new PIXI.Application(700,700);
document.body.appendChild(app.view);
var txtMsg = new PIXI.Text("点击小球试试~~~");
txtMsg.style.fontSize = 30;
txtMsg.style.fill = 0xffffff;
txtMsg.x = 250;
txtMsg.y = 100;
app.stage.addChild(txtMsg);
var ball = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball.anchor.set(0.5,0.5);
ball.x = 500;
ball.y = 550;
ball.width = 100;
ball.height = 100;
app.stage.addChild(ball);
var isJump = false;//是否跳起
var maxSpeed = 32;//初始的最大速度
var speed = maxSpeed;
//点击小球，让小球起跳
ball.interactive = true;
ball.on("touchstart",jump);
function jump(){
isJump = true;
}
//
var ball2 = new PIXI.Sprite.fromImage("res/lianxi/collision/qiu2.png");
ball.anchor.set(0.5,0.5);
ball2.x = 100;
ball2.y = 500;
ball2.width = 100;
ball2.height = 100;
app.stage.addChild(ball2);
var isFly = false
ball2.interactive = true;
ball2.on("touchstart",fly);
function fly(){
isFly = true;
}
//
app.ticker.add(animate);
function animate(){
if(isJump){
ball.y -= speed
speed--
if(ball.y > 550){
maxSpeed -= 3
speed = maxSpeed
if(maxSpeed < 0){
isJump = false
maxSpeed = 32
speed = maxSpeed
}
}
}
if(isFly){
//旋转
ball2.rotation -= 0.1;
console.log(ball2.rotation)
if(ball2.x >= 200){
console.log("被执行")
ball2.rotation += 20;
ball2.scale.x += 0.005
ball2.scale.y += 0.005
ball2.x -= 1;
ball2.y += 1.2;
console.log(ball2.x)
if(ball2.x == 199){
ball2.x = 100;
ball2.y = 500;
ball2.width = 100;
ball2.height = 100;
ball2.rotation = 0;
app.stage.addChild(ball2);
isFly = false
}
}
//缩小
ball2.scale.x -= 0.005
ball2.scale.y -= 0.005
//右上移动
ball2.x += 1;
ball2.y -= 1.2;
}
}
鼠标指针、触屏控制人物转向
//创建app
var app = new PIXI.Application(800,600);
document.body.appendChild(app.view);
//添加背景
var bg = new PIXI.Sprite.fromImage("res/lianxi/yu2/bg.png");
app.stage.addChild(bg);
//添加小鱼
var fish = new PIXI.Sprite.fromImage("res/lianxi/fish/fish.png");
fish.anchor.set(0.5,0.5);
fish.scale.x = 2;
fish.scale.y = 2;
fish.x = 100;
fish.y = 200;
app.stage.addChild(fish);
//给小鱼添加鼠标事件
bg.interactive = true;
bg.on("mousemove",movefish);
var left = 0
function movefish(event) {
var pos = event.data.getLocalPosition(app.stage);
//用一个变量来存放目前鼠标x坐标左边又10x的位置
left = fish.x - 10
if(pos.x <= left){
fish.scale.x = 2
}
right = fish.x + 10
if(pos.x >= right){
fish.scale.x = -2
}
fish.x = pos.x;
fish.y = pos.y;
}
滑屏控制Player移动
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);
bg.y=-800;
//创建赛车
var myCar = new PIXI.Sprite.fromImage("res/racer/saiche-2_03.png");
myCar.anchor.set(0.5,0.5);
myCar.x=230;
myCar.y=580;
app.stage.addChild(myCar);
//开启背景点击事件
bg.interactive = true;
bg.on("mousedown",cardown);
bg.on("mouseup",carup);
//背景移动
function animate(){
bg.y+=3;
if(bg.y>0){
bg.y=-800;
}
}
//帧频函数
app.ticker.add(animate);
var downPos = 0;
//鼠标点击事件
function cardown(event){
var pos = event.data.getLocalPosition(app.stage);
downPos = pos.x
console.log(downPos)
}
//鼠标松开事件
function carup(event){
var pos = event.data.getLocalPosition(app.stage)
if(downPos > pos.x){
//小车向左移动
myCar.x -= 50
}else if(downPos < pos.x){
//小车向右移动
myCar.x += 50
}else{
//什么都不做
}
}
缓速电梯（boos题目）
var app = new PIXI.Application(520,460);
document.body.appendChild(app.view);
var bg = new PIXI.Sprite.fromImage("res/lianxi/elevator/bg.png");
app.stage.addChild(bg);
var elevator = new PIXI.Sprite.fromImage("res/lianxi/elevator/dt.png");
elevator.y = 380;
elevator.x = 325;
app.stage.addChild(elevator);
var person = new PIXI.Sprite.fromImage("res/lianxi/elevator/p1.png");
person.y = 40;
person.x = 40;
elevator.addChild(person);
var btn1 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn1.x = 480;
btn1.y = 40;
app.stage.addChild(btn1);
var btn2 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn2.x = 480;
btn2.y = 130;
app.stage.addChild(btn2);
var btn3 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn3.x = 480;
btn3.y = 220;
app.stage.addChild(btn3);
var btn4 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn4.x = 480;
btn4.y = 310;
app.stage.addChild(btn4);
var btn5 = new PIXI.Sprite.fromImage("res/lianxi/elevator/anniu-shang-2_08.png");
btn5.x = 480;
btn5.y = 410;
app.stage.addChild(btn5);
btn1.interactive = true;
btn1.buttonMode = true;
btn2.interactive = true;
btn2.buttonMode = true;
btn3.interactive = true;
btn3.buttonMode = true;
btn4.interactive = true;
btn4.buttonMode = true;
btn5.interactive = true;
btn5.buttonMode = true;
var isMoving = false //默认移动模式为否
var selected = false //默认所有按键均可以被选中
var moveSpeed = 10 //默认移动速度为10
var targetPosition = 380 //指准备移动到哪个指定位置，默认是1楼380
var moveUp = true //判定是上升还是下降
btn1.on("click",change1);
function change1(){
if(!isMoving){
console.log('change1' + isMoving)
targetPosition = 8 //电梯位置
person.y = 40
if(elevator.y > targetPosition){ //判断向上还是向下移动
moveUp = true;
}else{
moveUp = false;
}
return isMoving = true;
}
}
btn2.on("click",change2);
function change2(){
if(!isMoving){ //当isMoving为false时，我们才能对电梯按钮进行操作
console.log('change2' + isMoving)
targetPosition = 101
person.y = 40 //电梯位置
if(elevator.y > targetPosition){ //判断向上还是向下移动
moveUp = true;
}else{
moveUp = false;
}
return isMoving = true;
}
}
btn3.on("click",change3);
function change3(){
if(!isMoving){
console.log('change3' + isMoving)
targetPosition = 194
person.y = 40 //电梯位置
if(elevator.y > targetPosition){ //判断向上还是向下移动
moveUp = true;
}else{
moveUp = false;
}
return isMoving = true;
}
}
btn4.on("click",change4);
function change4(){
if(!isMoving){
console.log('change4' + isMoving)
targetPosition = 287
person.y = 40 //电梯位置
if(elevator.y > targetPosition){ //判断向上还是向下移动
moveUp = true;
}else{
moveUp = false;
}
return isMoving = true;
}
}
btn5.on("click",change5);
function change5(){
if(!isMoving){
console.log('change5' + isMoving)
targetPosition = 380
person.y = 40 //电梯位置
if(elevator.y > targetPosition){ //判断向上还是向下移动
moveUp = true;
}else{
moveUp = false;
}
return isMoving = true;
}
}
var count = 0
app.ticker.add(animate);
function animate(){
if(isMoving){
if(moveUp){ //如果向上，就走这条
if(elevator.y > targetPosition){
console.log("上层程序执行ing")
elevator.y -= moveSpeed
console.log("上层程序的elevator为" + elevator.y)
console.log("上层targetPosition为" + targetPosition)
if(elevator.y < targetPosition){
console.log("上层程序终止ing1")
isMoving = false
elevator.y = targetPosition
}
}else{
console.log("上层程序终止ing2")
isMoving = false
elevator.y = targetPosition
}
}else{ //如果向下，就走这条
if(elevator.y < targetPosition){
console.log("下层程序执行ing")
elevator.y += moveSpeed
console.log("下层targetPosition为" + targetPosition)
console.log("下层程序的elevator为" + elevator.y)
if(elevator.y > targetPosition){
console.log("下层程序终止ing1")
isMoving = false
elevator.y = targetPosition
}
}else{
console.log("下层程序终止ing2")
isMoving = false
elevator.y = targetPosition
}
}
}
}
雪花飘动（牛顿力学）
var app = new PIXI.Application(1000,600)
document.body.appendChild(app.view)
var time = 0; //帧数统计
var snowflakeList = [] //存放所有雪花
var N = 0 //牛顿公式结果，控制左右移动速度
var speed = 0.01 //牛顿公式速度
var turnLeft = true //是否左转
var turnRight = false //是否右转
app.ticker.add(animate)
function animate(){
time++
if(time >= 0){
var snowflake = new PIXI.Text('❄')
app.stage.addChild(snowflake)
snowflake.x = Math.random() * 2000;
snowflake.y = - 20
snowflake.style.fill = randomColor(Math.round(Math.random() * 5)) //控制颜色
snowflakeList.push(snowflake) //添加到数组
console.log(snowflakeList.length)
}
for(var i = 0;i < snowflakeList.length; i++){
snowflakeList[i].y += 6 //速度控制着数组的数量，因为他会销毁
N = 1 / 2 * speed * Math.pow(time,2) //牛顿力学，控制移动距离
//默认往左走，然后左右交替
if(turnLeft){
if(N <= 20){
if(N > 10){ //向左移动到一定阶段后向上飘动
snowflakeList[i].y -= N
}
snowflakeList[i].x -= N //往左走的距离
}else{
time = 0 //time归零，使N速度重置
time2 = 0
turnLeft = false
turnRight = true
}
}else{
if(N <= 20){
if(N > 10){
snowflakeList[i].y -= N
}
snowflakeList[i].x += N //往左走的距离
}else{
time = 0
turnLeft = true
turnRight = false
}
}
if(snowflakeList[i].y >= 600){
app.stage.removeChild(snowflakeList[i]);
snowflakeList.splice(i,1);
}
}
}
//这里控制颜色
function randomColor(num){
var colorList = ['0xFFC0CB','0x87CEFA','0x00FF7F','0xFFFF00','0xFF0000','0xFFFFFF']
if(num === 0){
return colorList[0]
}else if(num === 1){
return colorList[1]
}else if(num === 2){
return colorList[2]
}else if(num === 3){
return colorList[3]
}else if(num === 4){
return colorList[4]
}else{
return colorList[5]
}
}
//s = 1 / 2 * a * t * t
//s是距离，a是加速度，t是时间，也就是帧数
// var speedLeft = 0; //a加速度
// var frameNumberCountLeft = 0 //t时间、帧数
// speedLeft = 0.001
// var isRockLeft = true
// function rockSnow_Left(){
// frameNumberCountLeft++ //每次调用让帧数计数加1
// if(isRockLeft){
// for(var i = 0; i < snowflakeList.length; i++){
// snowflakeList[i].x -= 1 / 2 * speedLeft * Math.pow(frameNumberCountLeft,2) //往左走的距离
// console.log(snowflakeList[i].x)
// }
// // if(speedLeft < 0){
// // // isRockLeft = false
// // // isRockRight = true
// // speedLeft = 30
// // console.log('左转结束')
// // }
// }
// }
碰撞检测时移除单位时异常
扫一扫
2107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
