文档章节

学习 Phaser.js HTML5游戏开发-DAY1

tonglei0429
 tonglei0429
发布于 2016/06/21 00:29
字数 609
阅读 548
收藏 8

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

Phaser 是目前 Github 上最受欢迎的 H5 游戏框架。

官网地址:http://phaser.io

Github: https://github.com/photonstorm/phaser

第一天目标,准备 Phaser 的开发环境,跑起入门实例

1.准备环境

下载 Phaser.js

https://github.com/photonstorm/phaser/blob/master/build/phaser.min.js

2. day1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>万事屋-Phaser.js-Day1</title>
</head>
<body>
<script type="text/javascript" src="../libs/phaser.min.js"></script>
<script type="text/javascript" src="day1.js"></script>
</body>
</html>

3. day1.js

// 1. 声明游戏对象 'game'
// 前两个参数,800, 600 为游戏界面尺寸
// 第三个参数可以为 Phaser.CANVAS, Phaser.WEBGL, Phaser.AUTO 代表浏览器渲染模式,AUTO = ? WEBGL : CANVAS
// 第四个参数代表 html 中的 DOM 元素,非必需
// 第五个参数为监听器
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
// 3. 定义全局变量
var platforms;
var player;
var cursors;
var stars;
var score = 0;
var scoreText;

function preload() {
	// 2. 预加载资源,第一个参数是Key,第二参数是资源路径
	game.load.image('sky', '../assets/sky.png');
	game.load.image('ground', '../assets/platform.png');
	game.load.image('star', '../assets/star.png');
	// 将资源加载为Sprite Sheet,每32*48为一个Sprite
	game.load.spritesheet('dude', '../assets/dude.png', 32, 48);
}

function create() {
	// 4. 配置物理环境
	game.physics.startSystem(Phaser.Physics.ARCADE);
	// 5. 设置背景
	// 前两个参数代表位置
	// 第三个参数是添加的对象,在2中定义
	game.add.sprite(0, 0, 'sky');
	// 6. 创建元素组,比如石块和地面
	platforms = game.add.group();
	// 7. 使其可碰撞
	platforms.enableBody = true;
	// 8. 创建地面, 前两个参数代表位置
	var ground = platforms.create(0, game.world.height - 64, 'ground');
	// 9. 适应屏幕大小
	ground.scale.setTo(2, 2);
	// 10. 固定位置
	ground.body.immovable = true;
	// 11. 再创建两个台阶
	var ledge = platforms.create(400, 400, 'ground');
	ledge.body.immovable = true;
	ledge = platforms.create(-150, 250, 'ground');
	ledge.body.immovable = true;

	// 12. 创建主人公
	player = game.add.sprite(32, game.world.height - 150, 'dude');
	game.physics.arcade.enable(player);
	// 13. 增加物理属性,比如弹力,重力
	player.body.bounce.y = 0.2;
	player.body.gravity.y = 300;
	player.body.collideWorldBounds = true;
	// 14. 设置动作,左右移动
	player.animations.add('left', [0, 1, 2, 3], 10, true);
	player.animations.add('right', [5, 6, 7, 8], 10, true);

	// 16. 键盘事件
	cursors = game.input.keyboard.createCursorKeys();

	stars = game.add.group();

    stars.enableBody = true;

    // 18. 创建一堆星星
    for (var i = 0; i < 12; i++) {
        var star = stars.create(i * 70, 0, 'star');
        star.body.gravity.y = 60;
        star.body.bounce.y = 0.3 + Math.random() * 0.2;
    }

	// 22. 创建分数标签
	scoreText = game.add.text(16, 16, 'score: 0', {fontSize:'32px', fill:'#000'});
}

function update() {
	// 15. 判断碰撞
	game.physics.arcade.collide(player, platforms);
	// 19. 支持碰撞
    game.physics.arcade.collide(stars, platforms);
    // 20. 碰撞事件
    game.physics.arcade.overlap(player, stars, collectStar, null, this);

	// 17. 响应键盘事件
    player.body.velocity.x = 0;
    if (cursors.left.isDown) {
        //  左移
        player.body.velocity.x = -150;
        player.animations.play('left');
    } else if (cursors.right.isDown) {
        //  右移
        player.body.velocity.x = 150;
        player.animations.play('right');
    } else {
        player.animations.stop();
        player.frame = 4;
    }

    //  跳
    if (cursors.up.isDown && player.body.touching.down) {
        player.body.velocity.y = -350;
    }
}

function collectStar (player, star) {
	// 21. 消灭星星
    star.kill();
    // 23. 记分
    score += 10;
    scoreText.text = 'Score: ' + score;
}

4. 效果图

演示地址:

http://gintama.vip/examples-phaser/day1.html

tonglei0429
粉丝 6
博文 51
码字总数 35597
作品 0
朝阳
程序员
私信 提问
加载中
此博客有 1 条评论,请先登录后再查看。
html5游戏引擎-Pharse.js学习笔记(一)

1.前言   前几天随着flappy bird这样的小游戏的火爆,使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎,感觉用引擎还是要方便一些。所...

zaaack
2014/10/14
137
0
Phaser 3.0.0 Beta6 发布,优秀的 HTML5 游戏框架

Phaser 3.0.0 Beta6 已发布,这是 Phaser 3 的第六个测试版本。 Phaser 是一款非常优秀的 HTML5 游戏框架,致力于发展 PC 端和移动端的 HTML5 游戏,是一款不可多得的神器。基于 Pixi.js,支...

王练
2017/10/10
1.6K
1
Phaser 3.6.0 发布,优秀的 HTML5 游戏框架

Phaser 3.6.0 已发布。Phaser 是一款非常优秀的 HTML5 游戏框架,致力于发展 PC 端和移动端的 HTML5 游戏,是一款不可多得的神器。基于 Pixi.js,支持桌面和移动 Web 浏览器。游戏可以通过第...

王练
2018/04/23
1K
1
phaserjs 总结

什么是Phaser? 简单来说,Phaser就是一款免费开源的HTML5游戏框架 它有什么特点? 高性能:快速、免费、易于维护。一方面,开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。...

osc_715mam6n
2018/09/04
2
0
phaserjs 总结

什么是Phaser? 简单来说,Phaser就是一款免费开源的HTML5游戏框架 它有什么特点? 高性能:快速、免费、易于维护。一方面,开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。...

osc_cleyftyz
2019/03/29
2
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS6.9下手动编译并安装Python3.7

CentOS6.9默认安装的python版本为2.6.6,若想安装python3以上版本,只能手工编译安装 下面介绍python3.7.3版本的手动编译并安装的步骤 1、下载Python3.7.3的源码包 https://www.python.org/f...

yuanfan2012
2019/05/09
0
0
用canvas画太极图(一步步详解附带源代码)

canvas绘图 该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它。 绘制路径 要绘制路...

osc_8adtko4d
32分钟前
7
0
iOS逆向开发(5):微信强制升级的突破

接下来的几篇文章,小程以微信为例,实战地演示一下:如何注入iOS的APP。其中使用到的知识,基本在前面的文章中都有介绍到。 小白:小程,我想用回旧版本的微信! 小程:为什么要用旧版本微信...

广州小程
05/21
6
0
时间格式的处理,前端的时间显示2020-07-13T16:02:00.000+0000

在后端添加@JsonFormat @JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8") 在这里插public class CdEqInfoVO { /** * 设备id */......

osc_ekw8urc6
33分钟前
9
0
CLion 中的 Makefile 项目:现已公开!

CLion 2020.2 EAP2 带来了期待已久的 Makefile 项目支持。尽管它仍在初期阶段,具有各种局限性和已知问题,但足以应付大量项目。 您有 Makefile 项目吗?查看原文获取免费的 EAP 版本并立即尝...

Bennyhuo
前天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部