js跑酷游戏，如何让球在按下空格不松开的情况下也要落下来。

<!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();

    //球与wall的碰撞检测
    if(ballX+radius > 100 && ballX+radius < 100 + width && ballY>canvas.height-80){
      /* alert('you lose');
       window.location.reload();*/
    }
    ballX=ballX+dx

}
document.addEventListener('keydown',keydownHandler,false)
document.addEventListener('keyup',keyupHandler,false)
//空格键按下时ball跳起,现在的问题是如果我不松开空格，球会一直跳出画布外，即使我设置与画布上边界的碰撞也不符合需求，我要的是只跳一下
function keydownHandler(e){
    if(e.keyCode==32){
       ballY-=dy

    }
}
//空格键松开时ball掉下
function keyupHandler(e){
    if(e.keyCode==32){
        ballY+=dy;
    }
}

setInterval(draw,10);

</script>

</body>
</html>

阅读 2.2k

var keyDownFlag = 0;//定义一个全局变量，该变量表示是否已经按下 function keydownHandler(e){ if(e.keyCode==32&&keyDownFlag==0){//判断条件增加当前是否已经按下(是否处于长按) ballY-=dy keyDownFlag =1 //按下的时候修改状态 } } //空格键松开时ball掉下 function keyupHandler(e){ if(e.keyCode==32){ ballY+=dy; keyDownFlag =0//松开的时候修改状态 } }

js跑酷游戏，如何让球在按下空格不松开的情况下也要落下来。

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

快开发完的Vue3项目要做SEO该如何处理？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？