打砖块小游戏

最新推荐文章于 2023-02-20 19:03:00 发布

前端小白LL

最新推荐文章于 2023-02-20 19:03:00 发布

阅读量260

点赞数

分类专栏： js小游戏文章标签： js css html

本文链接：https://blog.csdn.net/weixin_49813550/article/details/115582685

版权

js小游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

打砖块

这是用原生js来写的一个打砖块小游戏，平时太闲了，没事就写了一个小游戏。感兴趣的小伙伴可以直接复制到自己电脑上玩一下

这里有一个浏览器兼容问题，在谷歌浏览器上结束的时候点击确定不能够重新开始，在火狐浏览器上是没有问题的。

下面直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #slider {
            width: 600px;
            height: 600px;
            border: 1px solid #000000;
            margin: 50px auto;
            position: relative;
        }

        #ball {
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            position: absolute;
            bottom: 30px;
            left: 290px;

        }

        #hk {
            width: 100px;
            height: 30px;
            position: absolute;
            background: blue;
            bottom: 0;
            left: 250px;
        }

        #brik div {
            width: 98px;
            height: 18px;
            border: 1px solid #000000;
            float: left;
        }
    </style>
</head>

<body>
    <div id="slider">
        <div id="ball"></div>
        <div id="hk"></div>
        <div id="brik">
            <!-- <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div> -->
        </div>

    </div>

    <script>

        var oSlider = document.getElementById("slider");
        var oBall = document.getElementById("ball");
        var speedX = parseInt(Math.random() * 4) + 3;
        var speedY = -(parseInt(Math.random() * 3) + 5);
        setInterval(function () {

            oBall.style.left = oBall.offsetLeft + speedX + "px";
            oBall.style.top = oBall.offsetTop + speedY + "px";
            if (oBall.offsetLeft >= 580 || oBall.offsetLeft <= 0) {
                speedX *= -1;
            }
            if (oBall.offsetTop <= 0) {
                speedY *= -1;
            }
            if (oBall.offsetTop >= 580) {
                alert("GAME OVER");
                window.location.reload();
            }
            //测试小球和拍子的碰撞
            if (knoke(oBall, oHk)) {
                speedY *= -1;
            }
            //测试小球和砖块的碰撞
            for (var i = 0; i < oBriks.length; i++) {
                if (knoke(oBriks[i], oBall)) {
                    speedY *= -1;
                    oBrik.removeChild(oBriks[i]);
                    break;
                }
            }
        }, 20)

        var oHk = document.getElementById("hk");
        oHk.onmousedown = function (e) {
            // console.log("a")
            var evt = e || event;
            var offsetX = e.clientX - oHk.offsetLeft;
            document.onmousemove = function (e) {
                var evt = e || event;
                var l = e.clientX - offsetX;
                if (l <= 0) {
                    l = 0;
                }
                if (l >= 500) {
                    l = 500
                }
                oHk.style.left = l + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }

        var oBrik = document.getElementById("brik");
        for (var i = 0; i < 60; i++) {
            var node = document.createElement("div");
            oBrik.appendChild(node);
            var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")"
            node.style.background = str;
        }
        //文档流转换定位
        var oBrik = document.getElementById("brik");
            var oBriks = oBrik.children;
            for (var i = 0; i < oBriks.length; i++) {
                oBriks[i].style.left = oBriks[i].offsetLeft + "px";
                oBriks[i].style.top = oBriks[i].offsetTop + "px";
            }
            for (var i = 0; i < oBriks.length; i++) {
                oBriks[i].style.position = "absolute";

            }






            //碰撞检测的封装
        function knoke(node1, node2) {
            l1 = node1.offsetLeft;
            r1 = node1.offsetLeft + node1.offsetWidth;
            t1 = node1.offsetTop;
            b1 = node1.offsetTop + node1.offsetHeight;

            l2 = node2.offsetLeft;
            r2 = node2.offsetLeft + node2.offsetWidth;
            t2 = node2.offsetTop;
            b2 = node2.offsetTop + node2.offsetHeight;

            if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
                return false;
            } else {
                return true;
            }
        }
    </script>
</body>

</html>