欢迎来到天天文库
浏览记录
ID:30834688
大小:55.00 KB
页数:3页
时间:2019-01-03
《教程之案例分析:制作网页游戏》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、HTML5技术教程Z案例分析:制作网页游戏本文档要分析的案例是一个爱消除的网页小游戏,从中可以体会一•些API的用法和使用动画制作网页游戏的方法。(一)游戏规则:1>开始游戏时,手机出现在最上面一行的任意一格;2、开始游戏吋,彩色石头随机从上往下落,填满所有的方框,相同的三个石头不能相邻的排在一列或者一行;3、手机从上移动到最卜-面一行的任意一格,就算胜利,或游戏时间结束,消除的石头数量超过30个也算胜利。(二)、游戏玩法只耍三个相同的石头相邻的排在一列或者一行,他们就会消失,同吋上面的石头往下落,落到消失的石头位置上。游戏动画演示:设计思路:
2、游戏开始首先生成一个8*8=64的石头阵列,会从上到下一次落下。阵列的石头会存放到一个数组中。每个石头都冇相应的类型。对石头对彖添加inputstart、inputend事件监听。实现点击输入和拖动输入。当有有效输入时,交换对应的两个相邻的石头。等待检测时发现是否会形成消掉石头的条件,如果没有则再交换回來。游戏开始后,会在每帧都调用一次runcheck()函数来检测是否冇生成消掉石头的条件。检测的方式是:先按行遍历一•遍数组,看有没有连续超过三个相邻石头的类型是相同的。然后再按列遍历一遍数组,看有没有连续超过三个相邻石头的类型是相同的。如果有,
3、则将相同的石头消除,并生成新的石头,并从上到下依次落下。关键点:1•生成新的石头对•象:Game.createStone=function(typejndex’posY){varj=Math.floor(index/hang);vari=num-hang*j;varinstance=mugeda.createlnstanceOfSymbol('stone'+type);seene.appendChild(instance,null);instanceleft=(kuan*i);instance.top=posY;instance.addEven
4、tListenerC'inputstart",onStart);//监听inputstart事件instance.addEventListener(HinputendnzonClick);//监听inputend事件instance.scene.setSegment「static蔦OOfalse);//静态segmentinstance.scene.setSegment("run",1,10,true);//消失特效的动态segmentinstance.scene.playSegment("static“);returninstance;};函
5、数参数:typeNumber要生成的石头对象的类型,一共有7种不同的石头。indexNumber要住成的石头在数组小的下标。posYNumber生成石头的Y轴坐标,因为要实现新生成的石头依次落下。牛•成的石头添加到数纽中varinstance=Game.createStone(type4j*hang+i),posY);stoneArray.push({obj:instance,type:type,v:vO});2•消除石头从舞台场景屮移除石头对象scene.removeChild(stoneArray[xiaoArray[x].num].obj
6、);stoneArray[xiaoArray[x].num].obj=null;stoneArray[xiaoArray[x].num].type=0;3.生成新的石头对彖vartype=Math.floor(Math.random()*100)%6;varinstance=game.createStone(type,(i-x*hang),posY);stoneArray[i-x*hang].type=type;stoneArray[i・x*hang].obj=instance;总结,通过设计一个简单的小游戏可以更深刻的理解MugedaAPI的
7、用法。冇关游戏的逻辑则因人而异,这里不做具体讨论,建议是做的过程先易后难,先做最简单的游戏充分熟悉了API的用法后再制作稍微复杂的游戏。下一节我们将要做案例分析:制作移动教育课件。文档来源:Mugeda官网帮助中心
此文档下载收益归作者所有