文档章节

Phaser.js-开发愤怒的小鸟(上)

做h5的小韩
 做h5的小韩
发布于 2016/07/24 17:53
字数 1315
阅读 117
收藏 0
点赞 0
评论 2

切入正题,想必大家之前都了解过Phaser.js,PS:不了解的可以在官网进去http://www.bootcdn.cn/phaser/readme/看一下就可以,在开发前要事先去官网把需要的框架组件下载下来,这个游戏写完的下载地址:http://git.oschina.net/8946a/bird_-jumping     好废话少说下面看干货

 

首先我们先要引用框架,没错就像这样

<script type="text/javascript" src="phaser.min.js"></script>

就像大家所了解的那样 接下来我们创建一个DIV 用来放置动画的 “场景”

<div id="game_div"></div>

好了,光做完这些还不行,这只是刚刚开始,我们在加一些CSS的东西,让他看起来更加的漂亮

    #game_div, p {
      width: 400px;
      margin: auto;
      margin-top: 20px;
    }

OK,一起准备工作都完成了就像现在这样

是不是有些迫不及待的进行开发了,废话少说,带大家一起开始进行JS部分的绘制

<!--游戏JS部分-->

首先我们要创建游戏的宽高,没错就是这样

var game = new Phaser.Game(400,490,Phaser.AUTO,'game_div');
var game_state = {};

这句话的意思是说,我创建的游戏的宽高,引擎否自动适应,已经显示的位置(也就是刚刚定义的盒子里面)

第二段代码创建一个容器(下文用来存储游戏内容)

接下来我们开始添加游戏主体的画面

// 游戏主体画面
game_state.main = function() { };  
game_state.main.prototype = {


    preload: function() { 
        // 存储游戏加载背景资源
        this.game.stage.backgroundColor = '#71c5cf';

        // 精灵加载游戏 鸟图片
        this.game.load.image('bird', 'assets/bird.png');  

        // 加载管道 图片
        this.game.load.image('pipe', 'assets/pipe.png');      
    },

到这里我们已经把游戏预载入的资源先提取出来之后,在看代码

  // 创建游戏实例
    create: function() { 
        // 给小鸟添加精灵   宽 高
        this.bird = this.game.add.sprite(100, 245, 'bird');
        
        // 添加重力物理引擎
        this.bird.body.gravity.y = 1000; 

在这里我们运用了一个类,,没错就是sprite精灵,这个sprite是引擎中核心的地方,它的实用性超乎你的想象,分别定义了对象小鸟的宽 高

之后是物理引擎,引擎在这里简单提一嘴,速度,加速度,角速度,重力 ,阻力,ps:这些都是物理引擎的部分(小伙伴们任重而道远~)这里所用的是重力,不让小鸟掉下来

往下我们接着看

// 键盘Input接受事件 当按下时候执行添加函数
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this); 

        // 游戏添加组,用于存储管道对象
        this.pipes = game.add.group();
        this.pipes.createMultiple(20, 'pipe');  

这段代码用到了input,这里的跟html里面的Input是有一定区别的,这里可以进行设置鼠标事件,还是键盘事件,(用到的是键盘事件),之后我们开始添加组,组是个特别神奇的东西,既可以存储对象,进行检测碰撞,又可以囊括子集进行封装使用,group!!!下文我们还会提到(管道组,管道名称)

 // 调用时钟事件循环进行添加管道1.5秒
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);           

        // 默认得分0,追加分数面板
        this.score = 0;
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style);  
    },

这里所提到的时钟对象在我看来不如说是setInterval();哈哈哈 各位前端er是不是突然有种熟悉的赶脚~ 没错定时器,这玩意到哪儿都这么实用,通过时钟事件我们来进行循环,参数的大概意思就是说 1.5秒我让管道添加一次,

我们现在有了管道,有了资源,但是们有记录分数的"得分版" 先定义得分默认为0,随后我们开始设置得分的样式 css.......太简单不说了,之后进行得分的追加,这里用的是add.text();参数大概实说 宽高20,从0开始,运用实现定义好的style样式

少年,不要着急我们慢慢来,慢慢说哈~

// 游戏未开始
    update: function() {
        //如果小鸟超出窗口,重置游戏
        if (this.bird.inWorld == false)
            this.restart_game(); 

        // 碰撞与接触感应物理引擎,小鸟跟管道 ,重置游戏
        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);      
    },

我们 开始订制游戏规则,大家可以考虑一下,如果小鸟跳出了窗口会怎么样?我们在这里引用函数 word 这里是世界的意思 ,这个东东可以说很牛逼 ,只要在游戏里,都归他管,牛逼吧 哈哈哈~

如果小鸟超出了世界。那么重新开始游戏,新知识就是这样,一个函数接着另一个函数,简直让人欲罢不能,关于Phaser.js里面的触碰感应也是一个核心的知识点,这里面用的是overLap函数,这个函数很牛逼,通俗意思是检测物体跟物体是否碰撞,碰撞后的效果,这里是两个意思,不明白的同学可以去手册上看一下,哈哈 这里就不墨迹了,随后代码被我放在了组里 group 进行碰撞的检测,

 

今天就说到这里,第一部分先到这,第二部分明天更新(下班了!!!回家和喝酒0.0)

© 著作权归作者所有

共有 人打赏支持
做h5的小韩
粉丝 6
博文 37
码字总数 18242
作品 0
海淀
程序员
加载中

评论(2)

做h5的小韩
做h5的小韩

引用来自“channingbr”的评论

谢谢博主,本人也在学习Phaser,最近发现一个很好的网站,phaser小站:https://www.phaser-china.com/,推荐给大家
老哥说的太对了,https://www.phaser-china.com/ 这里面有好多教程
channingbr
channingbr
谢谢博主,本人也在学习Phaser,最近发现一个很好的网站,phaser小站:https://www.phaser-china.com/,推荐给大家
Phaser.js开发-愤怒的小鸟(下)

通过上篇文章的学习,我们已经能通过键盘来控制小鸟,包括小鸟碰撞是否超出窗口,以及管道循环,还有分数面板的检测,接下来我们继续往下进行。

做h5的小韩
2016/08/02
34
1
Phaser.js开发-星星狗游戏(上)

星星狗PS(个人兴趣爱好,不是游戏开发专业,不喜勿喷), 转载请命名出处:http://my.oschina.net/8946a/blog/edit/738388 试玩下载地址 :http://git.oschina.net/8946a/stardog 简单介绍下写...

做h5的小韩
2016/08/26
182
1
狙击野鸭:一个HTML5 + JavaScript游戏

当“愤怒的小鸟”这款游戏红遍全球、挣得盆满钵盈时,相信很多程序员都对游戏开发有蠢蠢欲动之想,但我也相信的大部分从未开发过游戏的程序员会对这个深不可测的领域望而却步。其实,会者不难...

小卒过河
2011/11/03
2.5K
10
愤怒的小鸟开发语言火爆,挤掉 JavaScript

随着的iOS开始支持的Lua脚本语言,许多iPhone游戏开始使用Lua的开发,例如愤怒的小鸟游戏,Lua的流行指数快速窜起,甚至在今年6月超越了JavaScript中,进入前10 TIOBE大开发语言排行。 根据全...

红薯
2011/07/04
7.6K
18
关于android游戏开发,请大家指点指点

在android游戏开发中,那些会动的东西(如“愤怒的小鸟”中的鸟)是通过图片帧的切换实现的么?还是说直接就是一个gif?还是其他的什么东西? 这种动画用什么来做?

hanjieson
2013/07/30
208
4
40个很棒的由html5开发的网络游戏案例

我们已经看到了更多的网站正在使用HTML5来代替Flash,甚至网络游戏。如在音频和视频元素中HTML5担当很酷的功能,使得网页游戏可能没有安装Flash,你甚至不需要插件就可以玩游戏,今天给设计是...

未来十年
2012/02/02
0
0
个性二维码,三分钟搞定,愤怒的小鸟!

具体调用的是一个api接口,传输的json数据。 接口演示地址: http://original-ad.com/qrCodeApi/qrCodeApiDemo.html 以愤怒的小鸟作为简单的演示 调用的时候,需要accessId,作为验证授权,那...

cheng5x
2014/02/25
0
0
亚马逊Android应用商店最新截图

亚马逊的Android应用商店已经接近开放,至少最新泄露的截图显示他们的准备工作已经接近完工。亚马逊将会以amazon.com/appstore为他们的应用商店网址,目前尚未开放,不过在今天早些时候有人成...

老枪
2011/03/17
647
0
5个神奇的 HTML5 飞行战机游戏

强大的HTML5可以替代flash的事情实在是太多了,甚至连游戏都能用HTML5来完成,而且完成得十分完美。今天要个大家分享的5个HTML5飞行战机游戏就是用纯HTML5制作而成的,的确很让人心动一把。下...

yykj
2012/12/04
5.7K
14
苹果更新 App Store 应用排名榜

新闻来源:weiphone 紧随着250亿次iOS应用下载的公布,苹果今天更新了App Store应用排名榜,付费及免费应用均包含在内。这份榜单是苹果在去年1月达到100亿次App Store应用下载里程碑时首次公布...

红薯
2012/03/06
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

流利阅读笔记29-20180718待学习

高等教育未来成谜,前景到底在哪里? Ray 2018-07-18 1.今日导读 在这个信息爆炸的年代,获取知识是一件越来越容易的事情。人们曾经认为,如此的时代进步会给高等教育带来众多便利。但事实的...

aibinxiao
20分钟前
7
0
第15章FTP服务搭建与配置

15.1FTP介绍 FTP多用于Windows传文件到linux rz sz在文件超过4G,就无法使用了——>安装包yum install -y install lrzsz rz把 window 上的文件传输到 linux 上 sz 把 linux 上的文件传输到 ...

Linux学习笔记
28分钟前
0
0
OSChina 周三乱弹 —— 你被我从 osc 老婆们名单中踢出了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小鱼丁:分享五月天的单曲《后来的我们 (电影《后来的我们》片名曲)》: 《后来的我们 (电影《后来的我们》片名曲)》- 五月天 手机党少年们想...

小小编辑
33分钟前
7
1
Spring Boot Admin 2.0开箱体验

概述 在我之前的 《Spring Boot应用监控实战》 一文中,讲述了如何利用 Spring Boot Admin 1.5.X 版本来可视化地监控 Spring Boot 应用。说时迟,那时快,现在 Spring Boot Admin 都更新到 ...

CodeSheep
52分钟前
0
0
Python + Selenium + Chrome 使用代理 auth 的用户名密码授权

米扑代理,全球领导的代理品牌,专注代理行业近十年,提供开放、私密、独享代理,并可免费试用 米扑代理官网:https://proxy.mimvp.com 本文示例,是结合米扑代理的私密、独享、开放代理,专...

sunboy2050
今天
0
0
实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部