文档章节

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

tonglei0429
 tonglei0429
发布于 2016/06/21 00:29
字数 609
阅读 194
收藏 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
博文 38
码字总数 15564
作品 0
朝阳
程序员
私信 提问
加载中

评论(1)

2010jing
2010jing
很好想学
Phaser 3.0.0 Beta6 发布,优秀的 HTML5 游戏框架

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

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

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

王练
04/23
885
1
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6
8个经典的HTML5游戏在线试玩及源码学习

游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好玩的同时,相信也会有不少HTML5开发者对其源代码感兴趣,一起来看看吧。 1、Project Blaze...

tp_wire
2012/08/29
48K
14

没有更多内容

加载失败,请刷新页面

加载更多

特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
15分钟前
0
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
29分钟前
0
0
提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字

提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字: 作者:王健茜;断断续续一个多月才读完了《中国文化的深层结构》,这并不是一本难懂的书,之所以读得慢,源于对书中观点的思...

原创小博客
31分钟前
0
0
高德地图-行政区域接口

1、获取全国各省信息 https://restapi.amap.com/v3/config/district?extensions=all&key=应用Key&s=rsv3&output=json 2、获取下级行政区域信息 https://restapi.amap.com/v3/config/distric......

voole
43分钟前
3
0
集群介绍 ..

12月19日任务 18.1 集群介绍 18.2 keepalived介绍 18.3/18.4/18.5 用keepalived配置高可用集群 一.集群介绍 根据功能划分为两大类:高可用和负载均衡 高可用集群通常为两台服务器,一台工作,...

hhpuppy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部