JAVASCRIPT ONLY. NOT C# Implementation. I just need help getting an object to move up and down at the edges of the canvas.

Modify the HTML file to make the tiger move in the Y direction at 2 pixels every 1/30 of a second. When the tiger reaches either the top or bottom of the screen change its direction (up and down only). When the tiger is moving down the screen, make it 50% transparent. Make the tiger fully opaque when moving up the screen. This is what I've got I can't quite figure out how to make it move up and down. It just gets stuck in an up/down loop.

_{Many sprites}

_{//--- The sprite object}

_{var spriteObject = { //The x and y source position of the sprite's image //And its height and width sourceX: 0, sourceY: 0, sourceWidth: 64, sourceHeight: 64,}

_{//The x and y position of the sprite on the canvas //as well as its height x: 0, y: 0, width: 64, height: 64, vx: 0, vy: 0,}

_{// boolean set to true by default visible: true, //The sprite's transparency (0.0 to 1.0) alpha: 1}

_};

_{//--- The main program}

_{//the canvas and its drawing surface var canvas = document.querySelector(\"canvas\"); var drawingSurface = canvas.getContext(\"2d\");}

_{//An array to store the game sprites var sprites = [];}

_{//Create the background sprite, position it //and push it into the sprites array}

_{var background = Object.create(spriteObject); background.sourceY = 64; background.sourceWidth = 550; background.sourceHeight = 400; background.width = 550; background.height = 400; background.x = 0; background.y = 0; sprites.push(background);}

_{//Create the cat sprite. //Center it on the canvas and push it into the sprites array var cat = Object.create(spriteObject); cat.x = 0; cat.y = 336; sprites.push(cat);}

_{//Create the tiger sprite, position it //and push it into the sprites array var tiger = Object.create(spriteObject); tiger.sourceX = 64; tiger.x = 300; tiger.y = 336; sprites.push(tiger);}

_{//Load the cat's image var image = new Image(); image.addEventListener(\"load\", loadHandler, false); image.src = \"tileSheetWithBackground.png\";}

_{//Arrow key codes var RIGHT = 39; var LEFT = 37;}

_{//Directions var moveRight = false; var moveLeft = false;}

_{//Add keyboard listeners window.addEventListener(\"keydown\", function(event) { switch (event.keyCode) {}

_{case LEFT: moveLeft = true; break;}

_{case RIGHT: moveRight = true; break; } }, false);}

_{window.addEventListener(\"keyup\", function(event) { switch (event.keyCode) {}

_{case LEFT: moveLeft = false; break;}

_{case RIGHT: moveRight = false; break; } }, false);}

_{//Add a mouse listener canvas.addEventListener(\"mousedown\", mousedownHandler, false); window.addEventListener(\"mouseup\", mouseupHandler, false);}

_{function mousedownHandler(event) { //Find the mouse's y position var mouseY = event.pageY - canvas.offsetTop;}

_{//Define the cat's head and feet var top = cat.y; var bottom = cat.y + cat.height;}

_{//Change the velocity based on the mouse's relative position to the cat if (mouseY cat.vy -= 5; } if (mouseY > bottom) { cat.vy += 5; } }}

_{function mouseupHandler(event) { cat.vx = 0; cat.vy = 0; } function tigerTransparency() {}

_{//tiger.y-=1; //Make the tiger move up //tiger.y+=2; //Make the tiger move down}

_{if(tiger.y tiger.y += 2; console.log(\"down\") } else if(tiger.y != 0 && tiger.y tiger.y -= 1; console.log(\"up\") }}

_{if (tiger.y >= 0 && tiger.y tiger.alpha = 1; } else { tiger.alpha = 0.5; } }}

_{function loadHandler() { //Update the sprite as soon as the image has been loaded update(); }}

_{function update() { //Create the animation loop requestAnimationFrame(update, canvas);}

_{//Left if (moveLeft && !moveRight) { cat.vx = -5; } //Right if (moveRight && !moveLeft) { cat.vx = 5; } if (!moveLeft && !moveRight) { cat.vx = 0; }}

_{//Make the cat move cat.x += cat.vx; cat.y += cat.vy;}

_{//Make the tiger move up //tiger.y--; tigerTransparency();}

_{// Screen boundries. cat.x = Math.max(0, Math.min(cat.x + cat.vx, canvas.width - cat.width)); cat.y = Math.max(0, Math.min(cat.y + cat.vy, canvas.height - cat.height)); tiger.y = Math.max(0, Math.min(tiger.y + tiger.vy, canvas.height - tiger.height));}

_{//Render the game render(); }}

_{function render() { //Clear the previous animation frame drawingSurface.clearRect(0, 0, canvas.width, canvas.height);}

_{//Loop through all the sprites and use //their properties to display them if (sprites.length !== 0) { for (var i = 0; i var sprite = sprites[i]; if (sprite.visible) { // checks visibility //Render the sprite's transparency drawingSurface.globalAlpha = sprite.alpha; drawingSurface.drawImage( image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight, sprite.x, sprite.y, sprite.width, sprite.height); } } } }}