JSFiddle - React, Tailwind, and code Playground

HTML

<div id="field" class="snake-field">
    
</div>
<p>Score: <span id='score'></span></p>
<p>Best: <span id='bestScore'></span></p>

CSS

html,
body{
    overflow:hidden;
    
}
.snake-field {
    width: 200px;
    height: 300px;  
    border: 5px solid #000;
    position: relative;
}
.snake-block{
    width: 9px;
    height: 9px;
    border: 1px solid #000;
    background:#f00;
    position: absolute;
}
.snake-target{
    width: 9px;
    height: 9px;
    border: 1px solid #000;
    background:#000;
    position: absolute;
    border-radius: 10px;
}

#snake-block-id-1{
    background-color: green;
}

JavaScript

var field = document.getElementById('field');
var scoreIndicator = document.getElementById('score');
var bestScoreIndicator = document.getElementById('bestScore');
var direction;
var oppositeDirection = 'down';
var snakeTimer;
var target;
var score = 0;
var bestScore = 0;
var fieldWidth = parseInt(getComputedStyle(field).width) - 10;
var fieldHeight = parseInt(getComputedStyle(field).height) - 10;

document.body.onkeydown = function(event){
    var keyPressed = event.keyCode;
    switch(keyPressed){
        case 38:
            direction = 'up'
        break 
        case 39:
            direction = 'right'
        break 
        case 40:
            direction = 'down'
        break 
        case 37:
            direction = 'left'
        break 
    
    }
    
    if (direction !== oppositeDirection){
        clearTimeout(snakeTimer);
        snake.moveHead(direction)
    }    
}

var snake = {
    snakeLength: 4,
    wholeSnake: [],
    snakeHead: '' ,
    
    //создаем змейку
    createSnake: function () {
        this.resetSnake();
        for (i =1; i<= this.snakeLength; i++){
     
            (function(x){
                var snakeBlock = document.createElement('div');
                snakeBlock.className = "snake-block";
                snakeBlock.id = 'snake-block-id-' + x
                snake.wholeSnake.push(snakeBlock)
            })(i)    
        }
        
        this.wholeSnake[0].style.top = '200px';
        this.wholeSnake[0].style.left = '100px';
        this.snakeHead = this.wholeSnake[0]
        field.appendChild(this.snakeHead)
   
        for (i = 1; i< this.snakeLength; i++){   
            this.wholeSnake[i].style.top = parseInt(this.snakeHead.style.top) + i*10 + 'px' ;
            this.wholeSnake[i].style.left = this.snakeHead.style.left;
            field.appendChild(this.wholeSnake[i])
        }
        
    },
    resetSnake: function() {
         for ( i = 0; i < this.wholeSnake.length; i++){ 
          ...