发现很多人玩h5小游戏,感觉比较有意思,加上目前在项目中没什么很忙的事情,然后就想研究一下h5小游戏。在网上搜索了一下,有人推荐使用白鹭引擎(Egret),但是我下载下来之后一直打不开,不知道什么情况。后来在网上发现了一个js框架phaser,然后就尝试了一下。本次是记录一下使用phaserjs开发h5小游戏的过程。内容很简单,暂时没有复杂的东西(这里面有免费教程Phaser小站,还在学习中)
先看一下成果图
一、开发前
首先要在Phaser官网下载使用的js文件(正常开发下载压缩版phaser.min.js即可)。
二、开发中
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="phaser.min.js"></script>
</head>
<body>
<div id="game"></div>
</body>
</html>
在html中那一行div是用来渲染页面使用的。(后来发现好像没有也可以,目前还未发现问题)
js代码
在引入js文件,我们可以编写js代码:
var game = new Phaser.Game(800, 400, Phaser.CANVAS, 'game', {
preload: load, create: create, update: update});
首先了解Phaser.Game()内参数分别是什么意思,(好像后面还有几个参数,但是不常用所以也就不说了)
Phaser.Game(width, height, renderer, parent, state)
宽(px)、高(px)、渲染方式(还有Phaser.WEBGL,Phaser.AUTO)[虽然不太很了解]、放置canvas元素的父元素(即html中div的id)、我自己理解的场景的生命周期。(这个宽高是不带引号的,当时我不小心加了引号一直黑屏,好像不报错,我也忘了,找了半天)
关于那个我理解的生命周期(preload、create。update):
- preload: 用来加载资源(什么图片、背景之类的),最先执行。
- create: 初始化场景,preload加载完之后执行。
- update: 最后执行,时时刻刻都在走这个方法(我认为就是你游戏中比如移动能看出来,因为这个方法一直在走)。
然后我们开始写这些生命周期内的具体实现:
preload内:
function load() {
game.load.image('star', 'assets/star.png');
game.load.