html5游戏开发实战-----大家来找茬
来源:互联网 发布:ubuntu lnmp环境搭建 编辑:程序博客网 时间:2024/05/16 11:01
相信很多人都玩过大家来找茬,美女找茬之类的游戏,其实利用tangide我们也可以轻松开发出我们自己的找茬游戏.
tangide轻松实现了我们开发游戏简单,快捷的梦想,但是,不管是开发哪一类游戏,我们首先需要做的就是程序设计,我们拿到一个游戏的开发,不要一拿到手就马上啪啪啪的写代码,写到中途又不知道怎么去实现其中的功能,或者遇到其他什么问题让自己中断,这样的代码相信bug出现的概率相对要大很多.每当我们拿到一个case,首先我们就应该了解这个case主要实现哪些功能,把整体的框架设计好(当然,这部分很多项目都会有设计方案),然后我们需要了解项目的各项细节,想想哪些细节我们能一看到就可以马上写代码实现它,哪些我们需要花时间去研究才能实现.然后把那些难实现的统统找出来,好好想想怎么实现才是最简洁,效率最高的.当你实现这些功能后,在脑子里整体的跑一遍这一个项目,看看哪里还有不足的地方,加以补充.然后我们才可以开始写代码,磨刀不误砍柴功,相信经过上述的过程,你写起代码来会感觉游刃有余得多.
那么开始制作吧,首先新建一个项目,建开始界面,开始界面很简单,只需要添加两张图片,两个按钮,将音乐控件,音效控件放进去。将需要的音乐和音效分别放进音乐控件和音效控件里。
然后还需要建一个游戏界面和活动界面。
先做活动界面吧,只需要将对话框控件拖进场景里就可以,然后调整对话框的大小,属性,更改图片,添加几个Label控件输入相应的文字,在开始界面的活动规则按钮的点击事件里,打开对话框就可以,然后在对话框的按钮点击事件里关闭窗口,这样活动界面就完成了,而打开和关闭窗口的代码都可以用tangide的代码产生器自动产生。
//播放音效this.playSoundEffect("按钮.mp3", function onDone() {console.log("play finished");});var initData = {};this.openWindow("游戏界面1", function (retData) {console.log("window closed.");}, true, initData);
var retData = {};this.closeWindow(retData);
然后就可以布置游戏界面了。那么游戏界面就需要两张稍微大点的图,然后在图上相应的位置再加入商家的Logo图标,然后一个图片用于放时间,关卡数,还有生命值的数字,数字用三个图片字体,改好大小和字体路径等参数。当然时间需要计时器控件,因为我们有几个相同的场景,所以不需要重复的代码,只需要在一个场景里写成全局的代码就可以了。
var win = this.getWindow();window.CommonProgress = function(win,el){ if(el.name === "提示界面"){ return ; } //错误次数剩余0次跳转 if(win.errorCount === 0){ var initData = {remainTime:win.overTime,HP:win.errorCount}; win.openWindow("结束界面", function (retData) {console.log("window closed.");}, true, initData); } function delay(){ setTimeout(function() {win.find("错误叉叉").setVisible(false);}, 200); } if(el.name.indexOf("uppoint-") === 0 || el.name.indexOf("downpoint-") === 0){ //播放音效 win.playSoundEffect("按对.mp3", function onDone() {console.log("play finished");}); var index = el.name.split("-")[1]; win.find("uppoint-" + index).setOpacity(1); win.find("downpoint-" + index).setOpacity(1); win.rightTimes++; } else if(el.name.indexOf("upimage") === 0 || el.name.indexOf("downimage" === 0)){ //当点错时,剩余犯错机会减1 //播放音效 win.playSoundEffect("按错.mp3", function onDone() {console.log("play finished");}); win.find("错误叉叉").setVisible(true); win.find("错误叉叉").setPosition(point.x - 15,point.y - 15); win.errorCount--; win.find("时间底纹图/生命值").setValue(win.errorCount); delay(); }};window.CommonProgress(this.getWindow(),this.targetShape);//点对5次跳转页面if(win.rightTimes === 5){ var initData = {remainTime:win.overTime, HP:win.errorCount}; win.openWindow("游戏界面2", function (retData) {console.log("window closed.");}, true, initData);}
这里我在不同的地方采用的是直接放一张图片在那里隐藏,当点击的时候才会显示出来,点对了显示一个圈,点错了显示一个叉。这样就表示找到了正确的位置,而当点击其他的地方的时候表示点击错误,总共有五次错误的机会。然后在其他相同的场景里调用这个函数就可以了。
然后在计时器控件里的定时器事件中添加一些代码用于时间的控制。
var win = this.getWindow();win.overTime--;var timer = win.find("时间底纹图/时间");win.times--;var min = Math.floor(win.times / 60);var sec = win.times % 60;var minStr = (min >= 10 ? min : '0' + min);var secStr = (sec >= 10 ? sec : '0' + sec);timer.setValue(minStr + ":" + secStr);if(win.overTime <= 10){ //播放音效 this.playSoundEffect("最后10秒倒计时.mp3", function onDone() {console.log("play finished");}); }if(win.overTime === 0){ var initData = {remainTime:win.overTime,HP:win.errorCount}; this.openWindow("结束界面", function (retData) {console.log("window closed.");}, true, initData);}当然,相应的变量需要在窗口打开前声明或者定义。这样我的游戏已经成功了大半了,然后进入结束界面的编辑,结束界面很简单,我们玩游戏结束后会有一个相应的称号,这个用图片可以做,然后用时不同会获得相应的星星,这些都可以用图片做,因为要给星星一个运动的效果,所以我使用了动画,
tangide----html5游戏开发神器,让你轻松开发,快乐编程。如有疑问可以添加我们的技术交流群(223466431),欢迎共同学习,共同进步。
- html5游戏开发实战-----大家来找茬
- gtk+ 游戏 “大家来找茬“
- QQ游戏-大家来找茬 外挂
- QQ大厅游戏 大家来找茬辅助
- 大家来找茬
- 大家来找茬
- 大家来找茬
- 【智力题】大家来找茬!
- 大家来找茬游戏助手、外挂的实现
- 大家来找茬:谁降低了游戏研发的品质
- 大家来找茬辅助工具实现
- 秒杀“大家来找茬”
- AOJ.602 大家来找茬
- HTML5游戏开发实战
- 联众大家来找茬外挂(联众找茬外挂) 官网
- “大家来找茬”自制查找程序
- 大家来找茬辅助工具超级简易版
- 大家来找茬的部分代码
- (Java)请求方式之GET、POST 浅析
- 【JavaWeb】(3)JavaBean
- oc studio
- 并行编程架构(指令流水、进程、线程、多核,Pipe and Filter)
- Popupwindow 属性设置
- html5游戏开发实战-----大家来找茬
- thinkphp 安全整理
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
- Centos7安装Mysql
- imx6 WatchDog驱动程序及测试例程
- C++实现循环队列之顺序存储
- Hyper-V 高可用性 (创建及配置Hyper-V群集)
- JS高级程序设计 读书笔记(1)
- jvm运行时的数据区域