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讨论，还可以邮件联系，谢谢！