小游戏别踩白块_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

小游戏别踩白块_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:36 AM

有图有真相，先上图再说

照旧贴出代码

<!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，请留言。

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.