phaser制作跑酷游戏

最新推荐文章于 2025-07-03 13:49:59 发布

小章鱼哥

最新推荐文章于 2025-07-03 13:49:59 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 游戏文章标签：游戏

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/47072647

这篇博客详细介绍了如何使用Phaser.js框架制作一款跑酷游戏，包括在index.html中引入库文件，设置canvas样式，创建游戏类，定义boot、loading、title和play界面。在play界面中，涉及了初始化数据、物理系统、背景处理、角色和平台的交互，以及游戏结束条件和更新逻辑。此外，还提到了音效和场景切换的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在index.html里面引入phaser.js 和自己创建的game.js

设置canvas的css样式

canvas{ margin:0 auto;}

接下来用一个类方法封装整个游戏

(function() {}());

在function里面定义游戏

（function(){
   
   

 var SantaGame = {
        init: function() {
   
   
            this.game = new Phaser.Game(width, height, Phaser.CANVAS, 'game');
            this.game.state.add('boot', this.boot);
            this.game.state.add('load', this.load);
            this.game.state.add('play', this.play);
            this.game.state.add('title', this.title);
            this.game.state.add('gameOver', this.gameOver);
            this.game.state.start('load');
        },
        boot:function(){
   
   

        },
        load:function(){
   
   

        },
        title:function(){
   
   

        },  
        play:function(){
   
   

        },
        gameOver:function(){
   
   

        }

};

SantaGame.init();

}()）

boot界面预加载loading界面。跟上个游戏一样下面直接说loading界面吧

load: {
            preload: function() {
   
   
                var preloadSprite = this.game.add.sprite(this.game.world.width / 2 ,this.game.world.height / 2 ,'loading'); //创建显示loading进度的sprite
                this.game.load.setPreloadSprite(preloadSprite);
                this.game.load.audio('drivin-home', 'assets/world.wav');
                this.game.load.audio('ho-ho-ho', 'assets/bonbon.wav');
                this.game.load.audio('hop', 'assets/bomb.wav');
                this.game.load.image('platform', 'assets/1.png');
                this.game.load.spritesheet('santa-running', 'assets/runman.png', 493/5, 174,5);
                this.game.load.image('snow-bg', 'assets/beijing1.png');
                this.game.load.image('snow-bg-2', 'assets/yuanjing1.png');
                this.game.load.image('snowflake', 'assets/xiaoshixiaoguo.png');
                this.game.load.image('logo', 'assets/name.png');
                this.game.load.image('startbtn', 'assets/bangzhujiantou.png');
            },
            create: function() {
   
   
                this.game.state.start('title');
            }
        },

并且在加载好的时候运行title界面

title界面。。实际上就是menu界面

title: {
   
   
            create: function() {

最低0.47元/天解锁文章

200万优质内容无限畅学