Change image on keypress

Question

I am working on a school assignment to make a small game using HTML5 canvas and Javascript. The idea is based on space invaders but with kites (I know really badass). So I got the kite moving with key press and now I want it to show a different image when pressing left and right (kites bend to the left and right).

I got the left kite image on the screen but it also shows the normal kite. Also there is still no difference when pressing keys left and right.

Do I need to add another function to draw the left kite separately? Or add an if statement when key is true draw image ? This could all be wrong but I am kind of stuck here.

Here is my code

 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

You can have each of the images you want (up, right, and left) saved as properties on the player object, and change the main image (the one that is being drawn) whenever the player changes direction.

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
}

You also don't need to draw all of the images inside draw() like you have now. You only need to draw player.image