let resolution = r = 20;

let h = 400;

let w = 500;

let cols = h / resolution; 

let rows = w / resolution;

​

let apple;

let snake;

​

function setup() {

  createCanvas(w + padding, h + padding);

  apple = new Apple();

  snake = new Snake();

  frameRate(10);

}

​

function draw() {

  // Environment

  background("#809584");

  rectMode(CENTER);

  stroke("#443d2b");

  noFill();

  strokeWeight(3);

  rect(width/2,height/2,width-padding, height-padding);

  // Debug

  strokeWeight(1);

  stroke("#5f6845");

  for(let i = 0; i < rows; i++){

      for(let j = 0; j < cols; j++){

        drawSquare(i,j)

    }

  }

  // Gen Apple

  apple.display();

  snake.update();

}

​

function drawSquare(x,y){

  rectMode(CORNER);

  rect(p/2+x*r, p/2+y*r, r,r);

}

​

class Apple{

  constructor(){

    this.pos = createVector(int(random(0,rows)), int(random(0,cols)));

    console.log(this.pos);

  }

  display(){

    fill("red");

    // circle(this.pos.x*r,this.pos.y*r,10)

    let r3 = r/3;

    noStroke();

    rect(p/2+this.pos.x*r + r3, p/2+this.pos.y*r, r3,r3);

    rect(p/2+this.pos.x*r, p/2+this.pos.y*r + r3, r3,r3);

    rect(p/2+this.pos.x*r + 2*r3, p/2+this.pos.y*r + r3, r3,r3);

    rect(p/2+this.pos.x*r + r3, p/2+this.pos.y*r+2*r3, r3,r3);

  }

}

​

class Snake{

  constructor(){

    this.length = 2;

    this.pos = [createVector(int(rows/2)-1, int(cols/2)), 

                createVector(int(rows/2), int(cols/2))];

    this.heading = createVector(1,0);

    this.alive = true;

  }

  update(){

    this.turn();

    this.move(this.pos, this.heading);

    this.display();

  }

  display(){

    for(let i = 0; i < this.pos.length ; i++){

      drawSquare(this.pos[i].x, this.pos[i].y);

    }

  }

  move(pos,heading){

    if(this.alive){

      // calculate new position

      let newPos = p5.Vector.add(pos[pos.length-1],heading);

      // check if new position is valid

      if(this.checkIfDead(newPos)){

        this.alive = false;

        console.log("game over")

      }

      // update position

      else{ 

        pos.splice(0,1) // remove last square

        pos.push(newPos);

      }

    }

  }

  turn(){

      // calculate new position

      let newPos = p5.Vector.add(this.pos[this.pos.length-1],this.heading);

      // check if new position is valid or need to turn

      if(this.checkIfDead(newPos)){

        let newPos2;

        let newHeading;

        // Go left first

          if(this.heading.x == 0){ newHeading = createVector(1,0); } // is it vertical

          if(this.heading.y == 0){ newHeading = createVector(0,1); } // is it horizontal

          newPos2 = p5.Vector.add(this.pos[this.pos.length-1],newHeading);

          if(!this.checkIfDead(newPos2)){

            this.heading = newHeading;

            return true;

          }

         // Go right second

          if(this.heading.x == 0){ newHeading = createVector(-1,0); } // is it vertical

          if(this.heading.y == 0){ newHeading = createVector(0,-1); } // is it horizontal

          newPos2 = p5.Vector.add(this.pos[this.pos.length-1],newHeading);

          if(!this.checkIfDead(newPos2)){

            this.heading = newHeading;

            return true;

          }

      }

  }

  checkIfDead(p){

    if(this.checkIfWallCollide(p)){ return true; }

    else if(this.checkIfSelfCollide(p)){ return true; }

    else { return false; }

  }

  checkIfWallCollide(p){

    if(p.x >= rows || p.x < 0 || p.y >= cols || p.y < 0){

      return true;

    }

    else{

      return false;

    }

  }

  checkIfSelfCollide(p){

    let l = this.pos.length - 1;

    for(let i = 0; i < l; i++){

      if(p.x == this.pos[i].x && p.y == this.pos[i].y){

        return true;

      }

    }

    return false;

  }

}

​

​