JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#canvas_container {
    width: 640px;
    height: 1000px;
    border: 1px solid #aaa;
}

JavaScript

var paper = Raphael(50, 25, 1000, 640);
var enemy_array = [];

var updates_since_last_spawn = 25;
var ms_of_last_update = new Date().getTime();
var elapsed_time_since_update = new Date().getTime() - ms_of_last_update;
var GAME_TICK = 30;

var num_of_enemies_spawned = 0;
var enemy_height_and_width = 25;
var enemy_speed = 5;

var gb_perimeter = 9; //odd numbers greater than 5
var gb_x_pos_corners = []; //index is 0
var gb_y_pos_corners = []; //index is 0
var gb_enemies_per_stage = 0;
var gb_scale = enemy_height_and_width;
var gb_score = 0;

var gui_score = paper.text;
var hack_delay_spawn = 25;

createGameboard();
drawGameOutline();
game();
setInterval(game, 16);

//core

function drawScore() {

}


function game() {

    elapsed_time_since_update = new Date().getTime() - ms_of_last_update;

    if (isItTimeToUpdate() === true) {
        spawnEnemy();
        moveEnemies();
    }

}

function drawGameOutline() {

    for (i = 1; i <= gb_x_pos_corners.length; i++) {
        paper.path("M" + gb_x_pos_corners[i - 1] + "," + gb_y_pos_corners[i - 1] + " L" + gb_x_pos_corners[i] + "," + gb_y_pos_corners[i]);
    }
}

function createGameboard() {
    var local_array = []; // determine number enemies before turn 
    // also used to find xypos of corners

    //example 11x11 board - 11 elements - [10,10,10,8,8,6,6,4,4,2,2]
    //                                    [ R, D, L,U,R,D,L,U,R,D,L]

    for (i = 0; i < gb_perimeter; i++) {
        if (i === 0 || i === 1 || i === 2) {
            local_array[i] = gb_perimeter - 1;
        } else {
            local_array[i] = local_array[i - 2] - 2;
        }
    }


    //Calculate total enemies per stage
    for (i = 0; i < local_array.length; i++) {
        gb_enemies_per_stage = gb_enemies_per_stage + local_array[i];
    }

    //Pattern Right Down Left Up Right Down Left Up
    //1-Right:(+x)	
    //2-Down:(+y)  
    //3-Left:(-x)  
    //4-Up:(-y)

    gb_x_pos_corners[0] = 0;
    gb_y_pos_corners[0] = 0;


    for (i = 1; i...