My key down handler function isn't working-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>