小球碰撞反弹游戏（并不完善）-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .main {
            width: 400px;
            height: 610px;
            /*border: 1px solid black;*/
            background: #ccc;
            position: relative;
        }

        .wrap {
            position: absolute;
            font-size: 2rem;
            right: 10px;
            top: 10px;
            color: blueviolet;
            z-index: 22;
            width: 150px;
            text-shadow: 3px 3px 5px darkslategray;
        }

        .box1 {
            position: absolute;
            bottom: 0px;
            width: 100px;
            height: 10px;
            background: black;
        }

        .box2 {
            position: absolute;
            width: 50px;
            height: 50px;
            background: red;
        }

        .zz {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0px;
            top: 0px;
            text-align: center;
            display: none;
        }

        .restart {
            width: 300px;
            background: #f00;
            font-size: 3rem;
            box-shadow: 3px 3px 5px brown;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            margin: auto;
            cursor: pointer;
        }

        .text1 {
            font-size: 2rem;
            color: white;
            margin-top: 100px;
            padding: 50px 0px;
            text-shadow: 3px 3px 5px royalblue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="wrap">得分：0</div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="zz">
            <div class="text1">Game Over ! !</div>
            <div class="restart">重新开始</div>
        </div>
    </div>
    <script type="text/javascript">
        var main = document.querySelector(".main");
        var wrap = document.querySelector(".wrap");
        //木板
        var box1 = document.querySelector(".box1");
        //小方块
        var box2 = document.querySelector(".box2");
        //小方块落地时弹出
        var zz = document.querySelector(".zz");
        var text1 = document.querySelector(".text1");
        var restart = document.querySelector(".restart");
        //在“重新开始”上绑定点击事件
        restart.onclick = jj;
        //小方块的移动量
        var disL = 60;
        var disa = main.offsetWidth - box1.offsetWidth;
        var disb = main.offsetHeight - box1.offsetHeight;
        //绑定键盘事件  按下键盘上的任意键时触发
        document.onkeydown = jfy;

        function jfy() {
            var event = window.event;
            switch(event.keyCode) {
                //键盘左键
                case 37:
                    if(box1.offsetLeft > 0) {
                        //木板向左移动
                        box1.style.left = box1.offsetLeft - disL + "px";
                    }
                    break;
                    //键盘上键
                case 38:
                    if(box1.offsetTop > 0) {
                        box1.style.top = box1.offsetTop - disL + "px";
                    }
                    break;
                    //键盘右键
                case 39:
                    if(box1.offsetLeft + disL <= disa) {
                        box1.style.left = box1.offsetLeft + disL + "px";
                    }
                    break;
                    //键盘下键
                case 40:
                    if(box1.offsetTop + disL <= disb) {
                        box1.style.top = box1.offsetTop + disL + "px";
                    }
                    break;
            }
        }
        var a = main.offsetHeight - box2.offsetHeight;
        var b = main.offsetWidth - box2.offsetWidth;
        var top_ = 0;
        //上下移动速度
        var i = 2;
        var left_ = 0;
        //左右移动速度
        var j = 1;
        var flag = 0;
        //定时器
        timer = setInterval(jfj, 10);
        //小方块的碰壁反弹
        function jfj() {
            top_ += i;
            left_ += j;
            //上碰壁
            if(top_ <= 0) {
                i = -i;
            }
            //小方块落地停下
            if(top_ >= a) {
                i = 0;
                j = 0;
                zz.style.display = "block";
                //清定时器
                clearInterval(timer);
                document.onkeydown = null;
            }
            //与木板相遇反弹
            if(top_ + box2.offsetHeight == box1.offsetTop && (left_ < box1.offsetLeft + box1.offsetWidth) && (left_ + box2.offsetWidth > box1.offsetLeft)) {
                i = -i;
                flag++;
                wrap.innerHTML = "得分：" + flag;
            }
            //左右碰壁
            if(left_ >= b  left_ <= 0) {
                j = -j;
            }
            box2.style.top = top_ + "px";
            box2.style.left = left_ + "px";
        }
        //小方块落地后，弹出“重新开始”，所有数据还原
        function jj() {
            flag = 0;
            wrap.innerHTML = "得分：" + flag;
            zz.style.display = "none";
            box1.style.left = "0px";
            box1.style.top = disb + "px";
            box2.style.top = "0px";
            box2.style.left = "0px";
            document.onkeydown = jfy;

            i = 2;
            j = 1;
            top_ = 0;
            left_ = 0;
            timer = setInterval(jfj, 10);
            jfj();
        }
    </script>
</body>
</html>