Изменить картинку на клавиатуре

Question

Я работаю над заданием школы, чтобы сделать небольшую игру, используя холст HTML5 и Javascript. Идея основана на космических захватчиках, но с воздушными змеями (я знаю, действительно, задира). Поэтому я получил кайт, двигаясь с нажатием клавиши, и теперь я хочу, чтобы он показывал другое изображение при нажатии слева и справа (змеи сгибаются влево и вправо).

Я получил изображение левого кайта на экране, но также показывает нормальный змей. Также при нажатии клавиш влево и вправо все еще нет разницы.

Нужно ли добавить еще одну функцию для рисования левого кайта отдельно? Или добавить оператор 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

Вы можете иметь каждое из изображений, которые вы хотите (вверх, вправо и влево) сохраняются как свойства объекта игрока, и изменить основной образ (тот, который), когда игрок меняет направление.

INIT:

//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 
} 

Вам также не нужно рисовать все изображения в розыгрыше(), как у вас есть сейчас. Вам нужно всего лишь нарисовать player.image