Phaser框架下的flappyBird

最新推荐文章于 2023-09-15 14:57:56 发布
最新推荐文章于 2023-09-15 14:57:56 发布
阅读量368 收藏 1
点赞数
分类专栏： HTML5 文章标签： html5 javascript 网页游戏
本文为博主：迷茫的21世纪的新轻年 的原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_36986510/article/details/105599725
版权

前端的小练习：flappyBird

体验地址： https://xiaoxinnolabi.gitee.io/flappybird

码云地址： https://gitee.com/Xiaoxinnolabi/flappyBird.git

（很粗糙，bug略多）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlappyBird</title>
    <script src="js/phaser.min.js"></script>
</head>
<body>
    <center>
    <!--放置游戏画面-->
    <div id="game"></div>
    <p style="text-align: center;font-family:Arial, Helvetica, sans-serif;">只要你飞得够高，你就能够穿越山河大海</p>

    </center>
</body>
<script src="js/game.js"></script>
</html>

 

game.js

// 放置游戏逻辑代码 
const game = new Phaser.Game(320,505,Phaser.AUTO,"game")//(游戏宽度、高度、渲染方式、盒子ID)

//在game对象里面添加一个gameStates属性 ，放置游戏场景
game.gameStates = {}

//放入menu场景 
game.gameStates.menu=function(){
    //一个合法场景必须有以下三个功能中一个

    //1 加载资源
    this.preload=function(){
        game.load.image('background','assets/background.png')
        game.load.image('ground','assets/ground.png')
        game.load.image('game_over','assets/gameover.png')

        game.load.spritesheet('bird','assets/bird.png',34,24,3)//(命名、图片位置、宽度、高度、帧数)

        game.load.image('title','assets/title.png')//加载题目图片
        game.load.image('btnImg','assets/start-button.png')

        //加载管道图片
        game.load.spritesheet('pipe','assets/pipes.png',54,320,2)

        game.load.audio('fly_sound','assets/flap.wav')
        game.load.audio('score_sound','assets/score.wav')

        //字体
        game.load.bitmapFont('fly_font','assets/fonts/flappyfont/flappyfont.png','assets/fonts/flappyfont/flappyfont.fnt')

    }

    //2 加载资源后，进入create()方法
    this.create=function(){
        //const 定义常量 局部常量
        const mybg=game.add.tileSprite(0,0,game.width,game.height,"background")//瓷砖精灵：(x轴,y轴，宽度，高度，对象)
        const ground=game.add.tileSprite(0,game.height-112,game.width,112,"ground")//地板
        const titleGroup = game.add.group()//在游戏对象添加一个组 titleGroup
        titleGroup.create(0,0,'title')//(x轴位置，y轴位置，加入什么元素)
        const bird = titleGroup.create(190,0,'bird')//小鸟加入组

        bird.animations.add('fly')//('动画名字')
        bird.animations.play('fly',16,true)//(动画名字，每秒多少张图片，是否重复播放)

        titleGroup.x=50
        titleGroup.y=140

        //tween(控制对象).to(位置，时间，缓动类型，是否自动开始，延迟几秒开始，重复几次，来回循环)缓动
        game.add.tween(titleGroup).to({y:120},1000,null,true,0,Number.MAX_VALUE,true)

        const btn = game.add.button(game.width/2,game.height/2,'btnImg',function(){
            //点击后效果：跳转到第二个
            game.state.start("mysence2")
        })//(x,y,填加进去的是什么，执行的效果)

        btn.anchor.setTo(0.5,0.5)//anchor修改按钮中心点

        mybg.autoScroll(-15,0)//重复自动滚动 (x,y)
        ground.autoScroll(-100,0)
        
    }

    //3 时时刻刻监测的内容
    this.update=function(){}
}

game.gameStates.play=function(){
    //加载资源
    this.preload=function(){
    }

    //资源加载后的场景
    this.create=function(){
        this.mybg=game.add.tileSprite(0,0,game.width,game.height,"background")//瓷砖精灵：(x轴,y轴，宽度，高度，对象)
        //添加管道组
        this.pipeGroup= game.add.group()

        //添加声音
        this.flySound=game.add.audio('fly_sound')
        this.scoreSound=game.add.audio('score_sound')
        //开启物理引擎
        this.pipeGroup.enableBody=true  
        this.startGameFlag=false
        
        this.ground=game.add.tileSprite(0,game.height-112,game.width,112,"ground")//地板

        //加载字体
        this.scoreGroup=game.add.group()
        this.scoreText=game.add.bitmapText(game.width/2,100,'fly_font','0',40,this.scoreGroup)
        // this.scoreText.anchor.setTo(0.5,0.5)

        this.bird = game.add.sprite(50,100,'bird')//小鸟加入组

        this.bird.animations.add('fly')//('动画名字')
        this.bird.animations.play('fly',16,true)//(动画名字，每秒多少张图片，是否重复播放)
        this.bird.anchor.setTo(0.5,0.5)

        //开启物理引擎（physics.enable(引擎作用的对象，使用的物理引擎))
        game.physics.enable(this.bird,Phaser.Physics.ARCADE)
        game.physics.enable(this.ground,Phaser.Physics.ARCADE)
        this.ground.body.immovable=true
        


        //1.点击屏幕(事件，绑定到对象)
        game.input.onDown.addOnce(this.startGame,this)//this.startGame只要监听一次用addOnce
        
    }

    //实时更新需要的场景
    this.update=function(){
        if(this.startGameFlag==false){
            return 
        }

        //collide碰撞（对象A，对象B，碰撞后执行的方法，回调，对象）
        game.physics.arcade.collide(this.bird,this.ground,this.hit,null,this)

        //碰撞检测 一旦碰撞，停止
        game.physics.arcade.overlap(this.bird,this.pipeGroup,this.hitPipe,null,this)
        if(this.bird.angle<90 ){
            this.bird.angle+=3
        }

        //得分检测:检测存在于屏幕中的物体，第二个只能用于组
        this.pipeGroup.forEachExists(this.checkScore,this)
        
    }

    //2.开始游戏
    //用户定义startGame
    this.startGame=function(){
        this.score=0

        this.mybg.autoScroll(-15,0)//重复自动滚动 (x,y)
        this.ground.autoScroll(-100,0)
        //一旦开启物理引擎，就有body属性
        this.bird.body.gravity.y=1000
        this.startGameFlag=true

        game.input.onDown.add(this.fly,this)

        //定时器 制作管道
        this.Timer =game.time.events.loop(1000,this.makePipe,this)
       
    }

    //撞击管道后
    this.hitPipe=function(){
        this.gameOver()
    }

    //分数检测
    this.checkScore=function(pipe){
        //pipe是形参，是this.pipeGroup
        if(!pipe.hasScore && pipe.y<=0 && pipe.x < this.bird.x-54){
            this.scoreSound.play()
            pipe.hasScore=true
            this.score++
            this.scoreText.text = this.score
            console.log(this.score)
        }

        return
    }
    //结束游戏
    this.gameOver=function(){
        //停止地板和背景动画
        this.ground.stopScroll()
        this.mybg.stopScroll()
        //停止飞翔动作
        this.bird.animations.stop('fly',0)
        //移除鼠标单击事件的监听
        game.input.onDown.remove(this.fly,this)
        //停止管道生成
        this.pipeGroup.setAll('body.velocity.x',0)
        game.time.events.remove(this.Timer)

        //加载重新开始界面
        this.restartGame()

    }

    //重新开始
    this.restartGame=function(){
        this.gameOverGroup = game.add.group()
        const gameOverText = this.gameOverGroup.create(game.width/2,60,'game_over')
        gameOverText.anchor.setTo(0.5,0.5)

        const replayBtn=game.add.button(game.width/2,180,'btnImg',function(){
                game.state.start('mysence1')
        })

        replayBtn.anchor.setTo(0.5,0.5)
    }

    //制作管道
    this.makePipe=function(){
        gam=100//空隙  空隙在85-320之间都是合理的
        //math.random() 0-1 ：Math.random(235)+85 管道的随机位置
        const position = Math.floor(Math.random()*235)+85
        const topPipeY = position -320//上管道
        const bottomPipeY = position + 100//下管道
        const topPipe = game.add.sprite(game.width,topPipeY,'pipe',0,this.pipeGroup)
        const bottomPipe = game.add.sprite(game.width,bottomPipeY,'pipe',1,this.pipeGroup)
        this.pipeGroup.setAll('body.velocity.x',-200)
    }

    //小鸟向上飞
    this.fly=function(){
        this.flySound.play()
        //1 头部向上扬起
        game.add.tween(this.bird).to({angle:-30},100,null,true,0,0,false)
        //2 小鸟向上运动
        this.bird.body.velocity.y=-300//一次性
        
        // 重力恒定this.bird.body.gravity.y=-300
    }

    //用户定义this.hit
    this.hit=function(){
         //停止地板和背景动画
         this.ground.stopScroll()
         this.mybg.stopScroll()
         //停止飞翔动作
         this.bird.animations.stop('fly',0)
         //移除鼠标单击事件的监听
         game.input.onDown.remove(this.fly,this)
         //停止管道生成
         this.pipeGroup.setAll('body.velocity.x',0)
         game.time.events.remove(this.Timer)
 
         //加载重新开始界面
         this.restartGame()
    }
}

game.state.add("mysence1",game.gameStates.menu)
game.state.add("mysence2",game.gameStates.play)
game.state.start("mysence1")

 

迷茫的21世纪的新轻年
关注
专栏目录
基于Phaser框架完成FlappyBird
sunnylinner的博客
07-24 1870
Phaser没什么好说的，不是很清楚的，网上自己去搜吧~ 注：该博客大部分参考了网上的资源 各文件作用： Index.html----不多说了，网页 Phaser.min.js----游戏所需框架 load.js----预加载游戏中用到的资源文件 Menu.js----游戏的主界面，提示游戏的操作方法，其实没什么功能，但又必不可少 Ready.js----是一个准备开始游戏的界面，按
用Phaser框架做个flappybird小游戏（四）
weixin_41852068的博客
04-12 328
这次我们的任务是控制点击鼠标让小鸟飞起来 当游戏刚开始时小鸟就需要开始起飞了，所以我们的需要在startgame中添加一个监听 然后创建一个fly功能 仔细分析一下飞行动作拆封成两点 1.一个为小鸟头部向上扬起；2.小鸟向上运动 我们先来解决小鸟头部向上扬起这个动作，这个动作需要在我们反复点击的同时，小鸟也是反复的上下仰头，所以我们就需要用到sence1中用过的tween 1动作解决了，那...
基于html5游戏引擎phaser.js的flappy_bird小游戏
11-17
这是基于html5游戏引擎phaser.js的小游戏
用Phaser实现Flappy Bird 游戏
weixin_30679823的博客
05-10 235
How to Make a Flappy Bird in HTML5 With Phaser - Part 1 Flappy Bird is a nice little game with easy to understand mechanics, and I thought it would be a perfect fit for an HTML5 game tutorial for b...
啊哈 phaser制作小游戏flappy bird（2）
章鱼小丸子
07-25 1189
下面就只剩最后一个也是最重要的一个场景就是play场景啦先上create代码game.States.play = function(){ this.create = function(){ this.bg = game.add.tileSprite(0,0,game.width,game.height,'background');//背景图,这里先不用移动，游戏开始后再动
phaser框架的flappy bird代码
08-09
在"Phaser框架的Flappy Bird代码"中，我们可以学习到以下关键知识点： 1. **Phaser架构**：Phaser由渲染引擎、声音管理器、输入处理器、时间和调度器、加载器、精灵、动画、物理引擎等多个组件组成。在Flappy Bird...
phaser-flappy-bird-clone：具有Phaser和Typescript的Flappy Bird克隆
02-04
本项目"phaser-flappy-bird-clone"就是一个实例，它利用了Phaser游戏框架和TypeScript编程语言，旨在为开发者提供一个学习和参考的平台。 Phaser是基于HTML5的游戏开发框架，它为开发者提供了丰富的功能和工具，...
用Phaser框架做个flappybird小游戏（三）
weixin_41852068的博客
04-10 334
这次来完成下一个场景的布置 在场景2的设计之前上个场景还有几个地方需要完善一下 首先在完成页面效果前需要在场景管理器中定义一个场景play，并且添加到场景管理器中命名为sence2 从sence1切换到sence2,是通过点击sence1中的按钮，上次我们只是简单的测试输出11111，现在我们修改下语句，使点击按钮效果为切换页面 接下来我们设计sence2，先来看下需要做页面...
用Phaser框架做个flappybird小游戏（二）
weixin_41852068的博客
04-10 245
上次我们完成了背景的制作，这次我们来研究下这只小鸟，让它飞起来 我们先来看下封面的制作 assets文件中有这张小鸟的bird.png与title.png图片，我们先把这两张图片加载，所有资源在perload中加载，在create里创建。但动态图片的的加载和静态的不太一样，如下： 两张图片是同时上下移动，这时候我们将他们打包会更好 效果为 因为小鸟会飞的现在，我们让它动起来，并且移动...
HTML5游戏框架Phaser实现FlappyBird教程
- 移动设备适配：考虑到 Flappy Bird 最初是作为移动设备上的游戏，开发者在使用 Phaser 框架时可能需要考虑触摸控制适配，确保游戏在不同分辨率和操作系统的设备上均能良好运行。 5. 开发者工具和资源： - 编辑...
FlappyBird:一个用 Phaser.js 编写的简单飞扬的小鸟游戏
06-09
飞扬的小鸟 用编写的一个简单的飞翔小鸟游戏 要运行集成的 Web 服务器，必须安装 。 安装依赖： cd server npm install 运行服务器： node server/server.js
flappyBirdNode:使用Phaser 3和Node js的松散鸟克隆
05-12
使用Phaser 3和Node js的蓬松鸟克隆 要求 来安装和运行脚本。 安装并运行 在终端中运行以下命令： 命令 描述 yarn 安装依赖项并启动带有示例的浏览器。 yarn start 启动浏览器以显示示例。 按Ctrl + c杀死http服务器进程。 =======
phaser3-flappy-bird：phaser3的软盘鸟示例
02-05
移相器3 Flappy Bird示例 Phaser3 Flappy Bird例子 初学Phaser3与H5游戏制作。按照网上搜索的一些示例与教程，完整的做出来了。有些小问题还没有找到更好的方式去解决等。 尚未处理的事情有： 鸟的飞行姿态是否可以使用重力去实现 转场特效 小鸟飞行轨迹 按钮点按效果 微信小程序兼容 环境配置 库 版本 移相器3 > = 3.15.1 开发与编译 npm install npm run dev // 开发 npm run build // 编译 相关链接 Phaser3其他说明 启动一个场景 game . scene . start ( 'scene name'
用Phaser框架做个flappybird小游戏（五）
weixin_41852068的博客
04-19 289
上节课我们让小鸟成功飞了起来，那么接下来我们就完成这个游戏的剩余部分。 首先解决目前版本小鸟还是无敌的这个问题，首先想到和地板一样加一个collide碰撞检测。 实际操作告诉我们好像哪里出了点问题，小鸟居然把柱子顶开了！查了一下，简单来说就是力是相互的，柱子又是运动的，不能像地板一样固定住。 那么除了collide碰撞还有没其他办法检测呢，答案是有的，还有一个overlap掠过，代码...
边玩边学之FlappyBird
 ideaOS^(BOOL coding)
01-12 855
demo效果图： 对照教程做了个FlappyBird demo版，源地址：http://anwell.me/articles/unity3d-flappy-bird/ 要点： 场景的搭建，层次关系，Prefabs的创建，脚本的关联。 重要函数的使用： void OnCollisionEnter2D(Collision2D other) //碰撞时调用的方法，可用于死亡或结
phaser html5,从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）
weixin_39574065的博客
06-22 300
回顾上一节我们搭建了游戏的骨架，添加了四个游戏场景，分别是加载、开始、游戏、结束。那么这一节我们来介绍加载这个场景，顺带丰富一下各个场景的基本内容。Phaser.LoaderPhaser框架自带的一个loader，支持加载多种类型的资源，下面是离线文档中的介绍的截图，详细的API可以查阅文档得知。介绍几个常用的加载资源的方法：(下列代码中的game默认为Phaser实例，通过new Phaser....
Phaser 飞机大战学习-第二课
qq_21506881的博客
01-20 491
Phaser 飞机大战学习-第二课 ##图片加载 背景图片科技使用game.add.image(0,0,'backgroud')，也可以使用game.add.sprite(0,0,'background')。 帧动画加载 帧动画加载就必须用game.add.sprite函数 帧动画在加载资源的时候就已经处理好了，使用的是game.load.spritesheet函数 但是现在加载出来是没有动画的，...
教程：制作你的第一个Phaser游戏
04-01 7467
制作一个简单的HTML5游戏
飞机大战小游戏
最新发布
qq_16659821的博客
09-15 510
飞机大战 玩法：单机屏幕任意位置开始，点击鼠标左键滑动控制飞机方向，射击打掉飞机，途中遇到精灵吃掉可产生联排发送子弹，后期会有Boss等来战哦^^。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值