JS中的蛇建立左右運動

Question

Dears，我開始學習編程，並選擇了Snake作爲第一個項目。由於我找不到適合初學者的教程，所以我在YouTube上觀看了「thenewboston」的pygame蛇教程。我試圖用JS複製他的步驟，最後我遇到了以下問題。我可以左右移動，但是一旦我向左移動然後向右移動，就會出現一個錯誤：它試圖在同一時間向左和向右移動。我完全不知道，如何告訴JS不要繼續向左移動，當我立即按下時。

希望你能解釋我的問題並提出解決方案。謝謝！

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext("2d"); 

lead_x = 100; 
lead_y = 100; 

function draw_it() { 
    // background 
    ctx.fillStyle = "white" 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 

    // snake head 
    ctx.fillStyle = "green" 
    ctx.fillRect(lead_x, lead_y, 20 , 20) 
} 

draw_it(); 

document.onkeydown = function(event) { 
    if (event.keyCode == 37) { 
    setInterval(function() { 
     lead_x -= 10; 
     draw_it(); 
    }, 100); 
    } else if (event.keyCode == 39) { 
    setInterval(function() { 
     lead_x += 10; 
     draw_it(); 
    }, 100); 
} 

Answer 1

集intervar繼續運行無限，你要殺死前一個計時器創建新的或剛使用這樣一個間隔時：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext("2d"); 

lead_x = 100; 
lead_y = 100; 

function draw_it() { 
    // background 
    ctx.fillStyle = "white"; 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 

    // snake head 
    ctx.fillStyle = "green"; 
    ctx.fillRect(lead_x, lead_y, 20 , 20); 
} 

draw_it(); 

var left_turn = false; 
var right_turn = false; 

document.onkeydown = function(event) { 
    if (event.keyCode == 37) { 
     left_turn = true; 
     right_turn = false; 
    } else if (event.keyCode == 39) { 
     right_turn = true; 
     right_turn = false; 
    } 
} 


setInterval(function() { 
    if (left_turn) { 
     lead_x -= 10; 
     draw_it(); 
    } else if (right_turn) { 
     lead_x += 10; 
     draw_it(); 
    } 
}, 100); 

Answer 2

最大的問題是你使用setInterval這將繼續在其中無限地重複代碼。

console.log('It just keeps going...'); 
 
setInterval(function() { 
 
    console.log('and going...'); 
 
}, 1000);

相反，我建議使用setTimeout或requestAnimationFrame來控制你的遊戲的「心跳」，那麼只需修改一個號碼，只要用戶按下一個方向。

var canvas = document.querySelector('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var leadX = 160; 
 
var leadY = 120; 
 

 
var speed = 10; 
 
var xDirection = 1; // Start out going right 
 

 
function update() { 
 
    // Update the players position 
 
    
 
    // If xDirection === 1, move to the right 
 
    // if xDirection === -1, move to the left 
 
    leadX += xDirection * speed; 
 
} 
 

 
function draw() { 
 
    // Clear the screen and draw the player 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.fillStyle = '#000'; 
 
    ctx.fillRect(leadX, leadY, 10, 10); 
 
} 
 

 
function heartBeat() { 
 
    update(); 
 
    draw(); 
 
    
 
    // Call `heartBeat` again in 100ms 
 
    setTimeout(heartBeat, 100); 
 
} 
 
heartBeat(); 
 

 
document.onkeydown = function(event) { 
 
    if (event.keyCode === 37) { 
 
    // Go to the left 
 
    xDirection = -1; 
 
    } else if (event.keyCode === 39) { 
 
    // Go to the right 
 
    xDirection = 1; 
 
    } 
 
};

html, body { 
 
    background: #222; 
 
} 
 
canvas { 
 
    display: block; 
 
    margin: 4px auto; 
 
    background: #FFF; 
 
}

<canvas width="320" height="240"></canvas>

Answer 3

你只需要確保當左按鍵，右按鍵功能停止重複，並按下右鍵時，左鍵功能停止重複：

document.onkeydown = function(event) { 

    if (event.keyCode == 37) { 
     clearInterval(goRight); 

     var goLeft = setInterval(function() { 
      lead_x -= 10; 
      draw_it(); 
     }, 100); 
    } 

    else if (event.keyCode == 39) { 
     clearInterval(goLeft); 

     var goRight = setInterval(function() { 
      lead_x += 10; 
      draw_it(); 
     }, 100); 
    } 
}