游戏截图:
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>