snake.ts

let fieldSize = 20;

let snakeField:HTMLElement = document.getElementById("snakeField");
let snake:number[][] = [[10, 10], [10, 11], [10, 12]];
let snakedir:number = 2;
let target:number[] = []
let score = 0;

function getRandomInt(max:number) {
    return Math.floor(Math.random() * Math.floor(max)) + 1;
}

function drawField(){
    let fieldHTML:string = "";
    for(let i:number = 1; i <= fieldSize; i++){
        for(let x:number = 1; x <= fieldSize; x++){
            let elementClass:string = "";
            for(let y:number = 0; y<snake.length; y++){
                let currentSnake = snake[y];
                if(currentSnake[0] == i && currentSnake[1] == x){
                    if(y == snake.length - 1)
                        elementClass += " snake-head";
                    else
                        elementClass += " snake-body";
                }
            }

            if(target[0] == i && target[1] == x)
                elementClass += " target";

            fieldHTML += `<span id="field-${i}-${x}" class="${elementClass}"></span>`;
        }
        if(i < fieldSize) {
            fieldHTML += "<br>"
        }
    }
    snakeField.innerHTML = fieldHTML;
}

function moveSnake(){
    let head:number[] = snake[snake.length - 1].slice(0);
    switch (snakedir){
        case 0:
            head[0]++;
            break;
        case 1:
            head[0]--;
            break;
        case 2:
            head[1]++;
            break;
        case 3:
            head[1]--;
            break;
    }
    if (!(snake.length - 3 < score))
        snake.shift();
    snake.push(head);
}

function detectEnd(){
    let gameFinished:boolean = false;
    for(let i:number = 0; i < snake.length; i++){
        let snake1:number[] = snake[i];
        for (let x:number = i + 1; x < snake.length; x++){
            let snake2:number[] = snake[x]
            if(snake1[0] == snake2[0] && snake1[1] == snake2[1])
                gameFinished = true
        }
        if(snake1[0] < 0 || snake1[0] > fieldSize || snake1[1] < 0 || snake1[1] > fieldSize)
            gameFinished = true
    }

    if(gameFinished){
        clearInterval(mainLoop);
        alert("Game Over, your score: " + score);
    }
}
let mainLoop = window.setInterval(function(){
    for(let y:number = 0; y<snake.length; y++){
        let currentSnake = snake[y];
        if(currentSnake[0] == target[0] && currentSnake[1] == target[1]){
            score++;
            target = [getRandomInt(fieldSize), getRandomInt(fieldSize)];
        }
    }
    moveSnake();
    detectEnd()
    drawField();
}, 1000);

//keypress handler
document.addEventListener('keydown', function(event) {
    const key:string = event.key;
    switch (key){
        case "ArrowRight":
            snakedir = 2
            break;
        case "ArrowLeft":
            snakedir = 3;
            break;
        case "ArrowUp":
            snakedir = 1;
            break;
        case "ArrowDown":
            snakedir = 0
    }
});

target = [getRandomInt(fieldSize), getRandomInt(fieldSize)];
drawField();