Snake game (made with p5.js)

//this uses the p5 library; download it, or the editor here: http://p5js.org/download

function Body(pos_) {
  this.pos = createVector(pos_.x, pos_.y);
  this.rect1 = createVector(cellsize / 2 + 2 * cellsize * this.pos.x, cellsize / 2 + 2 * cellsize * this.pos.y);
  this.rect2 = createVector(this.rect1.x - cellsize * nextpos.x, this.rect1.y - cellsize * nextpos.y);

  this.display = function() {
    rect(this.rect1.x, this.rect1.y, cellsize + 1, cellsize + 1);
    if (snake[0] != this) {
      rect(this.rect2.x, this.rect2.y, cellsize + 1, cellsize + 1);
    }
  }
}

function Food(index) {
  this.pos = createVector(emptycells[index].x, emptycells[index].y);

  this.display = function() {
    this.fpos = createVector(cellsize / 2 + 2 * cellsize * this.pos.x, cellsize / 2 + 2 * cellsize * this.pos.y);
    ellipse(this.fpos.x, this.fpos.y, cellsize, cellsize);
  }
}

var fps = 6;
var gridsize = 21;
var gamemode = "MENU";
var cellsize, emptycells, snake, headpos, nextpos, foodIndex, food, direction, lock, space;
var grid = new Array(gridsize);

function setup() {
  createCanvas(600, 600);
  cellsize = width / gridsize / 2;
  headpos = createVector(0, 0);
  nextpos = createVector(0, 0);
  for (var i = 0; i < grid.length; i++) {
    grid[i] = new Array(grid);
  }
  resetFormat();
}

function resetFormat() {
  ellipseMode(CORNER);
  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  textSize(30);
  fill(255);
  noStroke();
}

function draw() {
  switch (gamemode) {
    case "MENU":
      loadMenu();
      break;
    case "SETUP":
      loadGame();
      break;
    case "PLAY":
      launchGame();
      break;
    case "END":
      die();
  }
}

function keyPressed() {
  if (gamemode == "SETUP" && keyCode > 36 && keyCode < 41) {
    gamemode = "PLAY";
    loop();
  }

  if (gamemode == "PLAY" && !lock) {
    lock = true;

    if (keyCode == 37 && direction != "R") {
      nextpos.set(-1, 0);
      direction = "L";
    }

    if (keyCode == 38 && direction != "D") {
      nextpos.set(0, -1);
      direction = "U";
    }

    if (keyCode == 39 && direction != "L") {
      nextpos.set(1, 0);
      direction = "R";
    }

    if (keyCode == 40 && direction != "U") {
      nextpos.set(0, 1);
      direction = "D";
    }
  }
}

function loadMenu() {
  background(0);
  fill(100);
  rectMode(CENTER);
  rect(width / 2, height / 2 - 5, 300, 80);
  fill(255);
  text("Welcome to Snake!", width / 2, height / 2 - 15);
  textSize(20);
  text("(press ENTER to start)", width / 2, height / 2 + 15);
  text("Made by Tsskyx", width / 2, height - 30);
  resetFormat();
  if (keyIsPressed && keyCode == ENTER) {
    gamemode = "SETUP";
  }
}

function loadGame() {
  lock = false;
  showtail = false;
  direction = null;
  emptycells = [];
  snake = [];
  headpos.set(floor(gridsize / 2), floor(gridsize / 2));
  nextpos.set(0, 0);
  snake.push(new Body(headpos));
  for (var i = 0; i < grid.length; i++) {
    for (var j = 0; j < grid.length; j++) {
      grid[i][j] = false;
      grid[snake[0].pos.x][snake[0].pos.y] = true;
      if (!grid[i][j]) {
        emptycells.push(createVector(i, j));
      }
    }
  }
  foodIndex = floor(random(emptycells.length));
  food = new Food(foodIndex);

  background(0);
  textSize(20);
  text("press any arrow key to begin", width / 2, height - 30);
  snake[0].display();
  food.display();
  resetFormat();
  noLoop();
}

function launchGame() {
  lock = false;
  headpos.add(nextpos);
  snake.push(new Body(headpos));
  if (headpos.x == food.pos.x && headpos.y == food.pos.y) {
    emptycells = [];
    for (var i = 0; i < grid.length; i++) {
      for (var j = 0; j < grid.length; j++) {
        grid[i][j] = false;
        for (var k = 0; k < snake.length; k++) {
          if (!offscreen()) {
            grid[snake[k].pos.x][snake[k].pos.y] = true;
          }
        }
        if (!grid[i][j]) {
          emptycells.push(createVector(i, j));
        }
      }
    }
    if (emptycells.length !== 0) {
      foodIndex = floor(random(emptycells.length));
      food.pos.set(emptycells[foodIndex].x, emptycells[foodIndex].y);
    }
  } else {
    snake.shift();
  }

  background(0);
  if (!space && snake.length > 4) {
    textSize(20);
    fill(255);
    text("Hint: Press and hold SPACEBAR for a speed boost.", width / 2, height - 30);
    resetFormat();
  }

  if (keyIsPressed && key == " ") {
    frameRate(3 * fps);
    space = true;
  } else {
    frameRate(fps);
  }
  for (i = 0; i < snake.length; i++) {
    snake[i].display();
  }
  food.display();

  for (k = 0; k < max(1, snake.length - 1); k++) {
    if (headpos.x == snake[k].pos.x && headpos.y == snake[k].pos.y && snake.length > 4 || offscreen() || emptycells.length === 0) {
      gamemode = "END";
      die();
    }
  }
}

function offscreen() {
  return headpos.x < 0 || headpos.x > gridsize - 1 || headpos.y < 0 || headpos.y > gridsize - 1;
}

function die() {
  frameRate(60);
  fill(100);
  rectMode(CENTER);
  rect(width / 2, height / 2, 200, 80);
  fill(255);
  text("You died!", width / 2, height / 2 - 13);
  textSize(20);
  text("Final score: " + (snake.length - 1), width / 2, height / 2 + 17);
  fill(0);
  rect(width / 2, height - 30, 300, 30);
  fill(255);
  text("(press ENTER to restart)", width / 2, height - 30);
  resetFormat();

  if (keyIsPressed && keyCode == ENTER) {
    gamemode = "SETUP";
  }
}