0

I'm trying to create a moveable character in my canvas game, but for some reason it's not working, and I don't understand why. 

// This will request which browser!
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

// Setup of the game

// Create the canvas from the given element in the HTML
var canvas = document.getElementById("main"),
// Give the canvas 2D context
    context = canvas.getContext("2d"),

// Set the canvas with boundaries
// to allow the user not to go outside
// the boundaries
    height = 360,
    width = 600,



// Create the player giving some config
    player = {
  // this is where the player will start
      x : 50,
      y : height - 30,
      height : 30,
      width : 30
    },
    keys = [];

canvas.height = height;
canvas.width = width; 

var imgRepo = new function() {

  this.player = new Image();
  this.background = new Image();

  this.player.src = "../img/kangaroo.jpg";
  this.background.src = "../img/background.png";
}

function processUserInput() {

  // W
  if (keys[87]) {
    player.y = player.y - 10;
  }
  // S
  if (keys[83]){
    player.y = player.y + 10;
  }
  // A
  if (keys[65]) {
    player.x = player.x - 10;
  }
  // D
  if (keys[68]) {
    player.x = player.x + 10;
  }


  context.clearRect(0,0,width,height);
  context.fillStyle = "red";
  context.fillRect(player.x, player.y, player.width, player.height);

  requestAnimationFrame(processUserInput);
  requestAnimationFrame(drawImg);

}



document.body.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});

document.body.addEventListener("keyup", function(e) {
    keys[e.keyCode] = false;
});

window.addEventListener("load",function(){
    processUserInput();
});

I have the ability to control the block drawn with "fillRect" so I'm confusing as to why I can't just add an image instead of the rectangle. Any help would be greatly appreciated thanks.

Here's my HTML if anyone is interested. 

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title> Jump Block </title>
  <link rel="stylesheet" property="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<header>
  <br>
  Press Tab to Begin, AWSD/ Arrow keys to move, and space to jump
  <br>
</header>

  <canvas id="main" width= "600" height="360" style="border: 1px solid green" tabindex="0" id="main">
    Your browser doesn't support HTML5.
  </canvas>

    <script src="js/game.js">
    </script>

</body>
</html>
Greg Sharpe
  • 1
  • 3
  • You need to wait for the image to load before you can draw it. http://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/12711/loading-and-displaying-an-image#t=201607301707084804396 will show you how. – Blindman67 Jul 30 '16 at 17:08
  • You need to give `kangaroo.jpg` and 'background.png` time to fully load before you try drawing them onto the canvas. You can use the `image.onload` callback property to give them time to load. – markE Jul 30 '16 at 17:08
  • @Blindman67 . Oops! I accidently stepped on your toes by dup-ing while you were linking to the Docs. Sorry! Do you know if a Doc can be used as a closing-duplicate? BTW, I'm having a fit trying to understand what Docs are supposed to be. I had several hours of work blown away by a moderator with "immediate kill" capability :-// – markE Jul 30 '16 at 17:20
  • 1
    @markE you didn't step on my toes. The docs are a lesson in frustration.Getting pulled on possible future ES standards. I edit an example to correct errors/omission, gets accepted, next day back to the original. There are sock puppets reviewing, and way to much nitpicking, ES6 is still drying yet ES-262 is out of date???? I noticed people are starting to use HTML comments to display "private property keep out" signs, well thinly veiled metaphors to that effect. Just keep at it, I test the 3 major browsers if it works on all 3, that's the standard Not ES8, and I happily resubmit till it sticks – Blindman67 Jul 30 '16 at 19:01
  • @Blindman67. LOL! "private property keep out" – markE Jul 30 '16 at 19:06
  • 1
    @markE I added JS language tag to all the code snippets so that they would be correctly formatted.. Nothing more – Blindman67 Aug 10 '16 at 18:26
  • @Blindman67. About Dragging Topic: Yep, separating event-IO from drag calculations & rendering is a good idea -- I certainly do that in my production apps. But I'm uncertain about our target audience: 1. A beginner trying to learn new concepts who might struggle (or be distracted) by learning dragging plus an event-handling-infrastructure. 2. A pro who understands the need for event separation and needs a plug & play drag system. Which audience do you want to target? I'm open to either audience -- or suggest a different audience? – markE Aug 11 '16 at 19:40
  • @Blindman67. BTW, have you discovered how to communicate on Doc issues other than tossing comments into random Q&A. Surely there must be a better collaboration method. :-// – markE Aug 11 '16 at 19:41
  • @markE I can add a new example something like Advance UI and extend the demo to give fabric.js type handlebars and more. Will have a think about it. As for communication maybe we can create a github repository linked to the topic? – Blindman67 Aug 11 '16 at 19:48

0 Answers0