节奏大师小游戏制作流程

当我接到这个小游戏的时候，让我在那一瞬间不知所措。但总是要尝试，尝试后你会发现，只要思路理清楚，一步步走下来，效果自然的就实现了起来。

下面简单讲下自己做这个的一个思路。

HTML实现：页面上有4个点击的按钮和4条轨道，4条轨道的倾斜度可通过transform: rotate();样式来实现。

js实现：首先我们定义一个随机落下的物体的一个方法：

1 randoms: function() {
2                 num++;
3                 number = (1 + Math.random() * (4 - 1)).toFixed(0);
4                 var track = $('.track' + number);
5                 var _html = '<div class="target" data-action="' + number + '" id="target' + num + '" ></div>';
6                 track.append(_html);
7                 return num;
8 }

然后自由下落的一个方法，并且到达点击按钮后让他自动清除：

 1 move: function() {
 2                 var idNum = Wrapper.randoms();
 3                 var y = 0; //y轴
 4                 var size = 0; //y轴
 5                 var thisH = $('.btn' + number).offset().top,
 6                     btnH = targetBtn.find('.btn').height() / 2;
 7                 var time = setInterval(function() {
 8                     y += sy;
 9                     size += sizey;
10                     $('#target' + idNum).css({
11                         'top': y + 'px',
12                         'background-size': size + '%'
13                     });
14                     if (y > thisH + btnH) {
15                         var shorT = setTimeout(function() {
16                             $('#target' + idNum).remove();
17                             shorT = null;
18                         }, 200)
19                         clearInterval(time);
20                     }
21                     time = null;
22                 }, 100)
23                 return {
24                     Track: idNum
25                 };
26 }

最后最关键的一步就是，当你点击的时候判断是否物体在按钮处的位置：

 1 events: function() {
 2                 var touchStatus = false,
 3                     u = navigator.userAgent;
 4                 if (u.indexOf('iPhone') > -1 || u.indexOf('iPod') > -1 || u.indexOf('Android') > -1) {
 5                     touchStatus = true;
 6                 }
 7                 var Eventfun = function() {
 8                     var _left = $(this);
 9                     var index = _left.index() + 1;
10                     var subTarget = $('.track' + index).find('.target');
11                     subTarget.each(function(page, elem) {
12                         if ($(elem).offset().top > _left.offset().top - _left.height() / 2 - 30) {
13                             _left.addClass('btnHigh');
14                             $(elem).remove();
15                             $('.track' + index).addClass('trackHigh');
16                             setTimeout(function() {
17                                 _left.removeClass('btnHigh');
18                                 $('.track' + index).removeClass('trackHigh');
19                             }, 100)
20 
21                             scroe++;
22                             $('#score').find('span').html(scroe);
23                         }
24                     })
25                 }
26                 if (touchStatus) {
27                     targetBtn.on('touchstart', '.btn', Eventfun);
28                 } else {
29                     targetBtn.on('click', '.btn', Eventfun);
30                 }
31                 Wrapper.music();
32 }

这是我大概讲的一个思路，可能有些写的不太好，希望大家多多指教。

完整j代码：

(function($) {

    window.onload = function() {
        var gameNum=5;
        var startGame=function(){
            $('.startGame').css(
                'background-image','url(./images/down'+gameNum+'.png)'
            );
            gameNum--;
            if(gameNum == -1){
                $('.startGame').hide();
                Game();
                startGame=null;
            }
            setTimeout(startGame, 1000)
        }
        startGame();    
    }
    var Game = function() {
        var targetBtn = $('#target-btn'), //按钮父类
            speed = 1000, //下落速度
            sy = 10, //y轴速度
            sizey = 4, // 目标降落距离
            number, //目标数
            scroe = 0, //分数
            num = 0, //个数
            startT, //目标出现时间
            Countdown = 10; // 倒计时
        var init = function() {
            var _scroeH = '<div id="score" class="score">分数：<span>' + scroe + '</span></div>',
                _countdowmH = ' <div class="countdown">' + Countdown + '</div>';
            $('.game').append(_scroeH).append(_countdowmH);
        }
        init();
        var Wrapper = {
            randoms: function() {
                num++;
                number = (1 + Math.random() * (4 - 1)).toFixed(0);
                var track = $('.track' + number);
                var _html = '<div class="target" data-action="' + number + '" id="target' + num + '" ></div>';
                track.append(_html);
                return num;
            },
            move: function() {
                var idNum = Wrapper.randoms();
                var y = 0; //y轴
                var size = 0; //y轴
                var thisH = $('.btn' + number).offset().top,
                    btnH = targetBtn.find('.btn').height() / 2;
                var time = setInterval(function() {
                    y += sy;
                    size += sizey;
                    $('#target' + idNum).css({
                        'top': y + 'px',
                        'background-size': size + '%'
                    });
                    if (y > thisH + btnH) {
                        var shorT = setTimeout(function() {
                            $('#target' + idNum).remove();
                            shorT = null;
                        }, 200)
                        clearInterval(time);
                    }
                    time = null;
                }, 100)
                return {
                    Track: idNum
                };
            },
            events: function() {
                var touchStatus = false,
                    u = navigator.userAgent;
                if (u.indexOf('iPhone') > -1 || u.indexOf('iPod') > -1 || u.indexOf('Android') > -1) {
                    touchStatus = true;
                }
                var Eventfun = function() {
                    var _left = $(this);
                    var index = _left.index() + 1;
                    var subTarget = $('.track' + index).find('.target');
                    subTarget.each(function(page, elem) {
                        if ($(elem).offset().top > _left.offset().top - _left.height() / 2 - 30) {
                            _left.addClass('btnHigh');
                            $(elem).remove();
                            $('.track' + index).addClass('trackHigh');
                            setTimeout(function() {
                                _left.removeClass('btnHigh');
                                $('.track' + index).removeClass('trackHigh');
                            }, 100)

                            scroe++;
                            $('#score').find('span').html(scroe);
                        }
                    })
                }
                if (touchStatus) {
                    targetBtn.on('touchstart', '.btn', Eventfun);
                } else {
                    targetBtn.on('click', '.btn', Eventfun);
                }
                Wrapper.music();
            },
            start: function() {
                var lastNum=Wrapper.move();

                if (Countdown == 1) {
                    var _html='<a href="javascript:;" class="close">x</a>'
                                +'<p>哇塞</p>'
                                +'<P>恭喜您</P>'
                                +'<P >获得'+scroe+'分</P>'
                                +'<div class="line" ></div>'
                                +'<p class="tip">提示:请您将本得分页面截图，并发'
                                +'送到“龙湖锦艺城”微信公众号参'
                                +'与排名，我们将在8月29日公布最'
                                +'终排名奖项'
                                +'</p>';
                    setTimeout(function(){
                        $('.msg').html(_html).show();
                        $('.mask').show();
                        $('.msg').on('click', 'a.close', function(event) {
                            $(this).parent().html('').hide();
                            $('.mask').hide();
                            
                        });
                    },5000)
                    Wrapper.start = null;
                }
                setTimeout(Wrapper.start, 1000)
            },
            cuntdown: function() {
                Wrapper.start();
                Wrapper.events();
                var _CountdownT = function() {
                    Countdown--;

                    if (Countdown == -1) {
                        _CountdownT = null;
                    } else {
                        $('.countdown').html(Countdown);
                    }
                    setTimeout(_CountdownT, 1000)
                };
                _CountdownT();
            },
            music: function() {
                var sound = new Howl({
                    urls: ['./绿光.mp3']
                }).play();
            }
        }
        Wrapper.cuntdown();

    }
}(Zepto))