1、函数介绍

介绍

函数是具有特定功能的代码块。一次编写，多次调用，起到节省代码的作用。
例如下图：
定义了一个createPlane函数用于创建一架飞机，连续调用三次，结果产生了三架飞机

2、使用函数

函数的使用，由两部分组成：定义函数、调用函数

定义函数的语法格式

function 函数名(){    
相关代码;    
}     
调用函数    
函数名();

注意：函数的命名与变量的命名，都必须遵循如下规则
1、名称只能由字母、数字、下划线 “_”、美元符号 “$” 组成，且第一个字符不能是数字。
2、不能把 JavaScript 关键字和保留字作为变量名。
3、变量名对大小写敏感。

示例

function hello(){
   console.log("飞机大战游戏");
}
hello();

代码讲解

1、定义函数

function hello(){    
console.log("飞机大战游戏");    
}

       function：代表定义一个函数    <br />        hello：是函数的名称    <br />        {}：左右花括号，分别代码的函数的开始与结束    <br />         console.log("飞机大战游戏")：函数将要执行的代码    

2、调用函数

hello();
通过hello函数的名称来调用函数

var app = new PIXI.Application(500,500);
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 = 400;
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);

app.ticker.add(animate);
function animate(){
    moveBg();
    moveBullet();
}

function moveBg(){
    bg.y += 1;
    if(bg.y > 0){
        bg.y = -600;
    }
}

function moveBullet(){
    bullet.y -= 10;
    if(bullet.y < -30){
        bullet.y = plane.y-50;
    }
}

代码讲解

1、定义moveBg函数

function moveBg(){
bg.y += 1;
if(bg.y > 0){
bg.y = -600;
}
}
定义moveBg函数，用于向下移动bg背景图片
function：代表定义一个函数
moveBg：是函数的名称
{}：左右花括号，分别代码的函数的开始与结束

2、定义moveBullet函数

function moveBullet(){
bullet.y -= 10;
if(bullet.y < -30){
bullet.y = plane.y-50;
}
}
定义moveBullet函数，用于向上移动bullet子弹图片
function：代表定义一个函数
moveBullet：是函数的名称
{}：左右花括号，分别代码的函数的开始与结束

3、通过帧频函数，调用其他函数

app.ticker.add(animate);
function animate(){
moveBg();
moveBullet();
}
通过帧频函数，调用其他函数
moveBg()：通过moveBg函数名，调用moveBg函数
moveBullet()：通过moveBullet函数名，调用moveBullet函数

4、函数的参数

我们在调用函数时，可以给函数传递一些数据，这些数据称为参数。
对于一个函数，可以没有参数，也可以有多个参数，例如下面的示例，给函数添加了两个参数
参数注意：
1、函数可以有多个参数(最少：0、最多：无数)
2、参数在定义上，没有先后顺序
3、函数调用，函数定义的参数，必须统一

示例

functionsum(a,b){
vars=a+b;
alert("两数之和为："+s);
}
sum(10,20);

5、函数的返回值

我们在定义函数时，函数本身可以返回最多一个数据，我们把这一个数据称为返回值。
对于一个函数，可以有返回值，也可以没有返回值。但最多只能有一个返回值
返回值注意：
1、函数最多只能有一个返回值(最少：0、最多：1)
2、函数想要返回多个值：将多个值放到一个数组中，将数组返回

示例

functionsum(a,b){
vars=a+b;
returns;
}
varresult=sum(10,20);
alert("结果为："+result);

6、匿名函数

在定义函数时，我们可以不指定函数名称。我们把这种写法称为匿名函数

示例

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");
app.stage.addChild(bg);

var plane = new PIXI.Sprite.fromImage("res/enemy_04.png");
app.stage.addChild(plane);

bg.interactive = true;
bg.on("click",function(){
    plane.y += 10;
});

代码讲解

1、给bg背景图片添加鼠标点击事件

bg.on(“click”,function(){
plane.y += 10;
});
上边代码通过匿名函数的方式，给bg背景图片添加鼠标点击事件
function(){…}：定义一个匿名函数，左花括号代表函数的开始，右花括号代表函数的结束
注意：匿名函数没有函数名，所以上边示例的匿名函数只能被当前的鼠标点击事件调用

7、函数与变量作用域

变量作用域：是指变量在程序中的使用范围
变量作用域大体上可以分为两种：局部变量、全局变量
变量销毁的时间：
全局变量：整个程序结束后，才销毁
局部变量：某范围的代码执行结束后，销毁

1、局部变量

局部变量：在某一程序块内部定义的变量，该变量只能在程序块内部访问

示例

function showMsg(){
    var age = 30;
    console.log("函数里显示的年龄："+age);
}

showMsg();

console.log("函数外显示的年龄："+age);

2、全局变量

全局变量：在所有程序块外定义的变量，该变量在整个程序中都可以访问

示例

var age = 30;
function showMsg(){
    console.log("函数里显示的年龄："+age);
}
showMsg();
console.log("函数外显示的年龄："+age);

注意：局部变量的优先级要高于同名的全局变量。
也就是说当局部变量与全局变量重名时，局部变量会覆盖全局变量

示例

var age = 30;
function showMsg(){
    var age = 10;
    console.log("函数里显示的年龄："+age);
}
showMsg();

8、递归调用：函数自己调用自己

//控制hello1函数调用的次数
var index = 0;
function hello1(){
    console.log("hello1");
    index++;
    if(index < 5){
        hello1();//递归调用
    }
}
hello1();

作用：代替循环语句