scale = 10,

  gridDimensions = [72 ,36];

let

  run,

  snake,

  food;

​

// Snake

class Snake {

  constructor() {

    this.body = [];

    this.direction = [0, 0];

    this.grow();

  }

  grow() {

    this.body.unshift(createVector((this.body[0]) ? this.body[0].x : 0, (this.body[0]) ? this.body[0].y : 0));

  }

  update() {

    this.body.push(createVector(this.body[this.body.length - 1].x + this.direction[0], this.body[this.body.length - 1].y + this.direction[1]));

    this.body.shift();

  }

  show() {

    for (const cell of this.body) {

      rect(cell.x * scale, cell.y * scale, scale, scale);

    }

  }

  eats(food) {

    for (const cell of this.body) {

      if (cell.x === food.x() && cell.y === food.y()) return true;

    }

    return false;

  }

  outOfGrid() {

    const head = this.body[this.body.length - 1];

    return head.x < 0 || head.y < 0 || head.x > gridDimensions[0] || head.y > gridDimensions[1];

  }

  setDirection(x, y) {

    this.direction = [x, y];

  }

}

​

class Food {

  constructor() {

    this.position = [];

    this.generate();

  }

  generate() {

    this.position = [Math.floor(Math.random() * gridDimensions[0]), Math.floor(Math.random() * gridDimensions[1])];

  }

  show() {

    rect(this.position[0] * scale, this.position[1] * scale, scale, scale);

  }

  x() {

    return this.position[0];

  }

  y() {

    return this.position[1];

  }

}

​

function setup() {

  run = true;

  snake = new Snake();

  food = new Food();

  frameRate(5);

  createCanvas(gridDimensions[0] * scale, gridDimensions[1] * scale);

  noStroke();

}

​

function draw() {

  if (run) {

    background(220);

    fill(17);

    snake.update();

    snake.show();

    fill(235, 240, 0);

    if (snake.eats(food)) {

      food.generate();

      snake.grow();

    }

    food.show();

    if (snake.outOfGrid()) run = false;

  }

  else {

    background(17);

  }

}

​

function keyPressed() {

  switch (keyCode) {

    case UP_ARROW:

      snake.setDirection(0, -1);

      break;

    case DOWN_ARROW:

      snake.setDirection(0, 1);

      break;

    case LEFT_ARROW:

      snake.setDirection(-1, 0);

      break;

    case RIGHT_ARROW:

      snake.setDirection(1, 0);

      break;

    case RETURN:

      snake.grow();

  }

}