html5游戏开发实战-----大家来找茬

    

      相信很多人都玩过大家来找茬,美女找茬之类的游戏,其实利用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);
}

当然，相应的变量需要在窗口打开前声明或者定义。 这样我的游戏已经成功了大半了，然后进入结束界面的编辑，结束界面很简单，我们玩游戏结束后会有一个相应的称号，这个用图片可以做，然后用时不同会获得相应的星星，这些都可以用图片做，因为要给星星一个运动的效果，所以我使用了动画，

点击小人位置就可以对动画进行相应的设置。在窗口打开前事件里判断一下用时多少设置等级称号，然后还可以添加多几个相应的场景，这样游戏基本玩成了，剩下的就是一些细节慢慢调整一下就可以了。怎么样，是不是很简单？那么来show一下成果。 点击打开链接。

       tangide----html5游戏开发神器，让你轻松开发，快乐编程。如有疑问可以添加我们的技术交流群（223466431），欢迎共同学习，共同进步。