index.html

<canvas id="gc" width="400" height="400"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game, 3000/15);
}

let grid_size = 20;
let tile_count = 20;

let starting_position = Math.floor(grid_size / 2);
let starting_length = 5;
let pos_x = starting_position;
let pos_y = starting_position;

let apple_x = 15; // first apple will be here
let apple_y = 15; // first apple will be here

// start from stand still
let x_velocity = 0;
let y_velocity = 0;


let trail = []; // will be an array of {x: x, y: y} objects
let tail_length = starting_length;

let wormholes = [];

function reset() {
    pos_x = starting_position;
    pos_y = starting_position;
    trail = [];
    tail_length = starting_length;
    wormholes = []; 
}

function random_space() {
    return Math.floor(Math.random() * grid_size);
}

function spawn_apple(){
    apple_x = random_space();
    apple_y = random_space();
}

function draw_apple() {
    ctx.fillStyle = "red";
    ctx.fillRect(apple_x * grid_size, apple_y * grid_size, grid_size, grid_size);
}

let colors = ["blue", "orange", "pink"];
let color_index = 0;

function spawn_wormhole() {
    // check that x1 !== x2, y1 !== y2
    let x1 = random_space(),
    y1 = random_space(),
    x2 = random_space(),
    y2 = random_space(),
    color = colors[color_index++ % colors.length];
    color_index = color_index % colors.length;
    while (x1 === x2) {
        x1 = random_space();
    }
    while (y1 === y2) {
        y1 = random_space();
    }
    wormholes.unshift({x1, x2, y1, y2, color});
    wormholes.splice(colors.length);
}

function draw_wormholes() {
    for (var i = 0; i < wormholes.length; i++) {
        let wormhole = wormholes[i];
        ctx.fillStyle = wormhole.color;
        ctx.fillRect(wormhole.x1 * grid_size, wormhole.y1 * grid_size, grid_size, grid_size);
        ctx.fillRect(wormhole.x2 * grid_size, wormhole.y2 * grid_size, grid_size, grid_size);
    }
}

function game() {
    pos_x += x_velocity;
    pos_y += y_velocity;

    ctx.fillStyle="black";
    ctx.fillRect(0, 0, canv.width, canv.height);

    // draw our lil snek
    ctx.fillStyle = "lime";
    ctx.fillRect(pos_x * grid_size, pos_y * grid_size, grid_size - 2, grid_size - 2);

    if (pos_x == -1 || pos_x == tile_count || pos_y == -1 || pos_y == tile_count) {
        // we hit a wall
        reset();
        color_index = 0;
    }
    for (var i = 0; i < wormholes.length; i++) {
        let hole = wormholes[i];
        if (pos_x === hole.x1 && pos_y === hole.y1) {
            pos_x = hole.x2;
            pos_y = hole.y2;
            break;
        }
        else if (pos_x === hole.x2 && pos_y === hole.y2) {
            pos_x = hole.x1;
            pos_y = hole.y1;
        }
    }
    for (var i = 0; i < trail.length; i++) {
        var pos = trail[i];
        if (pos.x == pos_x && pos.y == pos_y) {
            // ate ourself
            reset();
            break;
        }
    }

    trail.unshift({x: pos_x, y: pos_y});
    trail.splice(tail_length)
        for (var i = 0; i < trail.length; i++) {
            ctx.fillRect(trail[i].x * grid_size, trail[i].y * grid_size, grid_size - 2, grid_size - 2) ;
        }
    if (pos_x == apple_x && pos_y == apple_y) {
        // eat apple
        spawn_apple();
        tail_length++;
        spawn_wormhole();
    }
    draw_wormholes();
    draw_apple();

}



function keyPush(evt) {
    switch(evt.keyCode) {
        case 37:
            // left
            if (!(x_velocity == 1 && y_velocity == 0)) {
                x_velocity=-1;y_velocity=0;
            }
            break;
        case 38:
            // up
            if (!(x_velocity == 0 && y_velocity == 1)) {
                x_velocity=0;y_velocity=-1;
            }
            break;
        case 39:
            // right
            if (!(x_velocity == -1 && y_velocity == 0)) {
                x_velocity=1;y_velocity=0;
            }
            break;
        case 40:
            // down
            if (!(x_velocity == 0 && y_velocity == -1)) {
                x_velocity=0;y_velocity=1;
            }
            break;
    }
}
</script>