用vscode做个flappybird小游戏
记录下自己做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")
- 现在背景已经布置完毕并且动起来了
上一篇: Android实现粒子爆炸效果的方法
下一篇: 上火喝什么汤好,健康又营养!