title: HTML5, Easel.js game problems
body: <p>Been working on an easel game tutorial that involves an animated character going across the screen and avoiding crates falling from above. I've followed the code in the tutorial exactly but no joy;nothing seems to be loading (including images which are mapped correctly). No errors regarding syntax seem to occur so not sure what the problem is. It's a fair bit of code so totally understand if no-one has the time but just in case here it is ;</p>
  
  <p>Site Page code (ill post the individual JavaScript file codes if anyone is interested;</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt; 
  body {
      background-color: #000;
  }
  &lt;/style&gt;
  
  &lt;script src="lib/easeljs-0.6.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="JS/Platform.js"&gt;&lt;/script&gt;
  &lt;script src="JS/Hero.js"&gt;&lt;/script&gt;
  &lt;script src="JS/Crate.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var KEYCODE_SPACE = 32, KEYCODE_LEFT = 37, KEYCODE_RIGHT = 39;
  var canvas, stage, lfheld, rtheld, platforms, crates, hero, heroCenter, key, door, gameTxt;
  
  var keyDn = false, play=true, dir="right";
  var loaded = 0, vy = 0, vx = 0;
  var jumping = false, inAir = true, gravity = 2;
  
  var img = new Image();
  var bgimg = new Image();
  var kimg = new Image();
  var dimg = new Image();
  
  var platformW = [300, 100, 180, 260, 260, 100, 100];
  var platformX = [40, 220, 320, 580, 700, 760, 760];
  var platformY = [460, 380, 300, 250, 550, 350, 450];
  document.onkeydown=handleKeyDown;
  document.onkeyup=handleKeyUp;
  
  function init(){
      canvas = document.getElementById("canvas"); 
      stage = new createjs.Stage(canvas);
      bgimg.onload = this.handleImageLoad;
  
      bgimg.src = "img/scene.jpg";
  
  kimg.onload = this.handleImageLoad;
  
  kimg.src="img/key.png";
  
  dimg.onload = this.handleImageLoad;
  
  dimg.src = "img/door.jpg";
  
  img.onload = this.handleImageLoad;
  
  img.src = "img/hero.png";
  }
  
  function handleImageLoad(event) {
      loaded+=1;
      if (loaded==4){
          start();
      }
  }
  
  function handleKeyDown(e) {
      if(!e){ var e = window.event; }
      switch(e.keycode) {
          case KEYCODE_LEFT: lfHeld = true;
  dir="left"; break;
  case KEYCODE_RIGHT: rtHeld = true;
  dir="right"; break;
  case KEYCODE_SPACE: jump(); break;
      }
  }
  
  
  function handleKeyUp(e) {
      if(!e){ var e = window.event; }
      switch(e.keycode) {
          case KEYCODE_LEFT: lfHeld = false;
  keyDn=false; hero.gotoAndStop("idle_h"); break;
  case KEYCODE_RIGHT: rtHeld = false;
  keyDn=false; hero.gotoAndStop("idle"); break;
      }
  }
  
  
  
  
  function start(){
      var bg = new createjs.Bitmap(bgimg);
      stage.addChild(bg);
      door = new createjs.Bitmap(dimg);
      door.x = 131;
      door.y = 384;
      stage.addChild(door);
      hero = new Hero(img);
      hero.x = 80;
      hero.y = 450;
      stage.addChild(Hero);
  
      crates = new Array();
      paltforms = new Array();
      for(i=0; i &lt; platformW.length; i++){
          var platform = new Platform(platformW[i],20);
          platforms.push(platform);
          stage.addChild(platform);
          platform.x = platformX[i];
          platform.y = platformY[i];
      }
  
  for(j=0; j &lt; 5; j++){
      var crate = new Crate();
      crates.push(crate);
      stage.addChild(crate);
      resetCrates(crate);
  }
  key = new createjs.Bitmap(kimg);
  key.x = 900;
  key.y = 490;
  stage.addChild(key);
  
  Ticker.setFPS(30);
  Ticker.addListener(window);
  stage.update();
  }
  
  function tick() {
      heroCenter = hero.y-40;
      if (play){
          vy+=gravity;
          if (inAir){
              hero.y+=vy;
          }
          if (vy&gt;15){
              vy=15;
          }
  for(i=0; i &lt; platforms.length; i++){
      if (hero.y &gt;= platforms[i].y &amp;&amp; hero.y&lt;=(platforms[i].y+platforms[i].height) &amp;&amp; hero.x&gt;
      platforms[i].x &amp;&amp; hero.x&lt;(platforms[i].
      x+platforms[i].width)){;
      hero.y=platforms[i].y;
      vy=0;
      jumping = false;
      inAir = false;
      break;
      }else{
          inAir = true;
      }
  }
  for(j=0; j &lt; crates.length; j++){
      var ct = crates[j];
      ct.y+=ct.speed;
      ct.rotation+=3;
      if (ct.y&gt;650){
          resetCrates(ct);
      }
      if (collisionHero (ct.x, ct.y, 20)){
          gameOver();}
  }
  if (collisionHero (key.x+20, key.y+20,
  20)){
      key.visible=false;
      door.visible=false;
  }
  if (collisionHero (door.x+20, door.y+40,
  20) &amp;&amp; key.visible==false){nextLevel();}
  if (lfHeld){vx = -5;}
  if (rtHeld){vx = 5;}
  
  if(lfHeld &amp;&amp; keyDn==false &amp;&amp; inAir==false)
  {
      hero.gotoAndPlay("walk_h");
      keyDn=true;
  }
  if(rtHeld &amp;&amp; keyDn==false &amp;&amp;
  inAir==false){
      hero.gotoAndPlay("walk");
      keyDn=true;
  }
  if (dir=="left" &amp;&amp; keyDn==false &amp;&amp;
  inAir==false){
      hero.gotoAndStop("idle_h");
  }
  if (dir=="right" &amp;&amp; keyDn==false &amp;&amp;
  inAir==false){
      hero.gotoAndStop("idle");
  }
  
  hero.x+=vx;
  vx=vx*0.5;
  if (hero.y&gt;610){
      gameOver();
  }
      }
      stage.update();
  }
  
  function end(){
      play=false;
      var l = crates.length;
      for (var i=0; i&lt;l; i++){
          var c = crates[i];
          resetCrates(c);
      }
      hero.visible=false;
      stage.update();
  }
  
  function nextLevel(){
      gameTxt = new createjs.Text("Well Done\n\n",
  "36px Arial", "#000");
   gameTxt.text += "Prepare for Level 2";
   gameTxt.textAlign = "center";
   gameTxt.x = canvas.width / 2;
   gameTxt.y = canvas.height / 4;
   stage.addChild(gameTxt);
   end();
  }
  function gameOver(){
      gameTxt = new createjs.Text("Game Over\n\n",
      "36px Arial", "#000");
      gameTxt.text += "Click to Play Again.";
      gameTxt.textAlign = "center";
      gameTxt.x = canvas.width / 2;
      gameTxt.y = canvas.height / 4;
      stage.addChild(gameTxt);
      end();
      canvas.onclick = handleClick;
  }
  
  function handleClick() {
      canvas.onclick = null;
      hero.visible=true;
      hero.x = 80;
      hero.y = 450;
      door.visible=true;
      key.visible=true;
      stage.removeChild(gameTxt);
      play=true;
  }
  function collisionHero (xPos, yPos,
  Radius){
      var distX = xPos - hero.x;
      var distY = yPos - heroCenter;
      var distR = Radius + 20;
      if (distX * distX + distY * distY &lt;=
  distR * distR){
      return true;
  }
  }
  function jump(){
      if (jumping == false &amp;&amp; inAir == false){
          if (dir=="right"){
              hero.gotoAndStop("jump");
          }else{
              hero.gotoAndStop("jump_h");
          }
          hero.y -=20;
          vy = -25;
          jumping = true;
          keyDn=false;
      }
  }
  function resetCrates(crt) {
      crt.x = canvas.width * Math.random()|0;
      crt.y = 0 - Math.random()*500;
      crt.speed = (Math.random()*5)+8;
  }
  
  
  
  
  
  &lt;/script&gt;
  
  &lt;title&gt;Game&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body onload="init();"&gt;
  
  
  
  
  &lt;canvas id="canvas" width="960px" height="600px"&gt;&lt;/canvas&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Adding the js files as listed in the header.
  Platform.js:</p>
  
  <pre><code>     (function(window) {
      function Platform(w,h) {
          this.width = w;
          this.height = h;
          this.initialize();
      }
  
  Platform.prototype = new createjs.Container ();
  Platform.prototype.platformBody = null;
  Platform.prototype.Container_initialize = Platform.prototype.initialize;
  
  Platform.prototype.initialize = function() {
      this.Container_initialize();
      this.platformBody = new createjs.Shape();
      this.addChild(this.platformBody);
      this.makeShape();
  }
  
  Platform.prototype.makeShape = function() {
      var g = this.platformBody.graphics;
      g.drawRect(0,0,this.width,this.height);
  }
  window.Platform = Platform;
  }(window));
  </code></pre>
  
  <p>Hero.js</p>
  
  <pre><code>(function(window) {
      function Hero(imgHero) {
          this.initialize(imgHero);
      }
  
  Hero.prototype = new createjs.BitmapAnimation();
  Hero.prototype.Animation_initialize = Hero.prototype.initialize;
  Hero.prototype.initialize = function(imgHero) {
      var spriteSheet = new createjs.SpriteSheet({
  
  images: [imgHero], 
  frames: {width: 60, height: 85, regX: 29, regY: 80}, animations: {
      walk: [0, 19, "walk"],
      idle: [20, 20],
      jump: [21, 21] } });
  
  SpriteSheetUtils
  .addFlippedFrames(spriteSheet, true, false, 
  false);
  this.Animation_initialize(spriteSheet);
  this.gotoAndStop("idle");
  }
  window.Hero = Hero;
  }(window));
  </code></pre>
  
  <p>Crate.js</p>
  
  <pre><code>(function(window) {
      function Crate() {
          this.initialize();
      }
  
  Crate.prototype = new createjs.Container();
  Crate.prototype.img = new Image();
  Crate.prototype.Container_initialize =
  Crate.prototype.initialize;
  Crate.prototype.initialize = function() {
  
  this.Container_initialize();
  var bmp = new createjs.Bitmap("img/crate.jpg");
  bmp.x=-20;
  bmp.y=-20;
  this.addChild(bmp);}
  window.Crate = Crate;
  }(window));
  </code></pre>