Anything Horribly Wrong (In my code)

[frankdev]

Yesterday I coded up this space invaders like game. I am a beginner and I didn't follow any tutorials so I was just wondering if there was anything really bad -- something I shouldn't do or have in my code. Thanks.

    window.requestAnimFrame = (function(){      return  window.requestAnimationFrame       ||               window.webkitRequestAnimationFrame ||               window.mozRequestAnimationFrame    ||               window.oRequestAnimationFrame      ||               window.msRequestAnimationFrame     ||               function(/* function */ callback, /* DOMElement */ element){                window.setTimeout(callback, 1000 / 60);              };    })();  var canvas = document.getElementById("myCanvas"),      ctx = canvas.getContext("2d"), bullets = [], keyCode = "",       enemies = [], enemyShip, bulletCount, paused = false;//BACKGROUNDvar bg =  new Image();bg.src = "BG.jpg";//PLAYERvar playerShip = new Image();playerShip.src = "playerShip.png";//ENEMY//MUSIC AND SOUNDSvar shootSound = document.getElementById("shoot");var BGMusic = document.getElementById("bg");var Player = {  x: 250,  y: 450,  width: 56,  height: 35,  speed: 4,   left: false,  right: false,  space: false,  state: "alive",  score: 0};function update(){if(paused != true)   {    requestAnimFrame(update);  }  render();  move();  dead();  BGMusic.play();}function move(){  document.onkeydown = function(e){          keyCode = e.keyCode;          if(keyCode == 37){              Player.left = true;              e.preventDefault();          }          if(keyCode == 39){            Player.right = true;            e.preventDefault();          }          if(keyCode == 32){            Player.space = true;                  bulletCount = 0;            e.preventDefault();          }          if(keyCode == 27){            paused == true;          }      }  document.onkeyup = function(e){            keyCode = e.keyCode;            if(keyCode == 37){            Player.left = false;          }          if(keyCode == 39){            Player.right = false;          }          if(keyCode == 32){            Player.space = false;        }          }                    if(Player.left == true){            Player.x -= Player.speed;          }          if(Player.right == true){            Player.x+= Player.speed;          }          if(Player.space == true){            if(bulletCount < 20){              playerShoot();              bulletCount++;              shootSound.play();              }          }        }function dead(){  count = 0;  for(var i = 0; i < bullets.length; i++){    for(var j = 0; j < enemies.length; j++){         if(collide(bullets[i], enemies[j])){          enemies[j].image = "explosion.png";          enemy = enemies[j];          destroy(enemies[j]);            if(count < 1){              Player.score++;              count++;           }         }       }     }  for(var t = 0; t < enemies.length; t++){    if(collide(enemies[t], Player)){      enemies = [];      Player = {};      bullets = [];      ctx.fillStyle = "yellow";      ctx.fillText("Hello World!",10,50);    }  }}function render(){ctx.clearRect(0,0,canvas.width, canvas.height);ctx.drawImage(bg, 0, 0);ctx.drawImage(playerShip, Player.x, Player.y,  Player.width, Player.height);    for(var j = 0; j < enemies.length; j++){          enemy = enemies[j];      enemyShip = new Image();      enemyShip.src = enemy.image;        if(enemy.state != "dead"){      enemy.y += enemy.speed;      ctx.drawImage(enemyShip, enemy.x, enemy.y, enemy.width, enemy.height);      if(enemy.y > canvas.height){        delete enemy;        }      }    }                                      for(var i = 0; i < bullets.length; i++){      bullet = bullets[i];      ctx.fillStyle = "yellow";      ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);        bullet.vy += bullet.acceleration;        bullet.y -= bullet.vy;                if(bullet.y  < 0){                  bullets.length -- ;            delete bullet;          }    }    ctx.fillText(Player.score, 300, 20);}function playerShoot(){   bullets.push({          x: Player.x + (1/2 * Player.width),          y: Player.y - (1/2 * Player.height),          vy: 1,          acceleration: 0.1,          width: 2,          height: 2    });}function enemySpawn(){  enemies.push({  x: Math.random() * canvas.width,  y: 20,  speed: 1.5,  width: 64,  height: 64,  state: "alive",  image: "enemy.gif"});}function collide(a, { if((a.x > b.x && (a.x < b.x + b.width)) && (a.y > b.y && (a.y < b.y+ b.height))){     return true;      }else{        return false;      }}function destroy(entity){  setTimeout(function(){entity.state = "dead";}, 500);  }setInterval(enemySpawn, 500);update();

 

[allc1865]

Check out gyrostorms on YouTube. I am following his tutorials on how to make an game. Does the game work? I wouldn't use setInterval either... 

[allc1865]

Instead of

var bg =  new Image();bg.src = "BG.jpg";//PLAYERvar playerShip = new Image();playerShip.src = "playerShip.png";

 

 

try this out. It's good coding skills.

var imgSprite = new Image();imgSprite.src = 'sprite.png';imgSprite.addEventListener('load', init, false);

Thanks for sharing your code with everyone, it gave me some ideas for the shoot sounds.

[allc1865]

You've got a pretty nice game. Is it live? Can we see it?

[allc1865]

Are you using a sprite sheet? 

[frankdev]

I am not... I have it "up" here: lionela.site90.com -- for some reason the background music won't work. Thanks for the feedback!

[allc1865]

I would look into a using sprite sheet. Nice game though!