前端小游戏制作【戳泡泡】

最近捣鼓花了一周时间捣鼓了一个游戏引擎【白鹭】,游戏原型是公司一个专题的游戏,戳泡泡,中间断断续续捣鼓了一周,终于正常运行游戏了。

游戏有两个版本:纯白鹭引擎和添加了p2物理引擎两个.

有喜欢的可以去研究下【白鹭引擎】

废话不多说,上图上代码。

main.ts

红框内的是我写的代码,tool是我的一个工具集合,infoui是界面,gamFrameUI和gameFrameUI_p2是游戏界面逻辑的类,第二个使用了p2物理引擎的。

_engine变量是定义使用的引擎,现在只有两个,一个是为空,另一个是p2.

资源组引用

创建游戏,重点开始了。

类里面都需要当前舞台,所以传入当前舞台

根据界面需要,这里单独添加一个头部背景图片。

这个位置就是判断使用哪个引擎

这个添加一个全局控制的函数:_clickPaoPao

gameStart(fn) 开始游戏 下面有介绍。

 Tool.ts

这个类里面有:获取图片,获取比例高度,获取比例宽度,随机数

InfoUI.ts

这个类是界面显示的布局、分数等。

里面重要逻辑就是倒计时部分

GameFrameUI.ts和GameFrameUI_P2.ts

这两个类不一样的地方就是一个用了物理引擎,一个没用,所以在创建元素的时候有所不同。

P2需要创建P2物理引擎专用的world

添加声音,

点击和时间结束时:播放声音和粒子显示

示例链接:http://pan.baidu.com/s/1kV6npPl

p2引擎在手机上展示性能上不行。

总的来说,这个引擎还是不错,该有的都要,而且不大,扩展东西也多。

喜欢的同学可以拿源代码瞅瞅。

时间: 2024-12-15 10:01:21

前端小游戏制作【戳泡泡】的相关文章

节奏大师小游戏制作流程

当我接到这个小游戏的时候,让我在那一瞬间不知所措.但总是要尝试,尝试后你会发现,只要思路理清楚,一步步走下来,效果自然的就实现了起来. 下面简单讲下自己做这个的一个思路. HTML实现:页面上有4个点击的按钮和4条轨道,4条轨道的倾斜度可通过transform: rotate();样式来实现. js实现:首先我们定义一个随机落下的物体的一个方法: 1 randoms: function() { 2 num++; 3 number = (1 + Math.random() * (4 - 1)).t

翻转拼图网页小游戏制作

咱们学东西的时候,往往喜欢玩点有趣的,这次就参考别人的创意,做了一个小游戏,虽然在css和JavaScript上我都算是新手,不过辛苦一天还是还超哥和各位师兄的帮助下弄出来了,就把这次开发分享一下吧. 先上最终成品 http://luyishisi.github.io/test.html 在准备写这个之前至少要有html,css和JavaScript的知识,如果会jQuery最好. 首先贴上一开始想的开发规划: 逐步实现:1:点击按钮实现变色,2:点击按钮实现旁边按钮的变色3:实现变色的重复性,

前端小游戏页面性能优化

公司是做教育类游戏开发,以前是用flash制作,现在开始使用CreateJS框架开发Canvas游戏.今天突然收到一个任务:游戏在iPad2下面游戏会打不开,然后自动刷新,再加载不出来,然后再刷新,陷入了死循环…… 发现问题: 屏幕左上角提示 “因出现错误 重新加载了网页” 解决问题: 通过度娘得知此问题是由越狱或内存引起的.排除越狱可能(因为没有越狱),剩下就是内存问题.打开Chrome更多工具里面的任务管理器(快捷键Shift+Esc)看到单页内存占用量一路飙升到800,000K左右,当时自

Java从基础到进阶学习之路----数独小游戏制作(一)

前言 数独这个游戏大多数人都玩过,所以具体的游戏本身就不描述了. 详见百度百科:http://baike.baidu.com/subview/961/10842669.htm 规则和目标 数独的规则很简单,就是在每一行,每一列,每个小宫格区(3X3)内不可以出现重复的数字. 先贴一下大概的游戏界面样子: 需求功能分析 站在学习者的角度来说 练下手,学习一下MVC框架模式 这个项目涉及的Java的主要内容有: 1.Java基础语法,特别是Java集合的部分. 2.Java内置的Observer模式

Java从基础到进阶学习之路----数独小游戏制作(二)

详细设计 游戏数据结构设计 显然,需要存储数据的地方只有九宫格地图部分. 对于地图,很明显我们可以采用二维数组int [] [] game;来存储地图中的数据.但是int的二维数组虽然直接简单,但是还是有一定不便之处,比如没有集合的内置处理方法丰富.所以,显然,在游戏地图的生成过程中,一些辅助数据我们可以采用Java的集合. 地图生成算法 对于数独而言,游戏的成功的最根本的保证就是当前的地图有一个存在的解.这就像是解方程,如果不存在解,那么这个游戏本身就是失败的. 所以,重点在于如何产生一个存在

h5小游戏制作

编译环境 sublime text3 很久以前看了一个“看看你有色”的游戏,学习这个游戏的制作我让学会了框架的服用,游戏逻辑代码,游戏设计代码分离式编程,于是我便根据这个游戏改写了一个寻找包包的游戏,功能设计思路来自12306买票试图,失物寻领中如果失物属于你你需要五次从不同包包中找的你的包方可领取. 修订规则:1:30s内连续找对五次你的包包 2: 不满5次或时间用完则提示你该物品不属于你. 3:寻包次数不得高于5次即停止 游戏在网页上完成通过JQuary框架编写自适应布局 此段为游戏修改规则

前端小游戏

1.前端基础知识过关的游戏,挺有意思.游戏链接 (出处) 2.2048.链接(出处) 3.抽奖.链接(出处) 4.贪吃蛇.链接(出处) 原文地址:https://www.cnblogs.com/xingguozhiming/p/11806041.html

半期考html5小游戏制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

一堆小游戏制作的总结

1.鼠标点击移动 public NavMeshAgent agent; public Animator anim; // Update is called once per frame void Update () { if (Input.GetMouseButtonDown(0)) { Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit hit; if(Physics.Raycast(ray, out