Tetris on Java Script key control problem

Question

I am having a problem when I move my key controls mainly the arrows on the keyboard. If the viewpoint is small enough it also moves the screen up and down because of the vertical side bar and the tetris piece at the same time. And I want the pieces to only move when I press the arrows. I am a novice at Js and I am not sure where to start to solve the problem, suggestions to where to start to look at?

Here is my Js script

document.addEventListener("keydown", CONTROL);

function CONTROL(event) {
    if (event.keyCode == 37) {
        p.moveLeft();
        dropStart = Date.now();
    }
    else if (event.keyCode == 38) {
        p.rotate();
    }
    else if (event.keyCode == 39) {
        p.moveRight();
        dropStart = Date.now();
    }
    else if (event.keyCode == 40) {
        p.moveDown(0);
    }
}

Hey Mttaho09, welcome to SO! Can you please reduce your code to only the relevant parts, so that potential responders can easily see what parts of the code you need help with or are relevant to the question? Thanks! — SalmonKiller, Mar 11 '19 at 23:31
You can call `event.preventDefault()` in the `CONTROL` function to stop the arrow keys scrolling the screen. Might annoy users though if they can't move the screen without using the mouse. (Edit to clarify - only do this inside the `if` statements - otherwise NO key, including things like F5 , will do as expected.) — Robin Zigmond, Mar 11 '19 at 23:33
@RobinZigmond Looks like it did what I wanted, looks like a good solution for now but Ill continue to look into the problem. Thanks — Mthao09, Mar 11 '19 at 23:40

score 0 · Answer 1 · answered Mar 11 '19 at 23:53

0

so the problem here is that is that it's sensing each key individually (I've had the same problem so you need a keymap to keep track off ALL the keys pressed like so:

var keys = [];

function keysPressed(e) {
  keys[e.keyCode] = true;

}

function keysReleased(e) {

keys[e.keyCode] = false;
 }

if(keys[37] === true){
//do stuff here
}
if(keys[38] === true){
//do stuff here
}

You may also want to use the proper identifier "==="

answered Mar 11 '19 at 23:53

Andrew Hansen

139
9

Sorry, I think I missed part of your question, if you only want your pieces to move when the arrow keys are pressed you need to disable the time function that's making your pieces fall at //movedown in your script – Andrew Hansen Mar 11 '19 at 23:57

Roko C. Buljan · Accepted Answer · 2019-03-12T00:11:42.970

Arrow keys moving the browser window is a default browser behavior.
Use event.preventDefault()
To listen only to arrow keys use if (k >= 37 && k <= 40) {, or the opposite: if (k < 37 || k > 40) return;

const p = { // JUST FOR THIS DEMO. You use Piece.prototype
    moveLeft()  { console.log("LEFT"); },
    rotate()    { console.log("ROTATE"); },
    moveRight() { console.log("RIGHT"); },
    moveDown()  { console.log("DOWN"); },
};

document.addEventListener("keydown", CONTROL);

function CONTROL(event) {
  const k = event.keyCode;
  
  if (k < 37 || k > 40) return; // Do nothing if was not an arrow key. Else Do:
  
  event.preventDefault();       // Prevent browser scroll on arrows
  if(k == 37 || k == 39) dropStart = Date.now(); // Only for left or right

  return {
    37: p.moveLeft,
    38: p.rotate,
    39: p.moveRight,
    40: p.moveDown
  }[k]();
}

html, body {min-height: 100%;}

Tetris on Java Script key control problem

2 Answers2