使用phaserjs开发简单h5小游戏

发现很多人玩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):

  1. preload: 用来加载资源(什么图片、背景之类的),最先执行。
  2. create: 初始化场景,preload加载完之后执行。
  3. update: 最后执行,时时刻刻都在走这个方法(我认为就是你游戏中比如移动能看出来,因为这个方法一直在走)。

然后我们开始写这些生命周期内的具体实现:
preload内

function load() {
   
   
    game.load.image('star', 'assets/star.png');
    game.load.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值