我似乎无法使其工作,当用户按空格键时,应该发生什么。 event.which=32
它确实会移动,但它会一次移动20和20,它不会每秒1或1或1000毫秒
$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x =0;
var y =100;
var w =50;
var h =50;
var prekey = '';
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (x, y, w, h);
var i=0; var hi = '';
$("*").keydown(function(event) {
ctx.clearRect (0, 0, 500, 300);
if (event.which == 37){
if (x!=0){x=x-1;} prekey=event.which;
}
if (event.which == 39){if (x!=450){x=x+1;} prekey=event.which;}
if (event.which == 32) {
if (prekey==39) {
for(i=0;i<=20;i++) {
function jumpBox() {
x=x+1;
y=y-1;
ctx.clearRect (0, 0, 500, 300);
ctx.fillRect (x, y, w, h);
return 1;
}
var t = setTimeout(jumpBox, 1000);
}
if (prekey==37){}
}
ctx.fillRect (x, y, w, h);
});
});
答案 0 :(得分:2)
您通过for循环同时设置所有setTimeout
s。你需要等一下才能打电话给下一个。
if (prekey==39) {
var count = 0,
jumpBox;
jumpBox = function() {
x=x+1;
y=y-1;
ctx.clearRect (0, 0, 500, 300);
ctx.fillRect (x, y, w, h);
if(++count < 20) {
setTimeout(jumpBox, 1000);
}
}
var t = setTimeout(jumpBox, 1000);
}
答案 1 :(得分:0)
安德鲁的回答是你要去的方向,我只是把它放在一个工作的小提琴中,并试图理解它,因为我无法弄清楚剧本应该做什么。
http://jsfiddle.net/mendesjuan/xYUNn/2
这是新脚本的功能。
对脚本的更改
$('*')
,这是浪费,只需使用$(document)
,因为事件起泡i++
比i = i+1
更具可读性,如果您没有将其分配给。{}
变量if
在一行中很难阅读您现在可以根据需要更改脚本
$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 100;
var w = 50;
var h = 50;
var prekey = '';
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (x, y, w, h);
var timeout;
$(document).keydown(function(event) {
var counter = 0;
clearTimeout(timeout);
function animateCanvasBox() {
x++;
y--;
ctx.clearRect (0, 0, 500, 300);
ctx.fillRect (x, y, w, h);
if (counter < 20) {
timeout = setTimeout(animateCanvasBox, 100);
}
counter++;
}
if (event.which == 37){ //left arrow
if (x != 0){
x--;
}
prekey=event.which;
ctx.clearRect (0, 0, 500, 300);
ctx.fillRect (x, y, w, h);
}
else if (event.which == 39){ // right-arrow
if (x != 450){
x++;
}
prekey=event.which;
ctx.clearRect (0, 0, 500, 300);
ctx.fillRect (x, y, w, h);
}
else if (event.which == 32) { //space
animateCanvasBox();
}
});
});
的版本