千峰js 碰撞

2021-04-18 20:34:09 作者：互联网
<!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>
        #box {width: 600px;height: 600px;border: 1px solid;margin: 10px auto;position: relative;}
        #ball {width: 20px;height: 20px;border-radius: 50%;background-color: red;position: absolute;left: 280px;bottom: 30px;}
        #flap {width: 120px;height: 30px;background-color: cadetblue;position: absolute;bottom: 0;left: 250px;}
        #block div {width: 118px;height: 20px;border: 1px solid;float: left;}
    </style>
    <script>
        window.onload = function(){
            var ball = document.getElementById('ball');
            var flap = document.getElementById('flap');
            var speedX = parseInt(Math.random()*4)+3;
            var speedY = parseInt(Math.random()*5)+3;
            setInterval(function(){
                //ball and blocks
                
                if(ball.offsetTop<0){
                    speedY *= -1;
                }
                if(ball.offsetTop>580){
                    window.location.reload();
                    // alert('gameover');
                }
                if(ball.offsetLeft<0||ball.offsetLeft>580){
                    speedX *= -1;
                }
                var blocks = block.getElementsByTagName('div');
                for(var a=0;a<blocks.length;a++){
                    if(crash(ball,blocks[a])){
                        block.removeChild(blocks[a]);
                        speedY *= -1;
                    }
                }
                if(crash(ball,flap)){
                    speedY *= -1;
                }
                //创建固定位置
                for(var a=0;a<blocks.length;a++){
                    blocks[a].style.left = blocks[a].offsetLeft+'px';
                    blocks[a].style.top = blocks[a].offsetTop+'px';
                }
                for(var a=0;a<blocks.length;a++){
                    blocks[a].style.position = 'absolute';
                }
                ball.style.left = ball.offsetLeft +speedX +'px'; 
                ball.style.top = ball.offsetTop +speedY +'px'; 
            },50);
            /* 鼠标滑动
            flap.onmousedown = Move;
            document.onmouseup = function(){
                document.onmousemove = null;
            } */
            // 按键
            var speed = null;
            document.onkeydown = function(ev){
                console.log(ev.keyCode);
                if(ev.keyCode == 39){
                    speed = 25;
                    flap.style.left = flap.offsetLeft +speed+'px';
                }
                if(ev.keyCode == 37){
                    speed = -25;
                    flap.style.left = flap.offsetLeft +speed+'px';
                }
            }
            //创建砖块 
            createDiv(60);
            //判定碰撞 
        }
        //flap Move
        function Move(ev){
            var box = document.getElementById('box');
            var offsetX = ev.clientX - flap.offsetLeft ;
            document.onmousemove = function(ev){
                var l = ev.clientX - offsetX;
                if(l<0){
                    l = 0;
                }
                if(l>480){
                    l = 480;
                }
                flap.style.left = l+'px';
            }
        }
        function createDiv(n){
            for(var a=0;a<n;a++){
                var div = document.createElement('div');
                div.style.backgroundColor = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
                block.appendChild(div);
            }
        }
        function crash(obj1,obj2){
            var l1 = obj1.offsetLeft;
            var r1 = obj1.offsetLeft +obj1.offsetWidth;
            var t1 = obj1.offsetTop;
            var b1 = obj1.offsetTop + obj1.offsetHeight;
            var l2 = obj2.offsetLeft;
            var r2 = obj2.offsetLeft +obj2.offsetWidth;
            var t2 = obj2.offsetTop;
            var b2 = obj2.offsetTop + obj2.offsetHeight;
            if(l1>r2||r1<l2||t1>b2||b1<t2){
                // l1>r2||l2>r1||t1>b2||b1<t2
                return false;
            }else{
                return true;
            }
        }
    </script>
</head>
<body style="background-color: burlywood;">
    <div id="box">
        <div id="block">
        </div>
        <div id="ball"></div>
        <div id="flap"></div>
    </div>
</body>
</html>
View Code
碰撞就是两个物体之间上下左右不能右接触
标签：ball,flap,碰撞,js,height,width,var,千峰,left
来源： https://www.cnblogs.com/inkser/p/14674489.html