你这里写错了，写区间不能这样写的 100<ballX+radius<100+width 要表示大于什么并且小于什么，应该这样写 ballX+radius > 100 && ballX+radius < 100 + width

javascript - js跑酷游戏代码碰撞检测逻辑错误，球在没到wall里就弹出信息，代码里已表明地点-PHP中文網路問答

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin: 0px;padding: 0px}
        canvas{background: #eee;display: block;margin: 0,auto;}
    </style>
</head>
<body>
<canvas width="800" height="320" id="myCanvas">
    
</canvas>
<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
var width=10
var height=80

var rectX=[100,300,500]

var radius=10
var dx=2
var ballX=10
var ballY=canvas.height-radius
var dy=200


function drawall(){
    for(var a=0;a<10;a++){

    ctx.beginPath();
ctx.rect(rectX[a],canvas.height-height,width,height);
ctx.fillStyle='blue'
ctx.fill();
ctx.closePath();

}

}



function drawBall(){
     ctx.beginPath();
    ctx.arc(ballX,ballY,radius,0,Math.PI*2)
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawall();
    drawBall();

    //此处未成功，一开始就跳出
    if(100<ballX+radius<100+width){
       alert(you loase)
    }
    ballX=ballX+dx

}
document.addEventListener('keydown',keydownHandler,false)
document.addEventListener('keyup',keyupHandler,false)

function keydownHandler(e){
    if(e.keyCode==32){
       ballY-=dy

    }
}

function keyupHandler(e){
    if(e.keyCode==32){
        ballY+=dy;
    }
}

setInterval(draw,10);

</script>

</body>
</html>