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），歡迎共同學習，共同進步。