前端DOM小游戏----弹砖块

最新推荐文章于 2023-05-27 15:37:22 发布

码农不秃呀

最新推荐文章于 2023-05-27 15:37:22 发布

阅读量346

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126772525

版权

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            height: 100vh;
            background-color: deepskyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 600px;
            height: 360px;
            background-color: white;
            border-radius: 4px;
            position: relative;
        }

        .container div {
            background-color: deepskyblue;
        }

        .container .zhuan {
            position: absolute;
            width: 50px;
            height: 10px;
        }

        .container .ball {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: absolute;
        }

        .container .ban {
            width: 60px;
            height: 8px;
            bottom: 10px;
            left: 270px;
            position: absolute;
        }
    </style>
</head>

<body>
        <div class="container">
                <div id="zhuan">
                       
            <!-- 只有管理权限，没有定位权限 -->
                       
            <!-- <div class="zhuan"></div> -->
                   
        </div>
                <div class="ball"></div>
                <div class="ban"></div>
            </div>
</body>
<script>
    var dContainer = document.querySelector(".container");
    var dBall = document.querySelector(".ball");
    var dBan = document.querySelector(".ban");
    var dZhuan = document.getElementById("zhuan");
    var timer = null;
    var isLeft = false;
    var isRight = false;

    // 添加砖
    function setZhuan() {
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j < 10; j++) {
                var d = document.createElement("div");
                d.className = "zhuan";
                d.style.left = 25 + j * 56 + 'px'

                d.style.top = 30 + i * 15 + 'px';
                dZhuan.appendChild(d);
            }
        }
    }

    // 设置小球
    function setBall() {
        dBall.style.left = dBan.offsetLeft + (dBan.offsetWidth - dBall.offsetWidth) / 2 + 'px';
        dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';
        // console.log(dBall.style.left,dBall.style.top);
        dBall.sx = Math.random() > 0.5 ? rand(3, 8) : -1 * rand(3, 8);
        dBall.sy = -1 * rand(3, 8);
    }

    //小球运动
    function ballMove() {
        dBall.style.left = dBall.offsetLeft + dBall.sx + 'px';
        dBall.style.top = dBall.offsetTop + dBall.sy + 'px';
        if (dBall.offsetLeft <= 0 || dBall.offsetLeft >= 588) {
            dBall.sx *= -1;
        }
        if (dBall.offsetTop <= 0) {
            dBall.sy *= -1;
        }
        if (dBall.offsetTop >= 348) {
            // 停止游戏
            clearInterval(timer);
            // 去掉砖
            dZhuan.innerHTML = "";
            // 重新开始
            start();
        }
    }

    // 挡板 状态
    window.onkeydown = function (e) {
        if (e.keyCode === 37) {
            isLeft = true;
        }
        if (e.keyCode === 39) {
            isRight = true;
        }
    }
    window.onkeyup = function (e) {
        if (e.keyCode === 37) {
            isLeft = false;
        }
        if (e.keyCode === 39) {
            isRight = false;
        }
    }
    function banMove() {
        var left = dBan.offsetLeft;
        if (isLeft) { left -= 12 }
        if (isRight) { left += 12 }
        left = left < 0 ? 0 : left;
        left = left > 540 ? 540 : left;
        dBan.style.left = left + 'px';
    }

    // 碰撞检测
    function check() {
        // 1. ban与ball
        if (isCrash(dBall, dBan)) {
            dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';
            dBall.sy *= -1;
        }
        // 2. ball与zhaun
        var zs = dZhuan.children;
        for (var i = 0; i < zs.length; i++) {
            if (isCrash(zs[i], dBall)) {
                // 小球继续运动
                dBall.sy *= -1;
                // 删除砖  
                dZhuan.removeChild(zs[i]);
                i--;
            }
        }
    }


    // 开始
    function start() {
        setZhuan();
        setBall();
        // 开启定时器
        timer = setInterval(function () {
            // 1. 挡板运动
            banMove();
            // 2. 小球运动
            ballMove();
            // 3. 碰撞检测
            check();

        }, 30)
    }
    start();

    // 随机函数
    function rand(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    // 碰撞检测
    function isCrash(a, b) {
        var l1 = a.offsetLeft;
        var t1 = a.offsetTop;
        var r1 = l1 + a.offsetWidth;
        var b1 = t1 + a.offsetHeight;
        var l2 = b.offsetLeft;
        var t2 = b.offsetTop;
        var r2 = l2 + b.offsetWidth;
        var b2 = t2 + b.offsetHeight;
        if (r2 < l1 || r1 < l2 || b2 < t1 || b1 < t2) {
            return false;
        } else {
            return true;
        }
    }
</script>

效果图