使用phaserjs开发简单h5小游戏

最新推荐文章于 2025-07-18 13:27:14 发布

原创

最新推荐文章于 2025-07-18 13:27:14 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#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)：

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

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

function load() {
   
   
    game.load.image('star', 'assets/star.png');
    game.load.

最低0.47元/天解锁文章

200万优质内容无限畅学