我正在研究 Stick Hero (著名的 Android 游戏)在 HTML 5 中克隆，我正在尝试在 Javascript 中实现捕获按键时间(右箭头 - 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>
我有一些问题和澄清
- 如何跟踪按键事件？
我尝试在按下按键时设置超时功能，并在释放按键时释放超时功能(但 cleartimeout 存在一些问题) - 如何在释放按键后不接受任何事件，我必须做其他动画？
还没有尝试过，不知道 - 另一个常见问题
如何准备我作为 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 事件中设置某种 bool 值，并在每个事件中使用 if 检查它(if(keyreleased==false){//做正常的事情}else{//skip}) 动画完成后，将 bool 值设置回默认值
var keyreleased=false; .bind('keyup', function(e){ keyreleased=true; } someEvent(){ if(keyreleased!=true){ //do stuff } //animation done keyreleased=false; }我不知道^^
关于javascript - HTML 5 Canvas 按键时间事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27418145/