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

最新推荐文章于 2024-10-11 07:32:10 发布

小鸣blog

最新推荐文章于 2024-10-11 07:32:10 发布

阅读量3.4k

点赞数 3

分类专栏： canvas 文章标签： canvas phaser web游戏

本文链接：https://blog.csdn.net/qq_35616850/article/details/79724832

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用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>

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(){

}