Search the Community

The game is built in Javascript and HTML. It can be downloaded Here It requires concentration and memory. It's easy to understand and gets very challenging as you play. Spot the new different piece in every turn all the way until you make the full picture. The game starts easy and gets harder as you play. The game features lots of picture puzzles to play and solve, with varying difficutly levels, making it playable by everyone. Also, You will earn special powers for completing and finishing puzzles - use them to help you when it gets tough!

Hi. I'm trying to move my space jet so that way it is facing the left when I move the arrow key left, and it is facing right when I move the arrow key right. Any help would be greatly appreciated. Thanks. Here's my code in Javascript: var canvasBg = document.getElementById('canvasBg');var ctxBg = canvasBg.getContext('2d');var canvasJet = document.getElementById('canvasJet');var ctxJet = canvasJet.getContext('2d');var jet1;var gameWidth = canvasBg.width;var gameHeight = canvasBg.height; var fps = 10;var drawInterval;var imgSprite = new Image();imgSprite.src = 'sprite.png';imgSprite.addEventListener('load',init,false);//MAIN FUNCTIONSfunction init() { drawBg(); startDrawing(); jet1 = new Jet(); document.addEventListener('keydown',checkKeyDown,false); document.addEventListener('keyup',checkKeyUp,false);}function draw() { jet1.draw();}function startDrawing() { stopDrawing(); drawInterval = setInterval(draw,fps); }function stopDrawing() { clearInterval(drawInterval);}function drawBg() { var srcX = 0; var srcY = 0; var drawX = 0; var drawY = 0; ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight); }function clearCtxBg() { ctxBg.clearRect(0,0,gameWidth,gameHeight); }//END OF MAIN FUNCTIONS//Jet functionsfunction Jet() { this.srcX = 0; this.srcY = 500; this.drawX = 200; this.drawY = 200; this.width = 100; this.height = 50; this.speed = 2; this.isUpKey = false; this.isRightKey = false; this.isDownKey = false; this.isLeftKey = false;}Jet.prototype.draw = function () { clearCtxJet(); this.checkKeys(); ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); };Jet.prototype.checkKeys = function () { if(this.isUpKey) { this.drawY -= this.speed; } if(this.isRightKey) { this.drawX += this.speed; } if(this.isDownKey) { this.drawY += this.speed; } if(this.isLeftKey) { this.drawX -= this.speed; }};function clearCtxJet() { ctxJet.clearRect(0,0,gameWidth,gameHeight); }//END JET FUNCTIONS//EVENT FUNCTIONSfunction checkKeyDown(e) { var keyID = e.keyCode || e.which; /// === mean exactly equal to /// || mean 'OR'. if (keyID === 38 || keyID === 87) { //38 means up arrow key and 87 means 'W' key. jet1.isUpKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 39 || keyID === 68) { //38 means up arrow key and 87 means 'W' key. jet1.isRightKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 40 || keyID === 83) { //38 means up arrow key and 87 means 'W' key. jet1.isDownKey = true; // prevent page from srcolling e.preventDefault(); } if (keyID === 37 || keyID === 65) { //let arrow or A key jet1.isLeftKey = true; // prevent page from srcolling e.preventDefault(); }}function checkKeyUp(e) { var keyID = e.keyCode || e.which; /// === mean exactly equal to /// || mean 'OR'. if (keyID === 38 || keyID === 87) { //38 means up arrow key and 87 means 'W' key. jet1.isUpKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 39 || keyID === 68) { //38 means up arrow key and 87 means 'W' key. jet1.isRightKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 40 || keyID === 83) { //38 means up arrow key and 87 means 'W' key. jet1.isDownKey = false; // prevent page from srcolling e.preventDefault(); } if (keyID === 37 || keyID === 65) { //let arrow or A key jet1.isLeftKey = false; // prevent page from srcolling e.preventDefault(); }}//END OF EVENT FUNCTIONS