bug that looks like it shouldn't exist.

[Vincent-Christianson]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.9.4

Web browser and version

126.0.6478.266 (Official Build) (64-bit)

Operating system

CromeOS 126.0.6478.266 (Official Build) (64-bit)

Steps to reproduce this

Steps:

1.copy paste
2.hit play
3. see the snake game load but the erer flash and the game stop.

Snippet:

/*
 * @name Snake game
 * @arialabel Snake game where a snake represented by a long white oval on a black background is controlled by the i,j,k,l keys. Users use these keys to move the snake to not hit the sides of the window and to eat a small white circle which represents food and allows the snake to grow.
 * @description The famous snake game! Once you click run, click anywhere
 * inside the black area, and control the snake using i j k and l. Don't let
 * the snake hit itself or the wall!<br>
 * Example created by <a href='https://github.com/prashantgupta24' target='_blank'>Prashant Gupta
 */

// the snake is divided into small segments, which are drawn and edited on each 'draw' call
let numSegments = 10;
let direction = "right";

const xStart = 0; //starting x coordinate for snake
const yStart = 220; //starting y coordinate for snake
const diff = 10;

let xCor = [];
let yCor = [];

let xFruit = 0;
let yFruit = 0;
let scoreElem;

let updown = 0;
let leftright = 0;
let snakeHeadX;
let snakeHeady;

function setup() {
  scoreElem = createDiv("Score = 0");
  scoreElem.position(20, 20);
  scoreElem.id = "score";
  scoreElem.style("color", "white");

  createCanvas(500, 500);
  frameRate(15);
  stroke(255);
  strokeWeight(10);
  updateFruitCoordinates();

  for (let i = 0; i < numSegments; i++) {
    xCor.push(xStart + i * diff);
    yCor.push(yStart);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < numSegments - 1; i++) {
    line(xCor[i], yCor[i], xCor[i + 1], yCor[i + 1]);
  }
  updateSnakeCoordinates();
  checkGameStatus();
  checkForFruit();
}

/*
 The segments are updated based on the direction of the snake.
 All segments from 0 to n-1 are just copied over to 1 till n, i.e. segment 0
 gets the value of segment 1, segment 1 gets the value of segment 2, and so on,
 and this results in the movement of the snake.

 The last segment is added based on the direction in which the snake is going,
 if it's going left or right, the last segment's x coordinate is increased by a
 predefined value 'diff' than its second to last segment. And if it's going up
 or down, the segment's y coordinate is affected.
*/
function updateSnakeCoordinates() {
  updateai();
  for (let i = 0; i < numSegments - 1; i++) {
    xCor[i] = xCor[i + 1];
    yCor[i] = yCor[i + 1];
  }
  switch (direction) {
    case "right":
      xCor[numSegments - 1] = xCor[numSegments - 2] + diff;
      yCor[numSegments - 1] = yCor[numSegments - 2];
      break;
    case "up":
      xCor[numSegments - 1] = xCor[numSegments - 2];
      yCor[numSegments - 1] = yCor[numSegments - 2] - diff;
      break;
    case "left":
      xCor[numSegments - 1] = xCor[numSegments - 2] - diff;
      yCor[numSegments - 1] = yCor[numSegments - 2];
      break;
    case "down":
      xCor[numSegments - 1] = xCor[numSegments - 2];
      yCor[numSegments - 1] = yCor[numSegments - 2] + diff;
      break;
  }
}

/*
 I always check the snake's head position xCor[xCor.length - 1] and
 yCor[yCor.length - 1] to see if it touches the game's boundaries
 or if the snake hits itself.
*/
function checkGameStatus() {
  if (
    xCor[xCor.length - 1] > width ||
    xCor[xCor.length - 1] < 0 ||
    yCor[yCor.length - 1] > height ||
    yCor[yCor.length - 1] < 0 ||
    checkSnakeCollision()
  ) {
    noLoop();
    const scoreVal = parseInt(scoreElem.html().substring(8));
    scoreElem.html("Game ended! Your score was : " + scoreVal);
  }
}

/*
 If the snake hits itself, that means the snake head's (x,y) coordinate
 has to be the same as one of its own segment's (x,y) coordinate.
*/
function checkSnakeCollision() {
  snakeHeadX = xCor[xCor.length - 1];
  snakeHeadY = yCor[yCor.length - 1];
  for (let i = 0; i < xCor.length - 1; i++) {
    if (xCor[i] === snakeHeadX && yCor[i] === snakeHeadY) {
      return true;
    }
  }
}

/*
 Whenever the snake consumes a fruit, I increment the number of segments,
 and just insert the tail segment again at the start of the array (basically
 I add the last segment again at the tail, thereby extending the tail)
*/
function checkForFruit() {
  point(xFruit, yFruit);
  if (xCor[xCor.length - 1] === xFruit && yCor[yCor.length - 1] === yFruit) {
    const prevScore = parseInt(scoreElem.html().substring(8));
    scoreElem.html("Score = " + (prevScore + 1));
    xCor.unshift(xCor[0]);
    yCor.unshift(yCor[0]);
    numSegments++;
    updateFruitCoordinates();
  }
}

function updateFruitCoordinates() {
  /*
    The complex math logic is because I wanted the point to lie
    in between 100 and width-100, and be rounded off to the nearest
    number divisible by 10, since I move the snake in multiples of 10.
  */

  xFruit = floor(random(10, (width - 100) / 10)) * 10;
  yFruit = floor(random(10, (height - 100) / 10)) * 10;
}
function updateai() {
  if (snakeHeadx > xFruit) {
    leftright = 1;
  }
  if (snakeHeadx < xFruit) {
    leftright = 2;
  }
  if (snakeHeadx == xFruit) {
    leftright = 0;
  }
  if (yFruit > snakeHeady) {
    updown = 1;
  }
  if (yFruit < snakeHeady) {
    updown = 2;
  }
  if (yFruit == snakeHeady) {
    updown = 0;
  }
  console.log(clear)
  console.log(updown);
  console.log(leftright);
  let tmp = updown*leftright;
  console.log(tmp)
  /*switch (tmp) {
    case -1:
      if (direction !== "right") {
        direction = "left";
      }
      break;
    case 1:
      if (direction !== "left") {
        direction = "right";
      }
      break;
    case -1:
      if (direction !== "down") {
        direction = "up";
      }
      break;
    case 1:
      if (direction !== "up") {
        direction = "down";
      }
      break;
  }
*/  
}
function keyPressed() {
  switch (keyCode) {
    case 74:
      if (direction !== "right") {
        direction = "left";
      }
      break;
    case 76:
      if (direction !== "left") {
        direction = "right";
      }
      break;
    case 73:
      if (direction !== "down") {
        direction = "up";
      }
      break;
    case 75:
      if (direction !== "up") {
        direction = "down";
      }
      break;
  }
}

[karandeepkalra]

Hey @Vincent-Christianson,
You have defined wrong variable(naming). In your updateai() function, you are using snakeHeadx (lowercase x) and snakeHeady — but you actually defined them earlier as snakeHeadX (capital X) and snakeHeadY (capital Y).

[Vincent-Christianson]

why is it the simple erers that trip me up. maybe because I am coming from Java and the windows os.

[SableRaf]

Hi @Vincent-Christianson and thanks for your question! If you’re looking for help transitioning from Processing to p5.js or would like feedback on your projects, you might get more support on the forum or Discord, where more people are available to help. This repository is mainly used for tracking bugs with the p5.js library itself.

And if you're interested in contributing to p5.js, you can find more information here: https://p5js.org/contribute/