Is it possible to completely separate the engine?

Question

JavaScript

Good time of the day.
There is a snake, for rendering I use the 2d canvas standard.
I would like to try instead of canvas to draw the whole snake in the console, i.e. through ASCII characters.
That is, completely separate this particular engine from rendering.
Is it even possible?

engine

import {
    gameClearRect, writeScore, drawGameRect, drawFoodForOne,
    drawSnakeColor, drawSnakePosition, drawFoodForTwo
} from './view.js';

export default function loadGame(snakeSpeed, left, up, right, down, foodCount) {
    let boxSize = 32,
        score = 0,
        food = {
            x: Math.floor(Math.random() * 17 + 1) * boxSize,
            y: Math.floor(Math.random() * 15 + 3) * boxSize
        },
        snake = [],
        snakeDirection;

    if (foodCount === 2) {
        var food2 = {
            x: Math.floor(Math.random() * 17 + 1) * boxSize,
            y: Math.floor(Math.random() * 15 + 3) * boxSize
        };
    }


    snake[0] = {
        x: 9 * boxSize,
        y: 10 * boxSize
    };

    document.addEventListener('keydown', bindingKeys);
    function bindingKeys(event) {
        //left 37 | up 38 | right 39 | down 40
        if (event.keyCode == left && snakeDirection != "right") {
            snakeDirection = "left";
        } else if (event.keyCode == up && snakeDirection != "down") {
            snakeDirection = "up";
        } else if (event.keyCode == right && snakeDirection != "left") {
            snakeDirection = "right";
        } else if (event.keyCode == down && snakeDirection != "up") {
            snakeDirection = "down";
        }
    }

    function snakeSuicide(head, arr) {
        for (let i = 0; i < arr.length; i++) {
            if (head.x == arr[i].x && head.y == arr[i].y) {
                clearInterval(game);
                gameClearRect();
            }
        }
    }

    function drawGame() {
        drawGameRect(food.x, food.y);

        if (foodCount === 2) {
            drawFoodForOne(food.x, food.y);
            drawFoodForTwo(food2.x, food2.y);
        } else if (foodCount === 1) {
            drawFoodForOne(food.x, food.y);
        }

        for (let i = 0; i < snake.length; i++) {
            if (i % 2 == 0) {
                drawSnakeColor("crimson");
            } else if (i % 2 == 1) {
                drawSnakeColor("salmon");
            }
            drawSnakePosition(snake[i].x, snake[i].y, boxSize, boxSize);
        }

        writeScore(score);

        let snakeCoordinateX = snake[0].x,
            snakeCoordinateY = snake[0].y;

        if (snakeCoordinateX == food.x && snakeCoordinateY == food.y) {
            score++;
            food = {
                x: Math.floor(Math.random() * 17 + 1) * boxSize,
                y: Math.floor(Math.random() * 15 + 3) * boxSize
            };
        } else if (foodCount === 2 && snakeCoordinateX == food2.x && snakeCoordinateY == food2.y) {
            score++;
            food2 = {
                x: Math.floor(Math.random() * 10 + 1) * boxSize,
                y: Math.floor(Math.random() * 10 + 3) * boxSize
            };
        } else {
            snake.pop();
        }


        if (snakeCoordinateX < boxSize || snakeCoordinateX > boxSize * 17
            || snakeCoordinateY < 3 * boxSize || snakeCoordinateY > boxSize * 17) {
            clearInterval(game);
            gameClearRect();
        }

        if (snakeDirection == "left") { snakeCoordinateX -= boxSize; }
        if (snakeDirection == "right") { snakeCoordinateX += boxSize; }
        if (snakeDirection == "down") { snakeCoordinateY += boxSize; }
        if (snakeDirection == "up") { snakeCoordinateY -= boxSize; }

        let newHead = {
            x: snakeCoordinateX,
            y: snakeCoordinateY
        };

        snakeSuicide(newHead, snake);

        snake.unshift(newHead);

    }
    let game = setInterval(drawGame, snakeSpeed);
}

Rendering

import loadGame from './engine.js';

const canvas = document.getElementById("game");
const context = canvas.getContext("2d");

const groundImg = new Image();
groundImg.src = "img/pic.png";

const foodImg = new Image();
foodImg.src = "img/food.png";

let boxSize = 32;

export function gameClearRect() {
    setTimeout(function () {
        context.clearRect(0, 0, 608, 608);
    }, 2000);
    document.getElementById('button1').disabled = false;
    document.getElementById('button2').disabled = false;
    document.getElementById('button3').disabled = false;

}
export function writeScore(score) {
    context.fillStyle = "white";
    context.font = "50px Arial";
    context.fillText(score, boxSize * 2.5, boxSize * 1.7);
}
export function drawGameRect(foodX, foodY) {
    context.clearRect(0, 0, 608, 608);
    context.drawImage(groundImg, 0, 0);

}

export function drawFoodForTwo(food2X, food2Y) {
    context.drawImage(foodImg, food2X, food2Y);
}

export function drawFoodForOne(foodX, foodY) {
    context.drawImage(foodImg, foodX, foodY);
}
export function drawSnakeColor(color) {
    context.fillStyle = color;
}

export function drawSnakePosition(snakePosX, snakePosY, boxSizeOne, boxSizeTwo) {
    context.fillRect(snakePosX, snakePosY, boxSizeOne, boxSizeTwo);
}

function disableButtons() {
    document.getElementById('button1').disabled = true;
    document.getElementById('button2').disabled = true;
    document.getElementById('button3').disabled = true;
}

let button = document.getElementById('button1'),
    button2 = document.getElementById('button2'),
    button3 = document.getElementById('button3');

button.addEventListener('click', function () {
    loadGame(130, 37, 38, 39, 40, 2);
    disableButtons();
});

button2.addEventListener('click', function () {
    loadGame(90, 37, 38, 39, 40, 1);
    disableButtons();
});

button3.addEventListener('click', function () {
    loadGame(70, 37, 38, 39, 40, 1);
    disableButtons();
});

Layout

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Snake game</title>
    <link rel="stylesheet" href="css/snake.css">
</head>

<body>
    <div style="text-align:center;">
        <button type="button" id="button1">Easy</button>
        <button type="button" id="button2">Medium</button>
        <button type="button" id="button3">Hard</button>

    </div>
    <canvas id="game" width="608" height="608"></canvas>
    <script type="module" src="js/engine.js"></script>
    <script type="module" src="js/view.js"></script>
</body>

</html>

Thank you in advance for your response.

Answer 1

If your goal is just to try , then it's better to do something simpler.
For example, for the console, write a snake from scratch. It's the basic basics there. And as the fantasy develops, the main code will already acquire exactly your Wishlist, whether it be a console or anything else.