法赛尔。画布

89 阅读1分钟

这篇文章是Phaser系列的一部分。点击这里可以看到该系列的第一篇文章。

Phaser游戏是在HTML<canvas> 元素中呈现的。

如果你是Canvas的新手,我在Canvas API教程中详细介绍了它。

我们创建了一个画布,有一组特定的宽度/高度,然后我们在里面画画。

我们不能用CSS来设计元素的样式,而是要使用一个更低级、更难的API。

幸运的是,Phaser(和其他使用Canvas的库)抽象出了所有微小的细节,所以我们可以专注于应用代码。

我们通过调用Phaser对象上的Game静态方法来初始化一个Phaser游戏。

new Phaser.Game()

我们必须向这个函数传递一个带有一系列配置选项的对象字面。

new Phaser.Game({})

在这个配置对象中,我们可以设置各种属性。

首先,我们可以设置画布的宽度和高度。

new Phaser.Game({
  width: 450,
  height: 600
})

我们可以传递的另一个属性是backgroundColor ,它接受一个十六进制的值,如0x000000 ,表示黑色。

颜色与CSS颜色类似,但你需要在0x ,这样JS就知道它是一个十六进制数字。