<div class="container">
  <h3>🐍 SNAKE GAME 🐍</h3>
  <p> 🎯objective: Eat the grey square <br>
   💀DONT hit the red borders or the snake body </p>
</div>

body {
  background:rgb(242,242,242);
  font-family: 'Press Start 2P', cursive;
  text-align:center;
}
canvas {
  display: block;
  margin: 2% auto;
  box-shadow: 1px 3px 36px 5px rgba(0,0,0,0.75);
  border: 5px solid red;
}

var s;
var scl = 20;
var food;

function setup(){
  createCanvas(600,600);
  s = new Snake();
  //delay the movement of the square for arcade effect
  frameRate(10);
  pickLocation();
}

function pickLocation() {
  var cols = floor(width/scl);
  var rows = floor(height/scl);
  food = createVector(floor(random(cols)), floor(random(rows)));
  food.mult(scl);
}


function draw() {
 background(0);
  s.death();
  s.update();
  s.show();
  
  if (s.eat(food)) {
   pickLocation();
  }
  
  // food:
  fill(242,242,242);
  rect(food.x, food.y, scl, scl);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    s.dir(0, -1);
  } else if (keyCode === DOWN_ARROW){
    s.dir(0, 1);
  } else if (keyCode === RIGHT_ARROW){
    s.dir(1, 0);
  } else if (keyCode === LEFT_ARROW){
    s.dir(-1, 0);
  }
}

function Snake() {
  this.x = 0;
  this.y = 0;
  this.xspeed = 1;
  this.yspeed = 0;
  this.total = 0;
  this.tail = [];
  
  this.dir = function(x, y){
    this.xspeed = x;
    this.yspeed = y;
    
  }
  
  this.eat = function(pos) {
    var d = dist(this.x, this.y, pos.x, pos.y);
    if (d < 4) {
      this.total++;
      return true;
    } else {
      return false;
    }
  }
  
  this.death = function() {
    for (var i = 0; i < this.tail.length; i++) {
      var pos = this.tail[i];
      var d = dist(this.x, this.y, pos.x, pos.y);
      if (d < 1) {
        this.total = 0;
        this.tail = [];
      }
    }
  }
  
  this.update = function () {
    for (var i = 0; i < this.tail.length-1; i++) {
      this.tail[i] = this.tail[i+1];
    }
    this.tail[this.total-1] = createVector(this.x, this.y);
    
    this.x = this.x + this.xspeed*scl;
    this.y = this.y + this.yspeed*scl;
    //avoid snake to go out of canvas
    this.x = constrain(this.x, 0, width-scl);
    this.y = constrain(this.y, 0, height-scl);
  }
  
  this.show = function() {
    fill(1,254,0);
    for (var i = 0; i < this.total; i++){
     rect(this.tail[i].x,this.tail[i].y, scl, scl);
    } 
    rect(this.x, this.y, scl, scl);
  }
}