Question

83

Javascript/HTML5 - Making a canvas animation using WASD to move around a rectangle. Trouble implementing A and W keys

rated 0 times [ 90] [ 7] / answers: 1 / hits: 16929 / 12 Years ago, thu, january 17, 2013, 12:00:00

I'm making a simple canvas where the user uses WASD to move a rectangle up, left, down, right, respectively. The animation works fine for S and D keys, but when I tried to do the a key it doesn't work, and I'm not sure why. Below is my code.

//event listener

window.addEventListener(keydown, onKeyDown, false);

window.addEventListener(keyup, onKeyUp, false);



function onKeyDown(event){

  var keyCode = event.keyCode;

  switch(keyCode){

    case 68:  //d

        keyD = true;

    break;

    case 83:  //s

        keyS = true;

    break;

    case 63:  //a

        keyA = true;

    break;

  }

}

function onKeyUp(event){

  var keyCode = event.keyCode;

  switch(keyCode){

    case 68:  //d

        keyD = false;

    break;

    case 83:  //s

        keyS = false;

    break;

    case 63: //a

        keyA = false;

    break;

  }

}



//neccessary variables

var tickX = 10;

var tickY = 10;



var keyW = false;

var keyA = false;

var keyS = false;

var keyD = false;



//main animation function

function drawStuff(){

window.requestAnimationFrame(drawStuff);

var canvas = document.getElementById(myCanvas);

var c = canvas.getContext(2d);



c.clearRect(0,0,500,500);

c.fillStyle = blue;

c.fillRect(tickX,tickY,100,100);



if(keyD == true){

    tickX+=5;

}

if(keyS == true){

    tickY+=5;

}

if(keyA == true){

    tickX--;

}

  }

  window.requestAnimationFrame(drawStuff);

Is this a problem with decrementing tickX? Any help is appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

oliverkarle

Add To Favorites

Follow

Total Points: 96

Total Questions: 71

Total Answers: 105

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

answered 12 Years ago kinsley · Accepted Answer

You are missing some of the case statements that you need. I believe some of your case numbers are also incorrect. Try this runnable snippet:

(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();



//event listener

window.addEventListener(keydown, onKeyDown, false);

window.addEventListener(keyup, onKeyUp, false);



function onKeyDown(event) {

  var keyCode = event.keyCode;

  switch (keyCode) {

    case 68: //d

      keyD = true;

      break;

    case 83: //s

      keyS = true;

      break;

    case 65: //a

      keyA = true;

      break;

    case 87: //w

      keyW = true;

      break;

  }

}



function onKeyUp(event) {

  var keyCode = event.keyCode;



  switch (keyCode) {

    case 68: //d

      keyD = false;

      break;

    case 83: //s

      keyS = false;

      break;

    case 65: //a

      keyA = false;

      break;

    case 87: //w

      keyW = false;

      break;

  }

}



//neccessary variables

var tickX = 10;

var tickY = 10;



var keyW = false;

var keyA = false;

var keyS = false;

var keyD = false;



//main animation function

function drawStuff() {

  window.requestAnimationFrame(drawStuff);

  var canvas = document.getElementById(myCanvas);

  var c = canvas.getContext(2d);



  c.clearRect(0, 0, 800, 800);

  c.fillStyle = blue;

  c.fillRect(tickX, tickY, 100, 100);



  if (keyD == true) {

    tickX += 1;

  }

  if (keyS == true) {

    tickY += 1;

  }

  if (keyA == true) {

    tickX--;

  }

  if (keyW == true) {

    tickY--;

  }

}

window.requestAnimationFrame(drawStuff);

<!DOCTYPE html>

<html>

<head></head>

<body>

  <canvas id=myCanvas width='800' height='800'></canvas>

</body>

</html>