欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用vscode做个flappybird小游戏

程序员文章站 2022-06-10 19:10:44
...

记录下自己做flappybird的过程

  • 安装没有什么难度,也不需要配置什么,下面是一些需要的文件

    vscode64位安装包:
    https://pan.baidu.com/s/1GXXn1X-JiiGguFQXfEPDJQ 提取码:mwvz

    游戏资源,一些图片什么的:https://pan.baidu.com/s/1CqpqoFx4wZAeKT0JhydWdQ 提取码:hves

    phaser.min.js游戏框架:
    链接:https://pan.baidu.com/s/1xtix-jHhCmhp_oieXciClg 提取码:yzlx

  • 安装完后,先装插件
    用vscode做个flappybird小游戏
    Chinese:中文包
    Live Server: 用于在浏览器中预览做的网页
    这边我的live server插件老是安装失败,手动安装也不行,尝试了许久,最后选择重启电脑,果然还是重启大法好,成功了!

  • 新建一个flappybird/js文件夹,用vscode打开,并新建一个index.html文件输入html:5,自动补全代码
    用vscode做个flappybird小游戏
    用vscode做个flappybird小游戏

    1、所有的标签可以理解成一个盒子,盒子中可以嵌套盒子
    2、head用于声明与引用
    3、body用于放置网页内容
    4、title写网页标题

  • 编写测试语句,然后右键open with live server,浏览页面效果。
    用vscode做个flappybird小游戏
    用vscode做个flappybird小游戏

  • 在body中新建ID为game的盒子
    用vscode做个flappybird小游戏

  • 将 phaser.min.js游戏框架放入js文件夹中,并在head中引入框架,用script
    用vscode做个flappybird小游戏

  • 在js文件夹中新建game.js文件,主要是用于放置游戏逻辑代码,并且引入
    用vscode做个flappybird小游戏

  • 截至目前的大概框架构建完毕,index代码如下,

<!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>
    <!-- 新建一个ID为game的盒子 -->
    <div id="game"></div>
</body>
<script src="js/game.js"></script>
</html>
  • 下面是game.js游戏逻辑代码
// const game = new Phaser.Game(游戏界面宽度,游戏界面的高度,渲染方式,盒子ID)
const game = new Phaser.Game(320,505,Phaser.AUTO,"game")
// 在game对象里面添加一个gameStates属性,这个属性默认是空,用来放置游戏的场景 ps所有符号必须是英文
game.gameStates={ }
//游戏场景管理器,game的gameStates场景管理器里面,我放入一个menu场景
game.gameStates.menu=function(){
    // menu是一个场景
    // 一个合法场景必须有以下三个功能中的一个
    this.preload=function(){
        // game.load.image(名称,路径)
        game.load.image('background',"assets/background.png")
        game.load.image('ground',"assets/ground.png")

    }   //加载资源
    this.create=function(){
        //加载完成之后游戏进入create环节
        // const bg=game.add.tileSprite(X轴位置,Y轴位置,宽度,高度,对象)
        const mybg=game.add.tileSprite(0,0,game.width,game.height,'background')    //瓷砖精灵,背景拼接
        // 背景重复滚动的代码
        // bg.autoScroll(X轴,Y轴)
        mybg.autoScroll(-20,0)
        const ground=game.add.tileSprite(0,game.height-112,game.width,112,'ground')    //瓷砖精灵,背景拼接
        ground.autoScroll(-100,0)
    }    //加载资源后,进入create方法
    this.update=function(){}    //用来做场景检测,需要时时刻刻检测的内容,放在upadate里面
}
game.state.add("sence1",game.gameStates.menu)
game.state.start("sence1")
  • 现在背景已经布置完毕并且动起来了
    用vscode做个flappybird小游戏
相关标签: 笔记 前端