Javascript issue

JavaScript
1

Hi so i’m working on creating a snake game and ive created an if statement so when the head of the snake (snakeX && snakeY) come into contact with foodX && foodY it’s supposed to randomly change the position of the food. It’s not working. What am I doing wrong?

let foodX, foodY;
let snakeX = 5,
  snakeY = 10;
let velocityX = 0,
  velocityY = 0;

const changeFoodPosition = () => {
  // Passing a random 0 - 30 value as food position
  foodX = Math.floor(Math.random() * 30) + 1;
  foodY = Math.floor(Math.random() * 30) + 1;
};

const changeDirection = (e) => {
  //Changing velocity value of Event (e) Arrow Keys
  if (e.key === "ArrowUp") {
    velocityX = 0;
    velocityY = -1;
  } else if (e.key === "ArrowDown") {
    velocityX = 0;
    velocityY = 1;
  } else if (e.key === "ArrowLeft") {
    velocityX = -1;
    velocityY = 0;
  } else if (e.key === "ArrowRight") {
    velocityX = 1;
    velocityY = 0;
  }
};

const initGame = () => {
  let htmlMarkup = `<div class='food' style="grid-area: ${foodY} / ${foodY}"></div>`;

  // Changing food position if snake head overlaps food
  if (snakeX === foodX && snakeY === foodY) {
    changeFoodPosition();
  }
1 Like
2

Where is the code that updates the DOM?

The variables need to be reevaluated after they change and the DOM needs to be updated. They are not magic state variables that cause re-renders you have to re-render yourself by calling whatever code updates the DOM.

I might suggest using custom properties

Custom properties example

3

They’re called at the bottom. changeFoodPosition, setInterval, changeDirection and initGame is called at the bottom i just messed up and didnt post all the code like i thought i had.

4 
const playBoard = document.querySelector(".play-board");

let foodX, foodY;
let snakeX = 5,
  snakeY = 10;
let velocityX = 0,
  velocityY = 0;

const changeFoodPosition = () => {
  // Passing a random 0 - 30 value as food position
  foodX = Math.floor(Math.random() * 30) + 1;
  foodY = Math.floor(Math.random() * 30) + 1;
};

const changeDirection = (e) => {
  //Changing velocity value of Event (e) Arrow Keys
  if (e.key === "ArrowUp") {
    velocityX = 0;
    velocityY = -1;
  } else if (e.key === "ArrowDown") {
    velocityX = 0;
    velocityY = 1;
  } else if (e.key === "ArrowLeft") {
    velocityX = -1;
    velocityY = 0;
  } else if (e.key === "ArrowRight") {
    velocityX = 1;
    velocityY = 0;
  }
};

const initGame = () => {
  let htmlMarkup = `<div class='food' style="grid-area: ${foodY} / ${foodY}"></div>`;

  // Changing food position if snake head overlaps food
  if (snakeX === foodX && snakeY === foodY) {
    changeFoodPosition();
  }

  //Updating snake head position based on current velocity
  snakeX += velocityX;
  snakeY += velocityY;

  htmlMarkup += `<div class='head' style="grid-area: ${snakeY} / ${snakeX}"></div>`;
  playBoard.innerHTML = htmlMarkup;
};

changeFoodPosition();
setInterval(initGame, 125);
document.addEventListener("keydown", changeDirection);

The DOM doesn’t change right when i made the if statement at //changing food position if snake head overlaps food. I JUST DON’T KNOW what happened.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.