How to determine which images are moved by keys

Question

I am very new to javascript only been using it for a few weeks. I'm trying to make games from scratch just to learn the basics of how they work. I made a breakout from a tutorial and changed a few things like adding background images, music, and 10 levels. Learning how images work there is something I don't understand.

How does javascript know to move the paddle with the arrow keys. Why don't the bricks move accidentally? How is the paddle variable assigned to the bricks? I don't see anything in the code for the keys related to the paddle. The game only works online on a PC at Urbangamez.site

This is not how to ask questions here. Provide code examples. Ask a specific question about specific code. If there seems to be something happening automagically, then point out where you think it should be happening but isn't. People can't read your mind. — Alan, Dec 02 '17 at 01:34
document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false); function keyDownHandler(e) { if(e.keyCode == 39) { rightPressed = true; } else if(e.keyCode == 37) { leftPressed = true; } } function keyUpHandler(e) { if(e.keyCode == 39) { rightPressed = false; } else if(e.keyCode == 37) { leftPressed = false; } } — , Dec 02 '17 at 01:35
put that code in the question please. In the comments it's an unreadable mess - would _you_ like to have to try and understand it? — ADyson, Dec 02 '17 at 14:02

joopmicroop · Answer 1 · 2017-12-02T03:46:42.407

Normaly how this would work is by checking the boolean values of the key variables in the gameloop and thereby moving the paddle for each tick of the loop accordingly.

Let me first of all state that I wrote this with an html element but the same principal comes to using a canvas element. I have left some comments in the code for your reading pleasure.

// setup globals
var paddle = document.getElementById('paddle');
var rightPressed = false;
var leftPressed = false;

// add your key event listeners that you've pasted in the comments.
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
// you can find keycodes at the bottom of the page on:
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
function keyDownHandler(e) { 
  if(e.keyCode == 39) rightPressed = true; 
  else if(e.keyCode == 37) leftPressed = true; 
} 
function keyUpHandler(e) { 
  if(e.keyCode == 39) rightPressed = false; 
  else if(e.keyCode == 37) leftPressed = false; 
}

// let's do the loop-ti-loop
(function gameloop(timestamp) {

  // get the current left position string '0px' cut of the 'px' and convert into number
  var curXPosPaddle = Number(paddle.style.left.slice(0,-2));
  console.log('x:',curXPosPaddle);
  
  // if right key down add 1 to the current paddle left position 
  if(rightPressed && !leftPressed) 
    paddle.style.left = curXPosPaddle + 1 + 'px';
  // if left key down substract 1 from the current paddle left position
  if(leftPressed && !rightPressed)
    paddle.style.left = curXPosPaddle - 1 + 'px';
  
  // recall the loop again as soon as possible
  window.requestAnimationFrame(gameloop);
})()

#paddle{
  position: absolute;
  top:0px;
  left: 0px;
  width:40px;
  height:20px;
  background:red;
}
#txt{
  margin-top:30px;
}

<div id="paddle"></div>
<div id="txt">click here to activate the example window<br> afterwards, Press Left or Right key</div>

Now you can start programming the boundries for the paddle to not cross the edges of the screen :)

How to determine which images are moved by keys

1 Answers1