H5游戏见缝插针开发
中秋节马上就要来临,公司开发了一个h5小游戏叉月饼,其实就是游戏“见缝插针”的翻版。这个游戏的开发任务落到了我的头上。。。
一 游戏介绍
游戏场景基本如下所示:
二 所用工具
这次的开发还是用的公司原有的一些框架,其中包括处理图片预加载、处理音效的等,其中包含了creatJS的一些内容,暂时还没有研究。有时间要研究一下。
所用框架如下:
<script type="text/javascript" src="../Public/js/setviewport.js"></script>
<script type="text/javascript" src="../Public/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="../Public/js/WeixinApi.js"></script>
<script type="text/javascript" src="../Public/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../Public/js/hammer.min.js"></script>
<script type="text/javascript" src="../Public/js/TweenMax.min.js"></script>
<script type="text/javascript" src="../Public/js/preloadjs-0.6.0.min.js"></script>
<script src="http://cdn.gbtags.com/EaselJS/0.7.1/easeljs.min.js"></script>
<script src="http://cdn.gbtags.com/PreloadJS/0.4.1/preloadjs.min.js"></script>
<script src="http://cdn.gbtags.com/SoundJS/0.5.2/soundjs.min.js"></script>
<script type="text/javascript" src="../Public/js/main.js"></script>
<script type="text/javascript" src="../Public/js/wScratchPad.min.js"></script>
其实主要用的是JQuery、TweenMAx、preload等。
三 页面布局
游戏的主要画面包括游戏初始页、规则、游戏、过关提示、抽奖、抽奖结果并提交信息、通关提交信息等。因为PSD图中游戏结束提示灯一些页面都是在初始页的基础上加了个半透明的遮罩,所以这些提示都写在了初始页里面,游戏画面是一个单独的快,抽奖是一个单纯的块,抽奖结果是一个单独的块,抽奖结束是一个单独的块,过关提示是一个单独的块。
四 游戏逻辑
首先第一个页面点击按钮查看游戏规则,游戏规则也点击开始游戏开始游戏,简单的点击事件暂且不提。
我们需要初始化一些全局变量用于游戏控制。
var tar = $(".point"); //旋转月饼1
var tar2 = $(".point2"); //旋转月饼2
var arrowIndex = 1; //针数
var rotateNum = 0; //旋转度数
var arrPos = [360]; //已有度数列表
var safeDistance = 8; //安全距离
var score = 0; //得分
var level=1; //关数
var levelmap=[0,2,4,6,8,9,10,11,12,13,14] //难度地图,设置初始针数
如图所示,月饼是旋转的,而在这里我们有两个旋转的月饼。原因是point这个月饼是一个空的div,而月饼图片是他的背景,而当我们把针射上去的时候,采用的方式是在point这个空div里面添加子元素,子元素就是针,而针子元素是相对于point定位的,结果就是针在月饼的上面,这样当然不好看,所以我在point后面加上了一个月饼point2,用它把第一个月饼盖住,两个月饼一起转动,这样针就乖乖的插在了月饼里面。
arrowIndex是表示插得针数,rotateNum是月饼旋转的角度,arrPos是月饼上已经有的针的角度,用于判断插针结果,safeDistance是安全距离,当两根针之间的角度差小于它是,游戏失败,score是得分,level是关数,levelmap是难度地图,用于初始化每关游戏开始时自带针数。
1、倒计时
点击开始游戏按钮时,游戏场景出现,开始倒计时3秒。倒计时的实现是采用setInterval每隔1000ms换一张图片。
function numCount(){
var flag=3;
var timer2=setInterval(function(){
if(flag>1){
flag--;
$('.count img').attr('src','../Public/images/a'+flag+'.png')
}else{
clearInterval(timer2);
can=true;
gameStart();
}
},1000)
}
其中can为点击事件的开关,初始为flase;当can为true时,方可点击。
2、难度设置
游戏刚开始时设置难度,同时每过一关都要重新设置难度,所以需要在这个函数中将arrowIndex重置为1,将arrPos重置为[360],之所以初始为360不为空,是因为0度肯定是存在的,而360等于0度,在计算是否插针成功的时候,没有360将会产生一些错误。
首先获得当前难度,然后根据当前难度在levelmap里面取数,取出的数字即为下一关初始针数,然后用360/针数取整,针旋转相应度数,将这些针循环写入point,同时将这些度数push进数组arrPos,表示已经存在上述度数的针。初始化页面下方球数,在调用这个函数的时候,需要传入一个参数,即每关有多少根针,然后将通过循环将底部小球写入相应div,并附上数字。
3、游戏开始
月饼旋转使用的是setInterval来控制,每隔相应时间月饼转动一度,同时全局变量rotateNum加1,当大于等于360的时候归0,这样月饼的角度一直在0到360之间变化。当发生点击事件的时候,可以通过rotateNum的值获取到当前月饼旋转的角度,然后在point中添加一个元素(针),并使它旋转到一定的角度。由于针是相对于月饼定位的,其top和left都为50%,通过调节margin使他出现在月饼正下方,所以如果月饼不转的话,新添加的针出现在月饼的正下方,此时月饼和针的旋转角度均为0,而当月饼旋转X度之后,针如果不旋转,也将出现在X度的方向,所以针需要旋转Y=360-X度,即让针从0度位置,先跟着月饼旋转到X,在旋转到Y,所以针相对于手机旋转360度等于不旋转,针将出现在月饼的最下方。然后将针旋转的度数Y push进数组arrPos。定义一个新数组,然后使用grep方式用Y减去数组arrPos的每一项,当结果小于安全距离safeDistance的时候,将arrPos的这一项写入新数组,如果新数组的长度大于等于2,说明存在两根针之间的距离小于安全距离,游戏结束。当这次插针成功时,将度数写入数组arrPos,将下方球第一个元素remove,同时分数加1,当分数大于等于10时,过关提示页出现,关数加1,同时初始化难度。当关数大于等于10时,通全关,游戏界面隐藏,清空计时器,出现奖励界面。若游戏失败且过关数大于等于3,游戏界面隐藏,清空计时器,出现抽奖页面。
4、抽奖
点击抽奖按钮,调ajax获取抽奖,若用户没有抽奖资格,转盘转动几圈,然后停在谢谢参与地方,弹窗提示用户,然后刷新页面。
若用户有抽奖资格且中奖,转盘转动,最后根据奖品ID停在相应位置,然后跳出获奖信息,并让用户填写信息。用户信息填写成功并提交后,跳到最后宣传页面。
若用户没有中奖,,转盘转动,最后停在谢谢参与位置,跳出没中奖,用户点击再次挑战重新开始游戏。
5、再次挑战,重新开始游戏
初始化各种全局变量,将页面该隐藏的隐藏,改显示的显示,然后重新调用倒计时函数。
五 遇到的各种BUG
1、iOS端点击延迟、闪屏:
愚蠢的我点击事件随便写了个click,当然是不可以啦,毕竟300ms延迟伤不起呀,怪我怪我~~~
我们是用这种方法封装的点击事件
var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var touchstart = mobile ? "touchstart" : "mousedown";
var touchend = mobile ? "touchend" : "mouseup";
var touchmove = mobile ? "touchmove" : "mousemove";
2、IOS端连续点击屏幕上移
这个问题很严重,快速双击是经常存在的,解决办法如下代码:
function initPreventPageDobuleTap(isPreventPageDobuleTap){
if(isPreventPageDobuleTap){
$('.main').on(touchstart,function(e){
e.preventDefault()
})
}else{
$('.main').off(touchstart);
$('.main').off(touchend);
}
}
意思就是当传入false的时候,把touch事件给解绑,传入true的时候,取消事件的默认动作。但是当有表单页的时候,要关闭阻止事件,否则不能输入文字了,请传入false值,再次运行即可。
即要阻止双击,就传true,取消事件的默认动作,但这样会阻止表单,因为触摸不会触发input,所以要关闭它。
H5游戏见缝插针开发的更多相关文章
- H5游戏定制,4大优势助力企业曝光10W+
H5游戏定制,4大优势助力企业曝光10W+ 移动互联网已成为了人们生活的一部分,普通广告形式已很难吸引用户的眼球,企业要怎样才能将广告更广泛的传播给更多用户呢?根据TOM游戏多年从业经验,为大家分享以 ...
- 今天我看了一个H5游戏EUI的例子,我都快分不清我到底是在用什么语言编译了代码了,作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识
今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...
- 最近这两天看了关于H5游戏开发的一个教程,实践很短暂,看了很多理论的东西,现在呢也只是想回忆回忆关于EUI的部分知识吧
首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),E ...
- H5游戏开发之抓住小恐龙
第一次写技术性博文,以前都只是写一些生活感想,记录一些生活发生的事情. 博主大三学生一枚,目前学习JS一年多,还处于学习阶段,有什么说的不好的希望大牛指点下,由于第一次写博文,排版什么的有待改进,希望 ...
- 开发H5游戏引擎的选择:Egret或Laya?
开发H5游戏引擎的选择:Egret或Laya? 一.总结 一句话总结:选laya吧 二.开发H5游戏引擎的选择:Egret或Laya? 一.H5游戏开发的引擎介绍 开发H5游戏的引擎有很多,比如egr ...
- 使用Phaser开发你的第一个H5游戏(一)
本文来自网易云社区 作者:王鸽 不知你是否还记得当年风靡一时的2048这个游戏,一个简单而又不简单的游戏,总会让你在空闲时间玩上一会儿. 在这篇文章里,我们将使用开源的H5框架--Phaser来重现这 ...
- 关于h5游戏开发,你想了解的一切都在这儿!
2020年,受疫情影响,线下产业红利褪去,线上迎来的新一轮的高峰.众多商家纷纷抓住了转型时机,开启了流量争夺战.H5游戏定制无疑是今年引流的大热门.如何开发一款有趣.有爆点.用户爱买单的好游戏呢? ...
- 为什么选择H5游戏开发定制?
为什么选择H5游戏开发定制? 随着微信H5游戏推广带来的显著效果,越来越多的商家已经加入到游戏营销的队伍中来, 对H5小游戏有了解的商家都知道,[模板游戏]的价格往往低于[定制游戏]的价格,可是为什么 ...
- 如何选择 H5 游戏引擎
原生手游市场已是红海,腾讯.网易等寡头独霸天下,H5游戏市场或将成为下一个风口.据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折.如何选择适合团队和项目的引擎,笔者通过学习和项目实 ...
随机推荐
- [UWP]了解模板化控件(2):模仿ContentControl
ContentControl是最简单的TemplatedControl,而且它在UWP出场频率很高.ContentControl和Panel是VisualTree的基础,可以说几乎所有VisualTr ...
- centos6.5安装配置supervisor
1.下载并安装supervisor https://pypi.python.org/pypi/supervisor/3.2.0 .tar.gz cd supervisor- python setup. ...
- underscore.js,jquery.js源码阅读
(function() { // Baseline setup // -------------- // Establish the root object, `window` in the brow ...
- 南京.NET线下活动后续—一对一技术交流
4月1日星期六,发生了几件大事: 1.网民与老板花式斗图,庆祝愚人节. 2.国务院设立雄安新区,定为千年大计 3.纳龙科技的程序猿赴镇江斯诺物联科技进行一对一技术交流. 此次一对一交流活动是3月11日 ...
- 达到工业使用质量级别的类似于QQ截屏的软件
到网上查找截屏发现基本都是一些小孩子的初级玩意,功能强大一点的又没有源代码所以自己花了三四天时间写了一个能达到工业使用质量级别的截图控件. 优点:1.代码量小只有1500行代码 2.结构清晰简单极易于 ...
- Linux之环境变量
1. 变量的显示与设置 显示变量 echo \(PATH</font></code><br/> 取消变量 <code><font color=&q ...
- 实现五种分组加密模式ECB,CBC,CFB,OFB,CTR
没什么好说的,简单无脑! #include<iostream>using namespace std; int ECB(){ int duan[4]; int messageLen = 1 ...
- DOM 待编辑
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 事件驱动的Python实现
EventManager事件管理类实现,大概就百来行代码左右.如果有不了事件驱动的工作原理的可以看前一篇<事件驱动的简明讲解> # encoding: UTF-8 # 系统模块 from ...
- CentOS 下PHP的卸载
一.卸载1.使用命令 rpm -qa|grep 列出需要卸载的软件包rpm -qa|grep php使用rpm -e 加包名rpm -e php-4.3.9-3.15 二.安装1.首先更新系统yum ...