流體鍵輸入？在Javascript

window.onload = function() { 
 
    canv = document.getElementById("gc"); 
 
    canv.width = 500; 
 
    canv.height = 300; 
 
    ctx = canv.getContext("2d"); 
 
    document.addEventListener("keydown", keyDown); 
 
    setInterval(game, 10); 
 
} 
 

 
function Paddle(x, y) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.l = 50; 
 
    this.score = 0; 
 
} 
 

 
function Ball(x, y, xv, yv) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.xv = xv; 
 
    this.yv = yv; 
 
    this.s = 5; 
 
    this.update = function() { 
 
    this.x += this.xv; 
 
    this.y += this.yv; 
 
    } 
 
} 
 

 
function drawLine(x1, y1, x2, y2) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x1, y1) 
 
    ctx.lineTo(x2, y2) 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 

 
function random(min, max) { 
 
    var i = 0; 
 
    while (!i) { 
 
    i = Math.floor(Math.random() * (max - min + 1) + min); 
 
    } 
 
    return i; 
 
} 
 

 
p1 = new Paddle(10, 125); 
 
p2 = new Paddle(490, 125); 
 
b = new Ball(250, 150, random(-2, 2), random(-2, 2)); 
 

 
function game() { 
 
    b.update(); 
 
    if (p1.y < 0) 
 
    p1.y = 0; 
 
    else if (p1.y + p1.l > canv.height) 
 
    p1.y = canv.height - p1.l; 
 
    if (p2.y < 0) 
 
    p2.y = 0; 
 
    else if (p2.y + p2.l > canv.height) 
 
    p2.y = canv.height - p2.l; 
 
    if (b.y < 0 || b.y > canv.height) 
 
    b.yv = -b.yv; 
 
    if (b.x < 0) { 
 
    p2.score++; 
 
    b = new Ball(30, 150, random(0, 2), random(-2, 2)); 
 
    } else if (b.x > canv.width) { 
 
    p1.score++; 
 
    b = new Ball(canv.width - 30, 150, random(-2, 0), random(-2, 2)); 
 
    } 
 
    if ((b.x == p1.x && b.y > p1.y && b.y + b.s < p1.y + p1.l) || 
 
    b.x + b.s == p2.x && b.y > p2.y && b.y + b.s < p2.y + p2.l) 
 
    b.xv = -b.xv; 
 
    ctx.fillStyle = "black"; 
 
    ctx.fillRect(0, 0, canv.width, canv.height); 
 
    ctx.strokeStyle = "white"; 
 
    drawLine(p1.x, p1.y, p1.x, p1.y + p1.l); 
 
    drawLine(p2.x, p2.y, p2.x, p2.y + p2.l); 
 
    ctx.fillStyle = "white"; 
 
    ctx.fillRect(b.x, b.y, b.s, b.s); 
 
    ctx.font = "30px sans serif"; 
 
    ctx.fillText(p1.score, 200, 50); 
 
    ctx.fillText(p2.score, 300, 50); 
 
} 
 

 
function keyDown(evt) { 
 
    switch (evt.keyCode) { 
 
    case 83: 
 
     p1.y += 10; 
 
     break; 
 
    case 87: 
 
     p1.y -= 10; 
 
     break; 
 
    case 40: 
 
     p2.y += 10; 
 
     break; 
 
    case 38: 
 
     p2.y -= 10; 
 
     break; 
 
    } 
 
}

<canvas id="gc"></canvas>

（鍵輸入的恆定流）在該初級的傍方案中，我使用document.addEventListener("keydown", keyDown);以控制槳葉的運動。但是，函數並沒有以一致的速度被調用（運動不是流體）。第一臺印刷機被註冊，然後稍微暫停一下，然後流暢地移動。（類似於如果你持有一個字母鍵，它會鍵入一個字母，如果你繼續拿着它，它會繼續鍵入字母，但不會稍微暫停之前？不知道在這裏我是否清楚......）

有沒有一種方法可以使用「keydown」事件偵聽器進行一致的輸入/函數調用？

來源

2017-06-21 David Tran

聽起來像你想[[debounce]]（https://stackoverflow.com/q/24004791/215552）你的事件處理，以便它變得更加一致的時間。 –

不一定。輸入在第一個函數調用後是流體，它只是第一個和第二個之間的奇數。 –

這取決於您的操作系統的關鍵重複率。你在使用什麼操作系統？ – joews

通過在上設置變量的值並在keyup上清除變量的值，可以消除OS鍵盤重複速率的影響。例如：

let direction = null; 

document.addEventListener("keydown", function (evt) { 
    switch (evt.keyCode) { 
    case 83: 
     direction = "down"; 
     break; 
    case 87: 
     direction = "up"; 
     break; 
    case 40: 
     direction = "down"; 
     break; 
    case 38: 
     direction = "up"; 
     break; 
    default: 
     direction = null; 
    } 
}); 

document.addEventListener("keyup", function (evt) { 
    direction = null; 
})

在您的遊戲循環的每次迭代中檢查此變量的狀態。大多數HTML5遊戲使用requestAnimationFrame。

來源

2017-06-21 20:53:33 joews

流體鍵輸入？在Javascript

回答

相關問題