【JavaScript】打砖块

最新推荐文章于 2024-06-09 20:17:27 发布

Acrgi

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量44

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Acrgi/article/details/129474447

版权

<!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 black;
            position: relative;
            margin: 100px auto;
        }
        #ball{
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            bottom: 10px;
            left: 290px;
        }
        #btn{
            width: 70px;
            height: 10px;
            background-color: black;
            position: absolute;
            bottom: 0;
            left: 265px;
        }
        #brick div{
            width: 73px;
            height: 10px;
            border: 1px solid black;
            float: left;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oBall = document.getElementById("ball");
            var oBtn = document.getElementById("btn");
            var oBrick = document.getElementById("brick");
            var oBricks = oBrick.getElementsByTagName("div");

            dragX(oBtn);
            creatBrick(160);
            // 让小球可以水平方向移动，随机一个水平方向的速度
            var speedX = parseInt(Math.random() * 3) + 10;
            //让小球可以垂直方向移动，随机一个垂直方向的速度
            var speedY = -(parseInt(Math.random() * 5) + 10);
            
            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 >= 590){
                    alert("Game Over");
                    window.location.reload();
                }

                //小球和拍的碰撞检测
                if(knock(oBall,oBtn)){
                    speedY *= -1;
                }
                //小球与砖发生碰撞
                for(var i =0; i < oBricks.length; i++){
                    if(knock(oBricks[i],oBall)){
                        //反向移动
                        speedY *= -1;
                        //砖块被删除 
                        oBrick.removeChild(oBricks[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 >= 530){
                        l = 530;
                    }
                    node.style.left = l + 'px';
                }

                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }
        }

        //创建砖块的函数 n的意思是创建n个砖块
        function creatBrick(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 oBricks = oBrick.getElementsByTagName("div");
            for(var i = 0; i <oBricks.length; i++){
                oBricks[i].style.left = oBricks[i].offsetLeft + 'px';
                oBricks[i].style.top = oBricks[i].offsetTop + 'px';
            }
            for(var i = 0; i <oBricks.length; i++){
                oBricks[i].style.position = 'absolute';
            }

        }
        //随机颜色函数
        function randomColor(){
            var str = "rgba(" + parseInt(Math.random() * 256) + ","+ parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
            return str;
        }
        //碰撞函数
        function knock(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>
</head>
<body>
    <div id = 'div1'>
        <div id = 'ball'></div>
        <div id = 'btn'></div>
        <div id = 'brick'></div>
    </div>
</body>
</html>