Fork me on GitHub

小游戏--别踩白块

有图有真相，先上图再说

照旧贴出代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>别踩白块</title>
    <style type="text/css">
    html,
    body {
        height: 100%;
        font-size: 62.5%;
    }
    
    body,
    div,
    ul,
    li {
        padding: 0;
        margin: 0;
    }
    
    section {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    #container {
        position: absolute;
        top: -276px;
        padding: 0 20px;
        width: 100%;
        height: 1460px;
        background: #eee;
    }
    
    .row {
        margin-top: 30px;
        overflow: hidden;
        list-style: none;
        display: flex;
    }
    
    .col {
        flex: 1;
        margin-right: 3%;
        margin-bottom: 5px;
        height: 20rem;
        border-radius: 5px;
        border: 1px solid gray;
        box-shadow: 5px 5px 5px gray;
        background: #fff;
    }
    
    .col:last-child {
        margin: 0 5px 5px 0;
    }
    
    footer {
        position: fixed;
        bottom: 0;
        height: 28%;
        width: 100%;
        text-align: center;
        font: bold 5rem/100px "microsoft yahei";
        background: gray;
    }
    
    .action {
        width: 300px;
        height: 100px;
        font-size: inherit;
    }
    
    .black {
        background: #000;
    }
    </style>
</head>

<body>
    <section>
        <div id="container"></div>
    </section>
    <footer>
        <button class="action" onclick="star()">Action</button>
        <div class="level">第<span id="chapter">1</span>关</div>
        <div class="score">您的总分是:<span id="num">0</span></div>
    </footer>
    <script>
    //设置定时器操作句柄
    var clock = null;
    //设置游戏状态 0:游戏进行中 1：游戏暂停 2：游戏失败
    var state = 0;
    //设置游戏速度，默认速度为2
    var speed = 2;
    //根据id获取元素
    function $(id) {
        return document.getElementById(id);
    }
    //创建div
    function createDiv(className) {
        var div = document.createElement("div");
        div.className = className;
        return div;
    }
    //创建row
    function createRow() {
        var con = $("container");
        var row = createDiv("row");
        var classes = createBlank();
        for (var i = 0; i < 4; i++) {
            row.appendChild(createDiv(classes[i]));
        }
        //判断container内是否有子元素
        if (con.firstChild == null) {
            con.appendChild(row);
        } else {
            con.insertBefore(row, con.firstChild)
        }

    }
    //创建随机黑块
    function createBlank() {
        var arr = ['col', 'col', 'col', 'col'];
        var i = Math.floor(Math.random() * 4);
        arr[i] = 'col black';
        return arr;
    }
    //向下滑动动画
    function move() {
        var con = $("container");
        var top = parseInt(window.getComputedStyle(con, null)["top"]);
        if (speed + top > 0) { //如果一步走过头，则强制top等于零
            top = 0;
        } else {
            top += speed;
        }
        con.style.top = top + "px";
        //如果最上的块完全掉下来时top==0，此时需在这行上追加一行
        if (top == 0) {
            createRow();
            con.style.top = "-23rem";
            var rows = con.children;
            if ((rows.length == 5) && (rows[rows.length - 1].pass != 1)) {
                fail();
            } else {
                deleteRow();
            }
        }
    }
    //加速函数
    function accelerate() {
        speed += 2;
        if (speed == 20) {
            alert("饶了我吧，你的电脑太卡了！");
        }
    }
    //删除最后一行
    function deleteRow() {
        var con = $("container");
        con.removeChild(con.lastChild);
    }
    //动画开始
    function star() {
        clock = window.setInterval('move()', 10);
    }
    //点击黑块颜色变白
    $("container").onclick = function(event) {
            judge(event);
        }
    //判断是成功还是失败
    function judge(event) {
        if (state == 2) {
            alert("游戏失败，请重新开始！");
            gameInit();
            return;
        }
        if (event.target.className.indexOf("black") == -1) {
            fail();
        } else {
            event.target.className = "col";
            event.target.parentNode.pass = 1;
            score();
        }
    }
    //游戏失败或结束
    function fail() {
        clearInterval(clock);
        state = 2;
        alert("游戏失败，请重新开始！");
        var con = $("container");
        con.style.top = "-276px";
        gameInit();
    }
    //游戏初始化
    function gameInit() {
        var con = $("container");
        var childNum = con.children.length;
        for (var i = 0; i < childNum; i++) {
            deleteRow();
        }
        init();
        $('num').innerHTML = 0;
        state = 0;
    }
    //页面初始化
    function init() {
        for (var i = 0; i < 4; i++) {
            createRow();
        }
    }
    //计分
    function score() {
        var newScore = parseInt($('num').innerHTML) + 1;
        var newChpater = parseInt($('chapter').innerHTML) + 1
        $('num').innerHTML = newScore;
        if (newScore % 20 == 0) {
            $("chapter").innerHTML = newChpater;
            accelerate();
        }
    }
    init();
    </script>
</body>

</html>

　　玩了几次，感觉还不错！其实早就想做这个游戏了，苦于没思路。现参考网上教程，终于解决了。

希望大家可以试着玩玩，若有BUG，请留言。

posted @ 2015-09-14 23:03  Jesse131  阅读(605)  评论(0)  编辑  收藏  举报