js原生打砖块

最新推荐文章于 2022-02-27 20:18:43 发布

赤妖碟

最新推荐文章于 2022-02-27 20:18:43 发布

阅读量392

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/ayangdaye/article/details/122203762

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            margin: 100px auto;
        }

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

        #bat {
            width: 100px;
            height: 20px;
            background-color: blueviolet;
            position: absolute;
            bottom: 0px;
            left: 200px;
        }

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

<body>
    <div id="div1">
        <div id="ball"></div>
        <div id="bat"></div>
        <div id="brick">
            <!-- <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div> -->
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        var oDiv = document.getElementById("div1");
        var oBall = document.getElementById("ball");
        var oBat = document.getElementById("bat");
        var oBrick = document.getElementById("brick");
        var aBricks = oBrick.getElementsByTagName("div");  //所有的转
        var timer = null;
        dragX(oBat);
        createBrick(60);

        var speadX = parseInt(Math.random() * 4) + 3;  //随机水平速度
        var speadY = parseInt(Math.random() * 3) + 5;  //随机垂直速度 


        timer = setInterval(function () {
            oBall.style.left = oBall.offsetLeft + speadX + 'px';
            oBall.style.top = oBall.offsetTop + speadY + 'px';
            if (oBall.offsetLeft >= 580 || oBall.offsetLeft <= 0) {
                speadX *= -1;
            }
            if (oBall.offsetTop <= 0) {
                speadY *= -1;
            }
            if (oBall.offsetTop >= 580) {
                alert("游戏结束");
                window.location.reload();  //刷新页面
                clearInterval(timer);
            }
            /*
          进行碰撞检测
            */
            //小球跟牌子的碰撞
            if (konck(oBall, oBat)) {
                speadY *= -1;
            }
            //小球和砖块发生碰撞
            for (var i = 0; i < aBricks.length; i++) {
                if (konck(aBricks[i], oBall)) {
                    speadY *= -1;
                    // 碰到砖块弹回来，砖块备删除
                    oBrick.removeChild(aBricks[i]);
                    break;
                }
            }

        }, 30)

    }


    function dragX(node) {
        node.onmousedown = function (ev) {
            var e = ev || window.event;
            var offsetX = e.clientX - node.offsetLeft;

            document.onmousemove = function (ev) {
                var e = ev || window.event;
                var l = e.clientX - offsetX;
                //限制出界
                if (l <= 0) {
                    l = 0;
                }
                if (l >= 500) {
                    l = 500;
                }
                node.style.left = l + 'px';

            }
        }
        //取消鼠标拖拽
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }




    //创建砖块

    //  相对定位转换绝对定位  文档流的转换
    function createBrick(n) {
        var oBrick = document.getElementById("brick");
        for (var i = 0; i < n; i++) {
            var node = document.createElement("div");
            node.style.backgroundColor = randomColor();
            oBrick.appendChild(node);
        }
        var aBricks = oBrick.getElementsByTagName("div");
        for (i = 0; i < aBricks.length; i++) {
            aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
            aBricks[i].style.top = aBricks[i].offsetTop + 'px';
        }
        //转定位
        for (var i = 0; i < aBricks.length; i++) {
            aBricks[i].style.position = 'absolute';
        }
    }

    function randomColor() {
        var str = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1 )";
        return str;
    }

    //判断碰撞
    function konck(node1, node2) {
        var l1 = node1.offsetLeft;
        var r1 = node1.offsetLeft + node1.offsetWidth;
        var t1 = node1.offsetTop;
        var b1 = node1.offsetTop + node1.offsetHeight;


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

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



</script>

</html>