JSFiddle - React, Tailwind, and code Playground

HTML

<p id="scoreDIV"></p>



<section id="field">

    <div id="rails"></div>

    <div id="player" class="starter"></div>

</section>

<section id="scoreField">

    <button type="button" id="startBtn">START</button>

    <p id="score"></p>

</section>

CSS

*{
        padding:0px;
        margin:0px;
    }

    #field {
        height:500px;
        width:500px;
        background: #ff9;
        float:left;
        z-index: 1;
    }

    #scoreField {
        float: left;
    }

    #rails {
        height:450px;
        width:450px;
        background: #ff9;
        position: absolute;
        top:25px;
        left:25px;
        border: 1px solid black;
        z-index: 2;
    }

    #player {
        position: absolute;
        height:50px;
        width:50px;
        z-index: 3;
    }

   .bullet {
        position: absolute;
        height:10px;
        width:10px;
        z-index: 3;
        background-color: black;
    }

    .smallEnemy {
        border: 1px solid black;
        height:15px;
        width:15px;
        background-color: #C09;
        position: absolute;
        z-index: 4;
    }
    .mediumEnemy {
        border: 1px solid black;
        height:30px;
        width:30px;
        background-color: #60C;
        position: absolute;
        z-index: 4;
    }

.largeEnemy {
        border: 1px solid black;
        height:75px;
        width:75px;
        background-color: #ff0;
        position:absolute;
        z-index: 4;
    }

    .xlargeEnemy {
        height:200px;
        width:200px;
        background-color: #00f;
    }

    .starter{background-color: black;}
    .down{ background-color: #ff0;}
    .up{background-color: #339}
    .left{background-color:#ccf;}
    .right{background-color:#6C3;} 
    .hit{visibility: none;}
    .hidden {display:none;}

    #scoreDIV {
        width: 300px;
        background-color: black;
        color: white;
        position: fixed;
        top: 300px;
        left: 55px;
        z-index: 10;
    }

JavaScript

var  keys = {};



var gameOver = false;


var shot = false;


//declare some clean up variables

var Pleft, Ptop;

//declare some variables that will help determine where the bullet will start from

var bulletOriginY, bulletOriginX, bulletDirection;


//collision variables

var bulletX, bulletY, enemyX, enemyY;



//enemy spawn location variables

var random_X, random_Y;

//determine how far the enemies can spawn without leaving the field

var max;



//set up score  variables

var score = 0;

var scoreText;

var scoreP = $('#score');

var scoreDIV = $('#scoreDIV');





//declare the intervals so that they can be referenced outside of the 

var game_interval, smInterval, medInterval, lrgInterval, bulletInterval;



//start the game once you click the start button

$('#startBtn').click(function() {

    //disable the button when it is clicked so you can't click it any more

    $('#startBtn').attr('disabled', 'disabled');



    score = 0;

    scoreText = "";

    $('#scoreDIV').css("visibility", "hidden");

    //start the game function

    game();

});


 





//----------- main game function --------------//

var game = function() {

    game_interval = window.setInterval(function() {

        MainLoop();

    }, 100);



    //if the game is not over, run the main code

    if (gameOver === false) {



        //show the score

        $('#score').html('SCORE: ' + score);

        $('#score').css("visibility", "visible");











        //------------enemy set up--------------------//

        //small enemy test

        var smEnemySpawn = function() {

            for (var i = 0; i < 1; i++) {



                max = 445;

                random_X = Math.floor(Math.random() * max);

                random_Y = Math.floor(Math.random() * max);

                var smallEnemy = $('<div>');

                smallEnemy.addClass('enemy smallEnemy hidden');

                smallEnemy.css({

                    'top': (random_Y + 'px'),

                  ...