游戏截图：
Demo:Demo(建议谷歌打开)
html结构代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>别走白格</title> <style> *{ margin:0;padding:0;} li{ list-style: none;} body,html{ width:100%;height:100%;} .tread-warp{ position: relative; width:100%;height:100%; overflow:hidden; background-color: #ccc; margin:0 auto; } .tread-main{ position:absolute;left:0;bottom:0; width:100%;box-sizing:border-box; } .tread-main .tread-box{position: relative; display: -webkit-box; width:100%; border-top:1px solid #ccc;} .tread-box div{ width:20%;height:500px; background-color: #fff; border-right:1px solid #ccc;box-sizing:border-box;} .tread-box div:last-child(){ border-right:none; } .tread-main div.back{ background-color: #000} .tread-main div.yellow{ background-color: yellow; text-align: center; font-size:5em;} .tread-main div.white{ background-color: white;} </style> <script src="jquery-1.8.3.min.js"></script> <script src="tread.js"></script> <script> $(function(){ var game = new treadBox(); game.init(); }); </script> </head> <body> <div class="tread-warp"> <div class="tread-main"> </div> </div> </body> </html>
tread.js 代码：
function treadBox(){ this.win = $(window); this.treadMain = $('.tread-main'); this.rows = 5; //行数 this.cols = 5; //列数 this.timer = null; //定时器 this.lastDiv = null; // 最后一行 this.queue = []; // 队列 this.minute = 0; // 分数 } //初始化方法 treadBox.prototype.init = function(){ this.setInt(); this.begin(); } //初始化数据 treadBox.prototype.setInt = function(){ var divH = this.getH()/this.rows; this.divH = divH; var html = '<div class="tread-ss">'; for( var i=0;i<this.rows;i++ ){ html += '<div class="tread-box">'; var ranNum = randomNum(0,this.cols-1); for( var j=0;j<this.cols;j++ ){ if( i == this.rows-1 ){ if( j == 2 ){ html += '<div class="yellow begin" style="height:'+ this.divH +'px;line-height:'+ this.divH +'px;">开始</div>'; }else{ html += '<div class="yellow" style="height:'+ this.divH +'px;line-height:'+ this.divH +'px;"></div>'; } }else if( ranNum == j ){ html += '<div class="back" style="height:'+ this.divH +'px"></div>'; }else{ html += '<div class="white" style="height:'+ this.divH +'px"></div>'; } } html += '</div>'; } html += '</div>'; this.treadMain.html(html); this.insertDiv(); } //插入div treadBox.prototype.insertDiv = function(){ var html = '<div class="tread-ss">'; for( var i=0;i<this.rows;i++ ){ html += '<div class="tread-box">'; var ranNum = randomNum(0,this.cols-1); for( var j=0;j<this.cols;j++ ){ if( ranNum == j ){ html += '<div class="back" style="height:'+ this.divH +'px"></div>'; }else{ html += '<div class="white" style="height:'+ this.divH +'px"></div>'; } } html += '</div>'; } html += '</div>'; this.treadMain.prepend(html); this.getQueue(); } //队列 treadBox.prototype.getQueue = function(){ if( this.queue ){ this.queue = []; } var len = $('.back').length; for( var i = 0;i<len;i++ ){ this.queue.push( $('.back').eq(i) ); } this.queue = this.queue.reverse(); } //开始游戏事件 treadBox.prototype.begin = function(){ this.begin = $('.begin'); var that = this; this.begin.on('click',function(){ that.getLastDiv(); that.animate(); that.bindBegin(); }); } //开始游戏事件； treadBox.prototype.bindBegin = function(){ var that = this; //白色方块 点击事件; $('.white').on('click',function(){ clickWhite(); }); //黑色方块 点击事件; clickBack(); function clickBack(){ if( that.queue[0] ){ $(that.queue[0]).on('click',function(){ that.minute++; $(this).removeClass('back').addClass('white'); //取消点击事件 添加"输"事件 (有问题) $(this).off('click'); $(this).on('click',function(){ that.lose(); }); that.queue.shift(); clickBack(); }); } } function clickWhite(){ that.lose(); } } //运动方法 treadBox.prototype.animate = function(){ var n = 0; var that = this; this.timer = setInterval(function(){ n = n+90; //运动 that.treadMain.css({ 'bottom': -n }); //超出屏幕 that.fnExceed(); //黑方框的碰撞检测 that.collision(); },150); } //获取最后一行 treadBox.prototype.getLastDiv = function(){ this.lastDiv = this.treadMain.find('.tread-ss:last-child'); } //超出添加 treadBox.prototype.fnExceed = function(){ var winh = this.getH(); if( parseFloat( this.lastDiv.offset().top ) > winh ){ this.lastDiv.remove(); this.lastDiv = ''; this.getLastDiv(); clearInterval( this.timer ); this.treadMain.css('bottom',0); this.insertDiv(); this.animate(); } } //黑块触碰底部 treadBox.prototype.collision = function(){ var winh = this.getH(); if( this.queue[0] ){ if( parseFloat( $(this.queue[0]).offset().top + $(this.queue[0]).height() ) > winh ){ this.lose(); } } } //输 treadBox.prototype.lose = function(){ clearInterval( this.timer ); alert('你输了!共得' + this.minute + '分'); window.location.href = window.location.href; } //屏幕高 treadBox.prototype.getH = function(){ return this.win.height(); } //屏幕宽 treadBox.prototype.getW = function(){ return this.win.width(); } //随机方法; function randomNum( start,end ){ return parseInt(Math.random()*(end-start+1)+start); }
心得：
起因：屌丝“站”地铁的时候看见美女坐着用手机玩游戏，当自己模拟做了这个游戏。。。。
这次用的是面向对象的方式写的其实本来也可以用单体json写就是好久没写new对象这样的代码就写着玩了。
黑格就是随机0到(列数-1)中某一列在判断是几然后就加class “back”，在第一次创建完了之后会跟着在‘.tread-main’的前头在插入一屏的同样的网格是为了开始游戏的时候运动好上边有数据同时也是为了判断第一屏的“.tread-ss”随着“.tread-main”运动超过手机屏幕的时候remove掉同时插入新的数据“.tread-main”运动清回原来值，在插入的方法里做了队列并反转了数组排序是为了让黑格子永远只能从低往上一个一个的点。队列还有一个用处就是运动的时候判断数组里第一个元素它的offsetTop到window的距离+自身的高 是否大于手机屏幕来判断黑格是否触底，触底调用lose输的方法；
大概思路就是这个，当然 其实插入insertDiv()和setInt()其实是可以合并的，包括为了游戏的可玩性可以 无论是按着得分的累计、游戏时间的累计 是可以做加速的更改或更复杂的障碍物的遮挡这些。。。。