更改按鍵圖像

Question

我正在做一個學校作業，使用HTML5 canvas和Javascript制作一個小游戲。 這個想法是基於太空侵略者，但有風箏（我真的很討厭）。 所以我通過按鍵使風箏移動，現在我希望它在向左和向右按下時顯示不同的圖像（風箏向左和向右彎曲）。

我在屏幕上看到了左邊的風箏圖像，但它也顯示了正常的風箏。 左右按動鍵時也沒有區別。

我是否需要添加其他功能來分別繪制左風箏？ 或在key為true時添加if語句繪制圖像？ 這可能都是錯誤的，但我有點卡在這里。

這是我的代碼

 const FPS = 30;
 var canvas = null;
 var context = null;

 window.onload = init ;

 function init() {
canvas = document.getElementById('gameCanvas');
context = canvas.getContext('2d');

setInterval(loop, 1000 / FPS);

// register keyboard events
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);

// Initialize the player object
player.vx = 0;
player.vy = 0;
player.image = new Image();
player.image.src = "./kite.png";
player.imgLeft = new Image();
player.imgLeft.src = "./kite-links.png";
player.x = canvas.width/2 - player.image.width/2;
player.y = canvas.height/1.3 - player.image.height/2;
player.speed = 10;
 }

 var player = Object(); // Initialize a player object

 // Things to do when keys are down
 function onKeyDown(event)
 {
if (event.keyCode >= 37 && event.keyCode<=39)
    event.preventDefault(); // prevent arrow keys from scrolling the page

switch (event.keyCode) {
    case 37: player.vx = -1; break; // left key pressed
    case 38: player.vy = -1; break; // up key pressed
    case 39: player.vx = 1; break;  // right key pressed
}
 }

 // Things to do when keys are up
 function onKeyUp(event)
 {
switch (event.keyCode) {
    case 37: case 39: player.vx = 0; break; // left or right key released
    case 38: player.vy = 0; break; // up or down key released
}
 }

 function update(){
// update all your objects here
player.x += player.vx * player.speed; // update player position
player.y += player.vy * player.speed;
 }

 function draw(){
// clear the screen
context.clearRect(0, 0, canvas.width, canvas.height);

// draw all your objects here
context.drawImage(player.image, player.x, player.y, player.image.width, player.image.height);
context.drawImage(player.imgLeft, player.x, player.y, player.image.width,      player.image.height);
 }


 function loop() {
update();
draw();
 }

Answer 1

您可以將想要的每個圖像（上，右和左）保存為屬性，並在播放器對象上進行更改，並在播放器改變方向時更改主圖像（正在繪制的圖像）。

在里面：

//default to straight in init()
player.image = new Image();
player.image.src = "./kite.png";
player.imgUp = new Image();
player.imgUp.src = "./kite.png";
player.imgLeft = new Image();
player.imgLeft.src = "./kite-links.png";
player.imgRight = new Image();
player.imgRight.src = "./kite-right.png";

onKeyDown：

switch (event.keyCode) {
    case 37: player.vx = -1; player.image = player.imgLeft; break; // left key
    case 38: player.vy = -1; player.image = player.imgUp; break; // up key
    case 39: player.vx = 1; player.image = player.imgRight; break; // right key
}

您也不需要像現在一樣在draw（）中繪制所有圖像。 您只需要繪制player.image