javascript - js跑酷游戏，如何让球在按下空格不松开的情况下也要落下来。
本文介绍了javascript - 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>解决方案
谢邀。
这个问题实际上问的是如何在长按一个按键的时候只触发一次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//松开的时候修改状态
}
}这篇关于javascript - js跑酷游戏，如何让球在按下空格不松开的情况下也要落下来。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
