相信很多人都玩过大家来找茬,美女找茬之类的游戏,其实利用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),欢迎共同学习,共同进步。