My key down handler function isn't working

Gitsume 0
Viewed 25

The problem that im having is that the dog isn't moving, its supposed to go left and right but as i said before, it doesnt respond to key presses. Also it would be really nice if someone told me how to make it stop at the bottom and not keep moving off the canvas. Thank you!

var ctx = myCanvas.getContext("2d");

var x_pos = 0;
var y_pos = 0;
var MyImg = new Image();
MyImg.src = "https://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/96/22215-dog-icon.png";

function MyTimer() {
  ctx.clearRect(0, 0, myCanvas.width, 456);
  y_pos = y_pos + 1;
  ctx.drawImage(MyImg, 89, y_pos);

  ctx.font = "57px Arial";
  ctx.fillStyle = "GainsBoro"
  ctx.fillText("Myverrynicename", 10, 250)
}

function MyKeyDownHandler(MyEvent) {
  if (MyEvent.keyCode == 39 && x_pos + MyImg.width < myCanvas.width) {
    x_pos = x_pos + 7;
  }
  if (MyEvent.keyCode == 37 && x_pos > 0) {
    x_pos = x_pos - 7;
  }
}

setInterval(MyTimer, 43);
addEventListener("keydown", MyKeyDownHandler);
<HTML>

<head>
  <title> MD2 </title>
</head>

<body>
  <canvas id=myCanvas width=456 height=456 style="background-color: green;"> </canvas>
</body>

</html>

javascript
2 Answers

You never use your x_pos

var ctx = myCanvas.getContext("2d");

var x_pos = 0;
var y_pos = 0;
var MyImg = new Image();
MyImg.src = "https://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/96/22215-dog-icon.png";

function MyTimer() {
  ctx.clearRect(0, 0, myCanvas.width, 456);
  y_pos = y_pos + 1;
  ctx.drawImage(MyImg, x_pos, y_pos);

  ctx.font = "57px Arial";
  ctx.fillStyle = "GainsBoro"
  ctx.fillText("Myverrynicename", 10, 250)
}

function MyKeyDownHandler(MyEvent) {
  if (MyEvent.keyCode == 39 && x_pos + MyImg.width < myCanvas.width) {
    x_pos = x_pos + 7;
  }
  if (MyEvent.keyCode == 37 && x_pos > 0) {
    x_pos = x_pos - 7;
  }
}

setInterval(MyTimer, 43);
addEventListener("keydown", MyKeyDownHandler);
<HTML>

<head>
  <title> MD2 </title>
</head>

<body>
  <canvas id=myCanvas width=456 height=456 style="background-color: green;"> </canvas>
</body>

</html>

Konrad Linkowski0

Not only do you need to use your x_pos variable, but you are starting the timer immediately so there's no need to press anything. The setInterval() should really be a setTimeout() that makes a recursive function call.

// Get DOM references correctly, not by just using the element ID in JavaScript.
// You should use one of the many DOM query methods to get your reference.
var ctx = document.getElementById("myCanvas").getContext("2d");

var x_pos = 0;
var y_pos = 0;
var MyImg = new Image();
MyImg.src = "https://icons.iconarchive.com/icons/google/noto-emoji-animals-nature/96/22215-dog-icon.png";

addEventListener("keydown", MyKeyDownHandler);

function MyKeyDownHandler(MyEvent) {
  if (MyEvent.keyCode == 39 && x_pos + MyImg.width < myCanvas.width) {
    x_pos += 7;
  }
  if (MyEvent.keyCode == 37 && x_pos > 0) {
    x_pos -= 7;
  }
  MyTimer();
}

function MyTimer() {
  ctx.clearRect(0, 0, myCanvas.width, 456);
  y_pos = y_pos + 1;
  ctx.drawImage(MyImg, x_pos, y_pos);
  ctx.font = "57px Arial";
  ctx.fillStyle = "GainsBoro"
  ctx.fillText("Myverrynicename", 10, 250);
  setTimeout(MyTimer, 43);
}
<html>
<head>
  <title> MD2 </title>
</head>
<body>
  <canvas id="myCanvas" width="456" height="456" style="background-color: green;"></canvas>
</body>
</html>

Scott Marcus0
Related