键盘事件和鼠标事件应用：弹砖块

最新推荐文章于 2024-04-12 22:35:54 发布

憨憨励志学前端

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量105

点赞数

分类专栏：事件文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_52589346/article/details/125105827

版权

事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
        * {
            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: skyblue;
        }

        .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';
        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(){
        if(isCrash(dBall,dBan)){
            dBall.style.top=dBan.offsetTop - dBall.offsetHeight + 'px';
            dBall.sy*=-1;
        }
        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() {
        setBall();
        setZhuan();
        timer = setInterval(function () {
            banMove();
            ballMove();
            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>

</html>