Html5 image displays on my laptop but not for others

1

I made a game using canvas from javascript on codepen and it works fine when I run it on my laptop. However, when other people try to open up the game from their laptops, the images do not show. The game itself is still running, and the objects exist, but the images aren’t there. I’m quite a noobie at coding and javascript so I have no idea what to do at this point, I’ve already tried searching for answers but couldn’t find any that helped. Any help would be greatly appreciated.

here is my code:

        var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 500;
document.body.appendChild(canvas);

var movementSpeed = 800;
var score = 0;
var time = 60;
var gameOver = false;
var facing,
    numImages = 3;

var enemyReady = false;
var pic3 = new Image();
pic3.onload = function() {
  enemyReady = true;
};
pic3.src = "http://i.imgur.com/JfJsrRS.jpg";

var heroReady = false;
var pic = new Image();
pic.onload = function() {
  heroReady = true;
};
pic.src = "http://i.imgur.com/B3t3BXW.jpg";

var dantatReady = false;
var pic2 = new Image();
pic2.onload = function() {
  dantatReady = true;
};
pic2.src = "http://i.imgur.com/xPnYCsI.jpg";

var storage = {
  "http://i.imgur.com/B3t3BXW.jpg": pic,
  "http://i.imgur.com/xPnYCsI.jpg": pic2,
  "http://i.imgur.com/JfJsrRS.jpg": pic3
};

function get(url) {
  return storage[url];
}

var player = {
  posX: canvas.width / 2 - 182,
  posY: canvas.height / 2 - 40,
  sprite: new Sprite("http://i.imgur.com/B3t3BXW.jpg", 132, 105)
};

var enemy = {
  posX: canvas.width / 2 + 62,
  posY: canvas.height / 2 - 40,
  sprite: new Sprite("http://i.imgur.com/JfJsrRS.jpg", 132, 105)
};

var dantats = [];

var keysDown = {};
addEventListener("keydown", function(pressed) {
  keysDown[String.fromCharCode(pressed.keyCode)] = true;
}, false);

addEventListener("keyup", function(pressed) {
  delete keysDown[String.fromCharCode(pressed.keyCode)];
}, false);

function Sprite(url, width, height) {
  this.url = url;
  this.width = width;
  this.height = height;
  this.life = 0;
  this.maxLife = 2;
}

Sprite.prototype.render = function(ctx) {
  if (dantatReady && heroReady && enemyReady) {
    ctx.drawImage(get(this.url), 0, 0, this.width, this.height);
  }
};

function renderEntities(list) {
  for (var i = 0; i < list.length; i++) {
    renderEntity(list[i]);
  }
}

function renderEntity(entity) {
  ctx.save();
  ctx.translate(entity.posX, entity.posY);
  entity.sprite.render(ctx);
  ctx.restore();
}

function render() {
  ctx.fillStyle = "rgb(5,157,44)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  renderEntities(dantats);
  renderEntity(player);
  renderEntity(enemy);

  ctx.fillStyle = "black";
  ctx.font = "24px Helvetica";
  ctx.textAlign = "left";
  ctx.textBaseline = "top";
  ctx.fillText("Dantats Eaten: " + score, 32, 32);
  ctx.textAlign = "right";
  ctx.fillText("Time Left: " + time, 750, 32);
}

function update(modifier) {
  if ("W" in keysDown) {
    facing = "N";
    player.posY -= movementSpeed * modifier;
    enemy.posY += movementSpeed * modifier;
  }
  if ("A" in keysDown) {
    facing = "W";
    player.posX -= movementSpeed * modifier;
    enemy.posX += movementSpeed * modifier;
  }
  if ("S" in keysDown) {
    facing = "S";
    player.posY += movementSpeed * modifier;
    enemy.posY -= movementSpeed * modifier;
  }
  if ("D" in keysDown) {
    facing = "E";
    player.posX += movementSpeed * modifier;
    enemy.posX -= movementSpeed * modifier;
  }

  checkCollision();
  checkBorder();
  if (time <= 0) {
    gameOver = true;
  }
}

function gg() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "white";
  ctx.font = "24px Helvetica";
  ctx.textAlign = "center";
  ctx.fillText("GAME OVER", canvas.width / 2 - 20, canvas.height / 2 - 20);
}

function checkBorder() {
  if (player.posX < -120) {
    player.posX = 800;
  } else if (player.posX > 800) {
    player.posX = -120;
  } else if (player.posY > 500) {
    player.posY = -100;
  } else if (player.posY < -100) {
    player.posY = 500;
  }

  if (enemy.posX < -120) {
    enemy.posX = 800;
  } else if (enemy.posX > 800) {
    enemy.posX = -120;
  } else if (enemy.posY > 500) {
    enemy.posY = -100;
  } else if (enemy.posY < -100) {
    enemy.posY = 500;
  }
}

function checkCollision() {
  for (var i = 0; i < dantats.length; i++) {
    if (player.posX <= dantats[i].posX + 96 &&
      player.posY <= dantats[i].posY + 72 &&
      dantats[i].posX <= player.posX + 127 &&
      dantats[i].posY <= player.posY + 102) {
      score++;
      dantats.splice(i, 1);
      i--;
    }
  }
  if (player.posX <= enemy.posX + 96 && player.posY <= enemy.posY + 102 && enemy.posX <= player.posX + 127 && enemy.posY <= player.posY + 102) {
    gameOver = true;
  }
}

var then = Date.now();

var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

function game() {
  if (!gameOver) {
    var now = Date.now();
    var delta = now - then;
    update(delta / 1000);
    render();
    then = now;
    requestAnimationFrame(game);
  } else {
    gg();
  }
}

function produce() {
  setTimeout(function() {
    requestAnimationFrame(produce);
    for (var i = 0; i < 5; i++) {
      dantats.push({
        posX: 50 + Math.random() * 650,
        posY: 50 + Math.random() * 350,
        sprite: new Sprite("http://i.imgur.com/xPnYCsI.jpg", 92, 75)
      });
    }
    console.log(dantatReady);
  }, 4000);

}

function timer() {
  setTimeout(function() {
    requestAnimationFrame(timer);
    time -= 1;
    for (var i = 0; i < dantats.length; i++) {
      dantats[i].sprite.life++;
      if (dantats[i].sprite.life >= dantats[i].sprite.maxLife) {
        dantats.splice(i, 1);
        i--;
      }
    }
  }, 1000);

}

ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "white";
  ctx.font = "24px Helvetica";
  ctx.textAlign = "center";
  ctx.fillText("Loading...", canvas.width / 2 - 20, canvas.height / 2 - 20);

init();

function init(){
game();
timer();
produce();
}
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like
3

Try setting all of those imgur links to use HTTPS instead of just HTTP.

5

when I switch it to https, I can’t see the images anymore either lol

6

Can you share a link to your CodePen?

7

Yeah, here’s the link to my game on codepen: http://codepen.io/Shenny/pen/Pbvyjd

8

Huh. I bet Imgur is blocking CodePen for whatever reason. I can see the images if I connect to your codepen via HTTPS.

1 Like
9

Wow, thanks man! I’ll look more into it.