本文介绍phaser.js的入门，人人都可做小游戏_phaserjs

作者：黑客灵魂 | 2024-08-17 07:23:33

踩

phaserjs

使用phaser制作简易游戏

phaser.js是一个制作游戏的插件，功能非常强大，里面集成了非常多的方法，我们只需学习如何使用就基本可以满足日常使用了。

phaser官网，有各种api及实例用翻译很容易懂

这是phaser小站中文的，里面实例很好

游戏相关的一些概念

画布
一般来说，做游戏的话基于Canvas会比基于DOM性能要好很多，尤其是涉及大量动画的情况下。Phaser会将一切渲染在canvas元素上，于是，毫不夸张地说，你的body标签里可能只包含一个canvas元素。

由于本节开发的目标是一个移动端的小游戏，因此画布一般来说都是充满全屏的。

场景
一个完整的游戏都是有分场景的，不是指“迷宫”、“沙漠”这些游戏场景，而是“加载”、“开始”、“游戏”、“结束”等场景。一般来说我们实际做项目的时候也大概是如下四种场景：

加载——展示进度条和loading动画，主要操作为加载游戏资源，如图片、音频等。

开始——展示开始按钮、活动规则等，主要是让玩家能有主动开始的操作（很关键，后面会说到）。

游戏——整个游戏的主要逻辑都在这个场景中，最核心的部分。

结束——展示游戏最终得分、排名等。

这样的场景的划分也算是描述出了整个游戏的生命周期，我认为上述四个场景是最基本的，缺了哪个场景游戏都不算完整，或者是体验不够完善。

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>小恐龙接苹果</title>
    <link href="./assets/css/index.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="./jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/phaser/2.6.2/phaser.min.js"></script>
    <script type="text/javascript" src="./assets/js/main.js"></script>
</head>
<body>
    <div id="game"></div>
<!-- 结果页 -->
    <div class="over1 hidden">
        <div class="over-box">
            <div class="result">您的得分是<span class="gameScore"></span></div>
            <img src="./assets/images/btn-again.png" alt="" class="btn-again center"/>
        </div>
    </div>
</body>
<script>
$(".btn-again").click(function(){
    $(".over1").hide();
    game.state.restart();
})
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

main.js代码

// 实际应用场景改为window.innerWidth和window.innerHeight。
// 这里是为了方便查看示例。
var width = window.innerWidth;
var height = window.innerHeight;
var apple;//定义变量
var person;
var time=0;
var score=0;
var scoreText;
var isCanPlay=false;
var gameTime=60;
var button;
var beginbutton;
// 创建游戏实例
var game = new Phaser.Game(width, height, Phaser.CANVAS, '#game',{init: init,preload: preload, create: create, update: update, render: render});
//config里面是一些逻辑配置函数，方便调用
var config={
    dropApple:function(){
        var color=['green','red','yellow','green','bomb','yellow','bomb'];
        var index=Math.floor(Math.random()*color.length);
        var rom = Math.floor(Math.random()*600+20);
        var speed = Math.floor(Math.random()*1500) + 3000;
        var fullapple=apple.create(rom,-100,color[index]);
            fullapple.num = index; //给物品添加编号

        var tween=game.add.tween(fullapple).to({y:game.world.height},speed,Phaser.Easing.Linear.None,true,0,0,false)
            tween.onComplete.add(function() {
            fullapple.kill();
        });
    },
    grade:function(fullapple,getgrade){
        var gradeText=game.add.sprite(fullapple.x+50,fullapple.y-50,getgrade);
        var tween = game.add.tween(gradeText).to( { y: fullapple.y-200, alpha:0 }, 800, Phaser.Easing.Linear.None, true, 0, 0, false);

            tween.onComplete.add(function() {
                gradeText.kill();
            });
    },
    touchApple:function(person,fullapple){
        var self=this;
        if (fullapple.num==0||fullapple.num==3) {
            fullapple.kill();
            config.grade(fullapple,'three');
            score+=3;
        }
        if (fullapple.num==1) {
            fullapple.kill();
            config.grade(fullapple,'five');
            score+=5;
        }
        if (fullapple.num==2||fullapple.num==5) {
            fullapple.kill();
            config.grade(fullapple,'one');
            score+=1;
        }
        if (fullapple.num==4||fullapple.num==6) {
            config.gameOvre(score);
            //game.paused=true;
        }
        scoreText.text= '分数：' + score;
    },
    gameOvre:function(endscore){
        apple.removeAll();
        $(".over1").show();
        $('.gameScore').html(endscore);
        isCanPlay = false;
        score = 0;
        time = 0;
    },
    managePause: function() {
    game.paused = true;
    var pausedText = game.add.text(game.world.centerX, game.world.height * 0.45, "点击任意位置开始", {
        fontSize:'40px',
        fontWeight:'bold',
        fill:'#000'
    });
    pausedText.anchor.setTo(0.5,0.5);
    game.input.onDown.add(function(){
        pausedText.destroy();
        game.paused = false;
    })
    }
};
//游戏初始化，
function init() {
        game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
        game.scale.pageAlignVertically = true;
        game.scale.pageAlignHorizontally = true;
}

function preload(){
        // 加载游戏资源
        game.load.crossOrigin = 'anonymous'; // 设置跨域
        game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
        game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
        game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
        game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
        game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
        game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
        game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
        game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
        game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
        game.load.spritesheet('button', '../phaser/assets/images/pause.png', 157, 140);//后面参数表示图片分割的大小
        //game.state.start('created');
        /*// 添加进度文字
        var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
            fontSize: '60px',
            fill: '#ffffff'
        });
        progressText.anchor.setTo(0.5, 0.5);
        // 监听加载完一个文件的事件
        game.load.onFileComplete.add(function(progress) {
            progressText.text = progress + '%';
        });
        var remind=game.add.text(100,100,'')*/
}
//创建游戏内各种东西的
function create(){
        // 添加背景
        var bg = game.add.image(0, 0, 'bg');//前两个参数为背景位置，第三个参数为图片名称
        bg.width = game.world.width;//设置背景大小，game.world.width表示游戏界面的宽度（初始化时候的大小）
        bg.height = game.world.height;
         // 添加标题，前两个参数为字体位置，第三个参数为字体内容，第四个为字体样式（canvas里面的）
        var title = game.add.text(game.world.centerX, game.world.height * 0.15, '小恐龙接苹果', {
            fontSize: '40px',
            fontWeight: 'bold',
            fill: '#f2bb15'
        });
        title.anchor.setTo(0.5, 0.5);//设置标题的中心，物体的平移、旋转都是以中心点为参照的
        //开始游戏提示
        var remind=game.add.text(game.world.centerX, game.world.height * 0.25,'点击任意位置开始',{
            fontSize:'40px',
            fontWeight:'bold',
            fill:'#000'
        });
        remind.anchor.setTo(0.5,0);//anchor表示按钮的中心点，物体的平移、旋转都是以中心点为参照的
        /*创建苹果组*/
        apple=game.add.group();
        apple.enableBody = true;//属性为true，物品组里面每个创建的精灵都讲创建一个物理主体
        apple.physicsBodyType = Phaser.Physics.ARCADE;//制定物理主体类型
        /*创建分数*/
        scoreText = game.add.text(38, 28, '分数：0')
        scoreText.fill = '#000';
        scoreText.font = '微软雅黑';
        scoreText.fontSize = 36;
        /*创建倒计时*/
        timeText= game.add.text(400,28,'倒计时：60',{
            fontSize:'40px',
            fontWeight:'bold',
            fill:'#000'
        });
        /*创建人物*/
        person = game.add.sprite(game.world.centerX,game.world.height*0.75, 'dude'); 
        person.anchor.setTo(0.5, 0);
        game.physics.enable(person, Phaser.Physics.ARCADE);//设置人物加入物理引擎
        person.inputEnabled = true; //为true表示人物能处理事件，例如拖动，点击，触摸
        //人物拖动范围Rectangle参数为（x，y，width，height）左上角坐标和宽高
        var rect = new Phaser.Rectangle(0, game.world.height * 0.75, game.world.width, person.height);
        //设置人物事件为拖动
        person.input.enableDrag(false,false,false,255,rect,null); 
        //开始游戏点击事件
        game.input.onTap.add(function(){
            isCanPlay=true;
            remind.destroy();
            /*加入暂停按钮*/
            button = game.add.button(game.world.width - 195, 10, 'button', config.managePause,this,1,1,0);
        })
}
//游戏部分
function update(){
    if (isCanPlay) {
        if(time%30 == 0) {
            config.dropApple();//调用苹果掉落事件
        }
        gameTime=60 - parseInt(time/60);
        time++;
        //设置碰撞，overlap参数为人物，苹果组，处理函数，额外的处理函数，运行上下文
        game.physics.arcade.overlap(person, apple, config.touchApple, null, this);
        if (gameTime<=0) {
            config.gameOvre(score);//调用游戏结束函数
        }
        timeText.text='倒计时：'+gameTime;
    }
}
function render(){

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/991743