Movement keys stop moving though key hasn't been released

Question

It was hard to properly summarize the problem I am facing. I am making a random game to try and learn js and I have run into a problem which affects the player movement badly.

I am coding on repl.it as it is easier for me so here is the link to the code so here is the link to the project https://repl.it/@PeterChaplin_Sm/Epic-game go onto script.js if it wasn't obvious enough:

//canvasy boi
function setup() {
 createCanvas(500, 400);
}

// rectangular boi records
var rect1 = {x: 5, y: 5, width: 50, height: 50, xspeed: 0, yspeed: 0}
var rect2 = {x: 20, y: 10, width: 50, height: 50, xspeed: 0, yspeed: 5}
var rect3 = {x: 90, y: 50, width: 50, height: 50, xspeed: 0, yspeed: 6}

function draw() {
 background(200);
 
  //rectangular bois
 fill(255, 0, 0);
 rect(rect1.x, rect1.y, rect1.width, rect1.height);

  fill(0, 0, 255);
 rect(rect2.x, rect2.y, rect2.width, rect2.height);
  
  fill(0, 0, 255);
 rect(rect3.x, rect3.y, rect3.width, rect3.height);
  //player movement
 if(rect1.x >= 0 && rect1.x + 50 <= 500) rect1.x += rect1.xspeed;
 if(rect1.y >= 0 && rect1.y + 50 <= 500) rect1.y += rect1.yspeed;
  //asteroids
  if(rect2.x >= 0 && rect2.x + 50 <= 500) rect2.x += rect2.xspeed;
 if(rect2.y >= 0 && rect2.y + 50 <= 500) rect2.y += rect2.yspeed;

  if(rect3.x >= 0 && rect3.x + 50 <= 500) rect3.x += rect3.xspeed;
 if(rect3.y >= 0 && rect3.y + 50 <= 500) rect3.y += rect3.yspeed;

  //JUST MAKE SURE THE FREAKIN RED THING DOESNT GO OUT OF THE FREAKIN BOX
  if(rect1.y <= 0) rect1.y = rect1.y+1;
  if(rect1.x <= 0) rect1.x = rect1.x+1; 
  if(rect1.y >= 350) rect1.y = rect1.y-5;
  if(rect1.x >= 450) rect1.x = rect1.x-1;

  //makes things fall woah
  if(rect2.y >= 400) rect2.y = -50;
  if(rect2.y < 0) rect2.y = rect2.y+rect2.yspeed;

  if(rect3.y >= 400) rect3.y = -50;
  if(rect3.y < 0) rect3.y = rect3.y+rect3.yspeed;

  if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.y + rect1.height > rect2.y) {
     text("Hit!", 250, 25)
  }

  if (rect1.x < rect3.x + rect3.width &&
   rect1.x + rect1.width > rect3.x &&
   rect1.y < rect3.y + rect3.height &&
   rect1.y + rect1.height > rect3.y) {
     text("Hit!", 250, 25)
  }
  
  fill(255,0,0)
  text(rect1.x, 25, 50)
  text(rect1.y, 25, 75)
  fill(0,0,255)
  text(rect2.x, 50, 50)
  text(rect2.y, 50, 75)


  //if(xpos >= cxpos && xpos <= cxpos+50 && ypos >= cypos && ypos <= cypos+50 || xpos+50 >= cxpos && xpos+50 <= cxpos+50 && ypos+50 >= cypos && ypos+50 <= cypos+50) text("DEAD", 25, 100) ;

  //if(deaths >= 1) text("you died you bad person lol", 25, 100), cyspeed=0; 
}

//keypresses
function keyPressed() {
 switch(keyCode) {
  case 37:
  case 65:
   rect1.xspeed = -4;
   break;
  case 39:
  case 68:
   rect1.xspeed = 4;
   break;
  case 38:
  case 87:
   rect1.yspeed = -4;
   break;
  case 40:
  case 83:
   rect1.yspeed = 4;
   break;
 }
}

//keyreleases
function keyReleased() {
 switch(keyCode) {
  case 37:
  case 65:
   rect1.xspeed = 0;
   break;
  case 39:
  case 68:
   rect1.xspeed = 0;
   break;
  case 38:
  case 87:
   rect1.yspeed = 0;
   break;
  case 40:
  case 83:
   rect1.yspeed = 0;
   break;
 }
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
  <script src="script.js"></script>
 </body>
</html>

If you run the game and then hold down the D key and then press A then release A, the character doesn't move to the left even though the D key is still pressed and I don't know how to implement something that fixes this, any help appreciated.

If anyone needs any more information about it comment what you need below.

I rate your comments in your code :P The issue is that when you assign a velocity on key pressed and let go, you are not reassigning the velocity of the key you are already holding down. — Kobe, May 16 '19 at 13:31

Marwane Boudriga · Answer 1 · 2019-06-05T13:46:43.677

1

One way to handle this would be like so (pseudo)

onkeydown (movement keys only) add key to the end of an array
onkeyup (movement keys only) remove key from array
if movement keys array length > 0, use the last element's value for movement

Using this method you would also be able to implement diagonal movement if you wanted.

edited Jun 05 '19 at 13:46

answered May 16 '19 at 13:29

Marwane Boudriga

181
1
12

Diagonal movement already works but i will try use something like that thanks :) – Peter Chaplin-Smith May 16 '19 at 13:51

Movement keys stop moving though key hasn't been released

1 Answers1