<canvas id= 'game' width= '400' height='400'></canvas>

<script>
class SnakeGame {
constructor()
this.canvas = document.getElementByID('game');
this.context = this.canvas.getContext('2d');
 document.addEventListener ('keydown' , this.onKeyPress.bind(this));
}

init()
this.positionX = this.positionY = 10;
this.AppleX = this.appleY = 5;
this.tailSize = 5;
this.trail = [];
this.gridSize = this.tileCount = 20;
this.velocityX = this.velocityY = 0;

this.timer = setInterval(this.loop.bind(this), 1000 / 15);
 }

 reset() {
 clearInterval(this.timer);
 this.init();
 }

 loop() {
 this.update();
 this.draw()
 }

 update() {

 }

 draw() {
 this.context.fillStyle = 'black';
 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);

 this.context.fillRect = 'red';
 this.context.font = '20px Arial;
 this.context.fillText(this.tailSize, 20, 40);

 this.context.fillStyle = 'yellow';
 this.trail.forEach(t => {
 this.context.fillRect(t.positionX * this.gridSize, t.positionY * this.gridSize, this.gridSize - 5, this.gridSize - 5,);
 });
 this.context.fillStyle =


 onKeyPress(e) {
}

const game = new SnakeGame();
window.onload = () => game.init ();
/script>