draw.js

const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
const scale = 10;

const rows = canvas.height / scale;
const columns = canvas.width / scale;

var snake;


(function setup(){
    snake = new Snake();
    fruit = new Fruit();
    fruit.pickLocation();

    var counter = 10;
    var myFunction = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        fruit.draw();
        if(ui.state.playing == 1){
            snake.update();
        }
        snake.draw();

        if (snake.eat(fruit)){
            fruit.pickLocation();
        }

        snake.checkCollision();
        document.querySelector('.score')
            .innerText = snake.total;
        
        counter = snake.maxSpeed;
        setTimeout(myFunction, counter);
    }
    setTimeout(myFunction, counter);

    /* window.setInterval(() => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        fruit.draw();
        snake.update();
        snake.draw();

        if (snake.eat(fruit)){
            fruit.pickLocation();
        }

        snake.checkCollision();
        document.querySelector('.score')
            .innerText = snake.total;


    }, 250); */
}());

window.addEventListener('keydown', ((evt) => {
    const direction = evt.key.replace('Arrow', '');
    snake.changeDirection(direction);
}))