HTML5實戰70行代碼實現《瘋狂搶NIKE》遊戲

今天我來介紹一下HTML5之《瘋狂搶NIKE》遊戲它和《伐木工》遊戲有很多相似之處，主要邏輯代碼，也就50多行，所有的代碼加起來也就100多行，是爲某客戶定製的一款比較完整的商業遊戲，大部分的功能也就只是一下午的時間就能完成。

PC玩法點擊這

手機下方掃描二維碼玩

開始講解之前，打個廣告，歡迎html5遊戲開發愛好者掃描下方二維碼或者搜羣號223466431，加入開發者QQ羣，我們免費提供最快速的開發工具，我們的所有html5遊戲都開源。 

整個遊戲的開發，基於在線H5遊戲開發工具TangIDE，相關開發文檔點擊打開。

遊戲的主要功能介紹：點擊開始纔開始計時，遊戲開始玩。點擊運動系列，在下方寫有運動系列的鞋盒，向運動系列所在的方向移動，鞋盒在整體向下移動；如果下方的文字不是則結束遊戲。點擊生活系列的也一樣，只是運動方向不同；總時間爲30秒，看誰搶到最多的鞋。

程序的實現：生活系列和運動系列的功能基本相同只是運動方向不同，可以用動畫函數實現其運動效果，運動完之後在刪除它；接着在實現鞋盒向下移動，在向下運動之前，隨機複製個鞋盒，然後在整體向下移動，同樣可以用動畫函數實現。

下面開始介紹遊戲製作和程序：

1. 準備工作

瀏覽器打開TangIDE鏈接，右上角有登陸按鈕，選擇QQ登陸。 
瀏覽器推薦谷歌瀏覽器或者獵豹瀏覽器。

2，遊戲開始界面講解

這裏我來講一下這樣設置活動規則底讓它自動填充父控件：我們只需要設置他的寬度屬性和高度屬性讓他填充父控件就可以了；如下圖：

下面來講解一下怎樣設置遊戲規則到底的透明度，通過調節不透明度來，改變明亮，下面是不透明度設置範圍0~1；

設置下圖：

設置好之後：

三，遊戲界面

點擊開始：可以用色塊按鈕,通過調節他的特有屬性來設置色塊。“點擊開始”可以寫在改控件的文本中。

設置如下圖：

把背景顏色改成透明，線條改成白色，按下時顯示高亮白色；

點擊開始的背景也可以用色塊代替，同樣修改他的特有屬性就可以了。設置如下圖： 

把背景顏色調成黑色，文本透明，線條透明；然後通過修改他的透明度就可以得到需要的效果了。

 

四，結束界面

該窗口很多設置都和前兩個講解的窗口差不多可以參考前面兩個窗口。圖片放置比較簡單就不仔細講了。

遊戲主要程序（遊戲界面）：

窗口打開前事件

<pre name="code" class="html">var me = this;
var win = this.getWindow();
win.resetGame();
var SHOE_PICTURE_INDEX = 4;//多少張不同的圖片

win.init = function(){
    win.countDown = 30;
    win.find("鞋臺/倒計時底/倒計時").setValue("00:"+win.countDown);
    win.score  = 0;
    win.arrayShoe = Array();
    win.find("鞋").setPosition(-300,-300);
    win.pointClickFlag = true;
    win.startGame = false;
};
//複製鞋
win.shoeDup = function(){
    var shoe = win.dupChild("鞋"); 
    var pictureIndex = Math.floor(Math.random()*SHOE_PICTURE_INDEX);
    shoe.pictureIndex = pictureIndex;
    shoe.setImageSrc(pictureIndex);
    return shoe;
};
//疊放鞋
win.shoeStackedInit = function(number){
    if(number <= 0){
        return;
    }
    var table = win.find("鞋臺");
    for(var i = 0; i < number;i++){
        var shoe = win.shoeDup();
        win.arrayShoe.push(shoe);
        shoe.setPosition((win.w >> 1) - (shoe.w >> 1), table.y - (i * shoe.h * 7 / 8 + shoe.h));
    }
    var index = win.arrayShoe[number-1].getZIndex();
    win.find("開始底").setZIndex(index);
};
//先複製鞋,在鞋向下運動
win.shoeMoveDown = function(){
    if(win.arrayShoe.length === 0){
        return;
    }
    var table = win.find("鞋臺");

    var shoe = win.shoeDup();
    win.arrayShoe.push(shoe);
    
    var arrayLength = win.arrayShoe.length;
    shoe.setPosition((win.w >> 1) - (shoe.w >> 1), table.y - (arrayLength * shoe.h * 7 / 8 + shoe.h));
    for(var i = 0; i < arrayLength; i++){ 
        var animateY ={ duration:50, interpolator:'a' };
        animateY.yEnd = win.arrayShoe[i].y + win.arrayShoe[i].h * 7 / 8;
        win.arrayShoe[i].animate(animateY);
    }
};
win.init();
win.shoeStackedInit(8);

生活系列和運動系列功能基本相同，只是運動方向不同，所以程序上只需要修改xEnd的大小和方向就可以了；如x做負方向可以是-100，正方向可以是win.h+100；就可以了；

指針按下事件

<pre name="code" class="javascript">if(beforeChild) {
    return;
}
var me = this;
var win = this.getWindow();
var TWO_RANGES = 2;//兩種系列
var arrayLength = win.arrayShoe.length;
for(var i = 0; i < arrayLength; i++){ 
    if(win.arrayShoe[i].animatingInfo) {
        return;
    }
}
var shoe = win.arrayShoe.shift();
if(shoe.pictureIndex % TWO_RANGES  === 1){
    var initData = win.score;
    me.openWindow("結束界面", 
        function (retData) {console.log("window closed.");}, true, initData);
}else{
    var animateX = { duration:100, xEnd:-100, interpolator:'a'}; 
    shoe.animate(animateX,function(){
    win.score++;
    win.find("得分底/ 得分").setValue(win.score);
    shoe.remove();});
    win.shoeMoveDown();
}

還有就是定時器中的定時事件

<pre name="code" class="javascript">var me = this;
var win = this.getWindow();
//設置對象的數值
 if(win.startGame){
    if(win.countDown  < 10){
        win.find("鞋臺/倒計時底/倒計時").setValue("00:0"+win.countDown);
    }else{
        win.find("鞋臺/倒計時底/倒計時").setValue("00:"+win.countDown);
    }
    win.postRedraw();
    if(win.countDown === 0){
        var initData = win.score;
        me.openWindow("結束界面", 
            function (retData) {console.log("window closed.");}, true, initData);
    }
    win.countDown--;
}

編完程序之後可以用代碼在工具查看之間所編的所有代碼；

如果有疑問或者指教，歡迎加羣223466431討論，還可以郵件聯繫，謝謝！