Javascript Html5 canvas problems

Question

This is a game I am making. I cant figure out why it is not working. I have the JS fiddle here http://jsfiddle.net/aa68u/4/

    // Create the canvas
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = 512;
  canvas.height = 480;
 document.body.appendChild(canvas);



 // Background image
 var bgReady = false;
 var bgImage = new Image();
 bgImage.onload = function () {
     bgReady = true;
 };
 bgImage.src = "http://6269-9001.zippykid.netdna-cdn.com/wp-content/uploads/2013/11/Woods-Wallpaper.jpg";

 // Ship image
 var shipReady = false;
 var shipImage = new Image();
 shipImage.onload = function () {
     shipImage = true;
 };
 shipImage.src = "http://s29.postimg.org/3widtojzn/hero.png";

 // Astroid image
 var astroidReady = false;
 var astroidImage = new Image();
 astroidImage.onload = function () {
     astroidReady = true;
 };
 astroidImage.src = "http://s29.postimg.org/4r4xfprub/monster.png";

 // Game objects
 var ship = {
     speed: 256; 
 };
 var astroid = {};


 var health = 100;

 window.keyStates = {}; 

 addEventListener('keydown',  function (e) {
     keyStates[e.keyCode || e.key] = true;
     e.preventDefault();
     e.stopPropagation();
 }, true);

 addEventListener('keyup',  function (e) {
      keyStates[e.keyCode || e.key] = false;
     e.preventDefault();
     e.stopPropagation();
 }, true);



 var reset = function () {

     astroid.width = 10;
     astroid.height = 10;
     astroid.x = 32 + (Math.random() * (canvas.width - 64));
     astroid.y = 32 + (Math.random() * (canvas.height - 64));

     ship.speed = 256;

     for (var p in keyStates) keyStates[p]= false;
 };



 // Update game objects
 function update (modifier) {
     if (keyStates[38] ==true) { // Player holding up
         astroid.x -= ship.speed * modifier;
     }
     if (keyStates[40]==true) { // Player holding down
         astroid.x += ship.speed * modifier;
     }
     if (keyStates[37]==true) { // Player holding left
         astroid.y -= ship.speed * modifier;
     }
     if (keyStates[39]==true) { // Player holding right
         astroid.y += ship.speed * modifier;
     }
     if (astroid.width) < 200{
         astroid.width +=10;
         astroid.height += 10;
     }
     if (astroid.width) > 200{
         reset();
     }
     // Are they touching?
if (keyStates[32] == true && ship.x <= (astroid.x + 32) && astroid.x <= (ship.x + 32) && ship.y <= (astroid.y + 32) && astroid.y <= (ship.y + 32)) {
    monstersCaught += 1;
    reset();
}



 };


 // Draw everything
 var render = function () {
    if (bgReady) {
    ctx.drawImage(bgImage, 0, 0);
}



if (shipReady) {
    ctx.drawImage(heroImage, hero.x, hero.y);
}

if (astroidReady) {
    ctx.drawImage(monsterImage, monster.x, monster.y);
}

// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Your Health: " + health, 32, 32);

 };

 // The main game loop
 var main = function () {
var now = Date.now();
var delta = now - then;
if (delta > 20) delta = 20;

update(delta / 1000);
render();

then = now;
 };

 // Let's play this game!
 reset();
 var then = Date.now();
 setInterval(main, 1); // Execute as fast as possible

The game is supposed to be a ship(shoe image) that is avoiding astroids that get bigger(ants) but when you move your ship(shoe) stays in the same place and the astroids(ants) move. The ants/astroids also get bigger like you are going close to them.

Answer 1

var ship = {
    speed: 256; 
};

Remove the ; after the value.

if astroid.width < 200{

and

if astroid.width > 200{

Need parentheses around the if conditions.

The error console is helpful! But now it's just stuck in an infinite loop of monsterImage is not defined. Just... go back, write your code more carefully, and use the error console! It's there for a reason!