JSFiddle - React, Tailwind, and code Playground

by Arnauld Chevallier

HTML

<canvas id="myCanvas"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var snakeSize=10;
var snakeLength = 5;
var dist =2+snakeSize;
var dy=1;    
var direction = "up";

function game(){
  ctx.clearRect(0,0,canvas.width,canvas.height); 
  drawSnake()
}

function snakeBody(x,y){
  ctx.beginPath();
  ctx.fillStyle="red";
  ctx.fillRect(x*(dist),y*(dist),snakeSize,snakeSize);
  ctx.fill();
  ctx.closePath();}

function drawSnake(){
  var hX = snake[snake.length-1].x
  var hY = snake[snake.length-1].y

  switch(direction){
    case "down":
    hY++;
      break;
    case "up":{
      hY--;}
      break;
    case "right":
      hX++
      break;
    case "left":
      hX--;
      break;
  }

  var tail = snake.shift();
  tail.x=hX;
  tail.y=hY;

  snake.push(tail);

  for (var i=0;i<snake.length;i++){
    snakeBody(snake[i].x,snake[i].y); 
  }
} 

var snake = []; 
for (var i=0;i<snakeLength;i++){
  snake.push({x:i, y:canvas.height/dist/2});
} 

setInterval(game,1000)