文档章节

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

tonglei0429
 tonglei0429
发布于 2016/06/21 00:29
字数 609
阅读 154
收藏 8
点赞 0
评论 1

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.6.0 发布,优秀的 HTML5 游戏框架

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

王练 ⋅ 04/23 ⋅ 0

WEB前端开发学习HTML5到底有多厉害?

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

web前端小辰 ⋅ 05/23 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

Phaser 3.0.0 Beta6 发布,优秀的 HTML5 游戏框架

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

王练 ⋅ 2017/10/10 ⋅ 2

【重磅】IT界大牛 —— 廖雪峰加盟开课吧,Web全栈视频限时领取

2018年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰。会跨平台混合应用开发、微信小程序、Web应用、pc以及手机炫酷网页的HTML5全栈开发工...

vm199zkg3y7150u5 ⋅ 05/23 ⋅ 0

白鹭引擎 5.3.0 正式发布,支持 3D 游戏开发

一直关注白鹭引擎的童靴会发现,今天白鹭引擎先后完成了白鹭引擎5.2.0、白鹭引擎5.3.0两个版本的更迭,在周三发布《白鹭引擎稳定版即将发布,后续路线图同步公开》文中,我们已详细介绍了白鹭...

白鹭科技 ⋅ 05/25 ⋅ 0

WEB前端学习面试常见问题系列:H5有哪些新标签?

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

web前端小辰 ⋅ 05/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 29分钟前 ⋅ 2

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 54分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 58分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部