HTML 5 画布按键按下时间事件

HTML 5 canvas key press time events

本文关键字：时间事件布按键 HTML 更新时间：2023-09-26

我正在研究HTML 5中的Stick Hero（著名的Android游戏）克隆，我正在尝试实现Javascript中捕获time of key press (right arrow - ASCII 39)的代码并相应地增长棍子。

<!doctype html>
<html>
<head>
    <title> Stuck Hero !</title>
    <script src='jquery-2.1.1.min.js'> </script>
</head>
<body>
    <canvas id='stuck' height='300' width='500'> </canvas>
</body>
<script>
        var stick_size=10;
    $(document).ready(function(){
        var canvas=$("#stuck")[0];
        var ctx=canvas.getContext('2d');
        var w=$("#stuck").width();
        var h=$("#stuck").height();
        var score=0;
        var stick=0;
        var timeout=0;
        console.log(w +" is width and "+h+" is the height ");
        paint(w,h,ctx);
        score_update(ctx);
        });

    function score_update(ctx){
        //function to print the score
        ctx.font = "20px Arial";
        ctx.strokeText("Your Score is :",1,300);
        console.log("Console Score Printed Successfully");
    }

    function paint(width,height,ctl) {
        var rand = Math.floor(Math.random() * 101);
        ctx=ctl;
        // function to print different background styles
        if(rand %3 ==0) {
            ctx.fillStyle = "#F0F0F0";
        }
        else if(rand %2 == 0){
            ctx.fillStyle = "#D0D0D0";
        }
        else{
            ctx.fillStyle = "#C0C0C0";
        }
        drawing(ctx,width,height);
        console.log("Console was Painted Successfully");
    }
    function drawing(ctx,width,height) {
        //filling rectangle
        ctx.fillRect(0,0,width,height);
        //drawing our hero
        ctx.beginPath();
        ctx.arc(20, 200, 15 , 0, 2 * Math.PI, false);
        ctx.fillStyle = 'green';
        ctx.fill();
        console.log("Shapes were drawn Successfully");
    }   
    //growing stick
    function grow_stick() {
        for(lv=200;lv>stick_size;lv++) {
            ctx.beginPath();
            ctx.moveTo(20,200);
            console.log("Moved to 20 , 200 in Canvas");
            ctx.lineTo(20,lv);
            console.log("Drawing Line from 20 to "+lv);
            ctx.stroke();           
            console.log("Stroke is Done");
        }
        console.log("Stick was growing Successfully");
    }
    function clearcanvas(ctl,width,height){
        //function to clear the screen data
        ctl.clearRect ( 0 , 0 ,width,height );
    }

    $(document).keydown(function(e){
        var key = e.which;
        if(key == "39"){  //38 is the code for up key
            //event.preventDefault();
            console.log("Down key is pressed");
            timeout= setInterval(grow_stick);
        }
    }).bind('keyup', function(e){
        if(e.which == "39") {
        console.log("Down key pressed is released ");
        clearTimeout(timeout);
        }
    });
</script>
</html>

我有一些问题和澄清

如何跟踪按键事件？
我尝试在按下键时设置超时功能，并在释放键时释放超时功能（但在清除超时方面存在一些问题）
密钥释放后如何不接受任何事件，我必须做其他动画？
尚未尝试，也不知道
另一个常见问题
如何准备我作为HTML5游戏开发人员的心态，欢迎任何参考链接或想法，我知道基本的编程

编辑： jsfiddle

尝试使用这样的间隔：

var myInt=null
$(document).keydown(function(e){
     var key = e.which;
     if(key == "39"){  //38 is the code for up key
         //event.preventDefault();
         console.log("Down key is pressed");
         myInt = setInterval(function(){ myAnimation() }, 40); 
         //40 milliseconds because of 25 images per sec
     }
}).bind('keyup', function(e){
    if(e.which == "39") {
        console.log("Down key pressed is released ");
        clearInterval(myInt);
    }
function myAnimation(){
   //your animation that last 40 milliseconds
}

您可以在 keyeup 事件中设置某种布尔值，并在每个事件中使用 if （if（keyrelease==false）{//do normal stuff}else{//skip}）检查它动画完成后，将布尔值设置回默认值
```
var keyreleased=false;
.bind('keyup', function(e){
keyreleased=true;
}
someEvent(){
     if(keyreleased!=true){
          //do stuff
     }
     //animation done
     keyreleased=false;
}
```
我不知道^^