A DOM-Based Snakes Game, Part II: Interacting with the User

A DOM-Based Snakes Game, Part II (5)

Interacting with the User

The user can turn the snake up, down, left, or right. He or she can use two different keys for each turn. The keys u and NumLock(8) are used to turn up, the keys n and NumLock(2) are used to turn down, the keys h and NumLock(4) are used to turn left, and the keys k and NumLock(6) are used to turn right.

The movement of the snake's head is characterized by two variables, headRowChange and headColumnChange. When the snake's head goes right, for example, headRowChange is 0 and headColumnChange is 1, because the head's row position does not change, while its column position increases by one every time interval. In fact, one of the these variables is always 0 while the other one is either 1 or -1.

Let's examine the handleClick() function:

function handleClick() {
  if (!(readyForNextEvent)) return;
  if (window.event.keyCode == asciiU || window.event.keyCode == asciiu ||
   window.event.keyCode == ascii8) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    if (headRowChange == 0  && snakeRowPos[1] != topBorder + 1) {
	  headRowChange = -1;
	  headColumnChange = 0;
	}
  }
  else if (window.event.keyCode == asciiD || window.event.keyCode == asciid ||
   window.event.keyCode == ascii2) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    if (headRowChange == 0  && snakeRowPos[1] != bottomBorder - 1) {
	  headRowChange = 1;
	  headColumnChange = 0;
	}
  }
  else if (window.event.keyCode == asciiR || window.event.keyCode == asciir ||
   window.event.keyCode == ascii6) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    if (headColumnChange == 0 && snakeColumnPos[1] != rightBorder - 1) {
      headRowChange = 0;
	  headColumnChange = 1;
	}
  }
  else if (window.event.keyCode == asciiL || window.event.keyCode == asciil ||
   window.event.keyCode == ascii4) {
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    if (headColumnChange == 0 && snakeColumnPos[1] != leftBorder + 1) {
      headRowChange = 0;
	  headColumnChange = -1;
	}
  }
}

The function includes four sections, one for each possible turn. We verify in each section that the turn is legal, i.e. is not heading towards one of the board's four border edges. For example, if the turn is up, we check that the snake's head goes horizontally and that its row position is not the top row (next to the border):

if (headRowChange == 0  && snakeRowPos[1] != topBorder + 1)

Once the validation check passes, the new head's movement is set:

headRowChange = -1;
headColumnChange = 0;

Similarly, other sections check for the validity of the other turns. Notice the first line. It checks that the variable readyForNextEvent is true. Every time the user presses a key we set it to false and we don't handle any new input until we complete handling the first key.

Produced by Yehuda Shiran and Tomer Shiran

Created: August 30, 1999
Revised: August 30, 1999

URL: https://www.webreference.com/js/column47/interact.html