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

hughyuan
  • 254
<!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>
回复
阅读 1.7k
2 个回答
✓ 已被采纳

谢邀。
这个问题实际上问的是如何在长按一个按键的时候只触发一次keydown事件
处理方法:添加一个状态位变量,判断是否当前是否已经处于按下的状态。也就是在你的代码中做如下修改:

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//松开的时候修改状态
    }
}

function keydownHandler(e){

clearTimeout;

}
//空格键松开时ball掉下
function keyupHandler(e){

if(e.keyCode==32){
    ballY-=dy;
    setTimeout(
    function(){
        ballY+=dy;
         },300);
}

}

宣传栏