文档章节

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

tonglei0429
 tonglei0429
发布于 2016/06/21 00:29
字数 609
阅读 156
收藏 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.6.0 发布,优秀的 HTML5 游戏框架

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

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

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

web前端小辰
05/23
0
0
娱乐开发两不误,10 大开源游戏框架推荐

从角色扮演游戏到即时策略游戏,从冒险解谜游戏到动作射击游戏,甚至是只有一兆大小的迷你游戏,都有起着核心作用的技术组成部分。本文将介绍十大好用的开源游戏引擎和框架,希望能给你的游戏...

编辑部的故事
2017/10/25
0
19
推荐10款超级有趣的HTML5小游戏

日期:2012-4-2 来源:GBin1.com HTML5的发展速度比任何人的都想像都要更快。更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,...

gbin1
2012/04/04
0
0
HTML5游戏开发高级教程 | Lynda教程 中文字幕

HTML5游戏开发高级教程 | Lynda教程 中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时 所属类别:Html 全部游戏开发课程 了解如何使用HTML5创建交互式,动态和丰富多彩...

zwsub
08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

spring 事件

ContextRefreshedEvent Event raised when an {@code ApplicationContext} gets initialized or refreshed. ContextClosedEvent Event raised when an {@code ApplicationContext} gets clos......

Canaan_
31分钟前
1
0
leetcode两数之和

leetcode中求两数之和解决方法 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。 给定 nums = [2, 7, 11, ...

lar555
48分钟前
1
0
js实现限制网页内容复制

转载 在我们做的网页发到网上后,如果访客看到比较喜欢的内容,只要复制就可以变为自己的,自己辛辛苦苦弄半天还不及人家的一下复制,有时为了只让访客看到,而不能让它们复制内容,就用Jav...

lc_comeon
52分钟前
1
0
jenkins将spring boot项目发布到阿里云镜像中

1、spring boot项目 1.1 pom.xml配置 <artifactId>xxx-docker</artifactId><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.......

xixingzhe
今天
0
0
qsv格式可以在电视上播放吗

  大家都知道qsv格式是爱奇艺的独家缓存格式,是加密的,一般的播放器是无法播放的,只能在爱奇艺播放器上播放,如果想要在电视上播放,就必须要安装爱奇艺播放器,比较麻烦。其实还有一种...

萤火的萤火
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部