游戏截图:

小游戏-别踩白块儿

 

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>
View Code

相关文章: