• 小游戏--别踩白块


    有图有真相,先上图再说

    照旧贴出代码

    <!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 {
             100%;
            height: 100%;
            position: relative;
        }
        
        #container {
            position: absolute;
            top: -276px;
            padding: 0 20px;
             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%;
             100%;
            text-align: center;
            font: bold 5rem/100px "microsoft yahei";
            background: gray;
        }
        
        .action {
             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,请留言。

  • 相关阅读:
    Privacy Policy
    privacy
    将一个无法一次读入内存的大文件排序
    java实现二叉树的非递归遍历
    java静态方法同步问题
    关于java静态方法继承问题
    Android 代码写布局
    Android自定义ImageView实现手势放大图片的控件,无需依赖任何第三方。
    Gradle版本更换问题
    Android的AlertDialog实现圆角边框
  • 原文地址:https://www.cnblogs.com/jesse131/p/4808811.html
Copyright © 2020-2023  润新知