用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
安装完后，先装插件

Chinese：中文包
Live Server：用于在浏览器中预览做的网页
这边我的live server插件老是安装失败，手动安装也不行，尝试了许久，最后选择重启电脑，果然还是重启大法好，成功了！
新建一个flappybird/js文件夹，用vscode打开，并新建一个index.html文件输入html:5，自动补全代码

1、所有的标签可以理解成一个盒子，盒子中可以嵌套盒子
2、head用于声明与引用
3、body用于放置网页内容
4、title写网页标题
编写测试语句，然后右键open with live server，浏览页面效果。
在body中新建ID为game的盒子
将 phaser.min.js游戏框架放入js文件夹中，并在head中引入框架，用script
在js文件夹中新建game.js文件，主要是用于放置游戏逻辑代码，并且引入
截至目前的大概框架构建完毕,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")

现在背景已经布置完毕并且动起来了