如何正確按下按鍵？-有解無憂

函式將通過洗掉尾巴并在所需方向（VectorX/Y）添加新頭來改變蛇的位置。但是當我按下任何按鈕時，矢量都不會改變。

    const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');

function drawSqr(color, size, position){
    cs.fillStyle = color;
    cs.fillRect(position[0] * size, position[1] * size, size, size);
}



const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);

let vectorX = 0, vectorY = 0;

let snake = {
    position : [
        [1, 1],
        [2, 1],
        [3, 1],
    ],
    color: "#00FFFF",
    snakeRender: function(event){
            document.addEventListener('keydown', function(event, vectorX, vectorY){
                switch(event){
                    case "w":
                        vectorX = 0, vectorY = 1;
                        break;
                    case "a":
                        vectorX = -1, vectorY = 0;
                        break;
                    case "s":
                        vectorX = 0, vectorY = -1;
                        break;
                    case "d":
                        vectorX = 1, vectorY = 0;
                        break;
                }
            return alert(event   " was pressed!");
        });
    
        let [x, y] = this.position.at(-1);
        this.position.push([x   vectorX, y   vectorY]);
        let oldTail = this.position.shift()
        console.log(this.position)
        console.log(vectorX, vectorY)
        drawSqr("#000000", sqrSize, oldTail);
        for(let pos of this.position){
            drawSqr(this.color, sqrSize, pos);
        }
        setTimeout(() => snake.snakeRender(), 1000);
    }
};


snake.snakeRender();

<!DOCTYPE html>
<html>
 <head>
   <title>The snake</title>
   <meta charset="utf-8">
 </head>
 <body>
    <canvas id="map" width="1280" height="720"></canvas>
    <script src="script.js"></script>
 </body> 
</html>

當您按“W”、“A”、“S”、“D”時，Ps 矢量會發生變化。我認為問題出在 setTimeOut 但我不知道如何解決這個問題。謝謝你的幫助。Pps 我檢查程序式是否看到按下的按鈕并回傳 [object KeyboardEvent]

uj5u.com熱心網友回復：

有兩個問題：

function(ev, vectorX, vectorY)意味著更新vectorX并將vectorY更新那些區域變數，而不是這里宣告的全域變數：let vectorX = 0, vectorY = 0;. （并且更新程式只能訪問全域變數。）
使用switch(ev)而不是switch(ev.key)意味著它永遠不會匹配任何鍵，因為ev它是一個物件，而不是一個字串。

const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');

function drawSqr(color, size, position){
    cs.fillStyle = color;
    cs.fillRect(position[0] * size, position[1] * size, size, size);
}



const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);

let vectorX = 0, vectorY = 0;

let snake = {
    position : [
        [1, 1],
        [2, 1],
        [3, 1],
    ],
    color: "#00FFFF",
    snakeRender: function(event){
            document.addEventListener('keydown', function(ev){
                switch(ev.key){
                    case "w":
                        vectorX = 0, vectorY = 1;
                        break;
                    case "a":
                        vectorX = -1, vectorY = 0;
                        break;
                    case "s":
                        vectorX = 0, vectorY = -1;
                        break;
                    case "d":
                        vectorX = 1, vectorY = 0;
                        break;
                }
            return
        });
    
        let [x, y] = this.position.at(-1);
        this.position.push([x   vectorX, y   vectorY]);
        let oldTail = this.position.shift()
        console.log(this.position)
        console.log(vectorX, vectorY)
        drawSqr("#000000", sqrSize, oldTail);
        for(let pos of this.position){
            drawSqr(this.color, sqrSize, pos);
        }
        setTimeout(() => snake.snakeRender(), 1000);
    }
};


snake.snakeRender();

<!DOCTYPE html>
<html>
 <head>
   <title>The snake</title>
   <meta charset="utf-8">
 </head>
 <body>
    <canvas id="map" width="1280" height="720"></canvas>
    <script src="script.js"></script>
 </body> 
</html>

此外，每次snakeRender()運行都添加一個事件監聽器，意味著有很多事件監聽器，每個都做同樣的事情。不過，我沒有在那里調整任何東西。

uj5u.com熱心網友回復：

嘗試這個：

switch(ev.key){
    case "w":
        vectorX = 0, vectorY = 1;
    break;
    case "a":
        vectorX = -1, vectorY = 0;
    break;
    case "s":
        vectorX = 0, vectorY = -1;
    break;
    case "d":
        vectorX = 1, vectorY = 0;
    break;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/489212.html

標籤：javascript 功能目的

上一篇：出于某種原因，我的物件在作為道具傳遞時會重新排列

下一篇：HTML物件阻塞事件監聽器