首页 > 代码库 > 节奏大师小游戏制作流程
节奏大师小游戏制作流程
当我接到这个小游戏的时候，让我在那一瞬间不知所措。但总是要尝试，尝试后你会发现，只要思路理清楚，一步步走下来，效果自然的就实现了起来。
下面简单讲下自己做这个的一个思路。
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: idNum25 };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代码：
/** * * @authors H君 (262281610@qq.com) * @date 2014-08-14 09:47:50 * @version $Id$ */(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))
节奏大师小游戏制作流程
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。