啊哈 phaser制作小游戏flappy bird（1）

最新推荐文章于 2020-04-10 14:32:50 发布

VIP文章小章鱼哥

最新推荐文章于 2020-04-10 14:32:50 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/u014787301/article/details/47059137

版权

看到phaser的world和camera玩的已如此之好，果断自己操练了一个小游戏出来玩玩。记录一下啦，加深一下印象。

首先想起他引擎一样。在html5中添加一个canvas然后实例化一个游戏对象来实现的。不过phaser是通过DOM父级元素的ID，自己动态添加出这个canvas来的。所以html5的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>game</title>
<script src="js/phaser.js"></script>
</head>
<body>
<div id="game"></div>
<script>
var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例
</script>
</body>
</html>

里面的new phaser实例化一个game出来。里面的参数情况是这样的。

Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

width是画布的宽度。

height是画布的高度。

renderer是按照什么方式渲染图像Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas。

parent是规定这个画布的父级元素可以是id，也可以使dom元素本身。

phaser会自动创建一个canvas在这个父级元素里面的。

state是场景。虽然应该改名叫scene才对啊。后面创建了场景之后就把最先运行的场景夹在进来啦。我上面没有填。后面再加吧。

transparent: 是否使用透明的canvas背景

antialias: 是否启用抗锯齿

physicsConfig: 游戏物理系统配置参数

以上所有参数都是可选的。

创建场景。实在太简单了好吗？！只要在场景里面有下面这样的格式就可以了。就是一个合法的场景。

//state可以是一个自定义对象
var state1 = {
    preload : function

最低0.47元/天解锁文章

小章鱼哥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
啊哈 phaser制作小游戏flappy bird（1）

看到phaser的world和camera玩的已如此之好，果断自己操练了一个小游戏出来玩玩。记录一下啦，加深一下印象。首先想起他引擎一样。在html5中添加一个canvas然后实例化一个游戏对象来实现的。不过phaser是通过DOM父级元素的ID，自己动态添加出这个canvas来的。所以html5的代码如下：<!DOCTYPE html><html><head><meta charset="u
复制链接

扫一扫