JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<div id="path"></div>
<div id="squares"></div>
<div id="controls">
    <input type="button" value="shoot" />
    <input type="button" value="Add Square" id="addSquare" />
    <input type="button" value="Add Red Square" id="addRedSquare" />
    <input type="button" value="Add Green Square" id="addGreenSquare" />
    <input type="button" value="Add Blue Square" id="addBlueSquare" />
    <input type="button" value="Add Yellow Square" id="addYellowSquare" />
</div>

CSS

.square {
    border: 3px solid #00FF00;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 10px;
}
#controls {
    width: 500px;
    height: 100px;
    position: absolute;
    border: 2px solid #888888;
    top:350px;
}
#path {
    width: 300px;
    height: 300px;
    border: 20px solid #560007;
    position: absolute;
}
.greenSquare {
    background-color: #006600;
    border-color: #00FF00;
    top: 10px;
}
.redSquare {
    background-color: #660000;
    border-color: #FF0000;
    top: 100px;
}
.blueSquare {
    background-color: #000066;
    border-color: #0000FF;
    top: 50px;
}
.yellowSquare {
    background-color: #B57600;
    border-color: #EF9C00;
    top: 150px;
}
.orangeSquare {
    background-color: #B57600;
    border-color: #EF9C00;
    top: 100px;
    left: 100px;
}
.purpleSquare {
    background-color: #ab003c;
    border-color: #dc9000;
    top: 250px;
}
.lightBlueSquare {
    background-color: #a5d8f6;
    border-color: #00b5ef;
    top: 350px;
}
.blackSquare {
    background-color: #000000;
    border-color: #888888;
    top: 350px;
    left: 100px;
}

JavaScript

var shoot = function shoot() {
    //make a red line
    //move the red line
}


var move = function move($what, moveBy, direction, duration) {
    var curMoveBy = moveBy || {
        "top": "+=10px"
    };
    var ease = "linear";
    var curDuration = duration || 50;

    var cTop = $what.position().top;
    var cLeft = $what.position().left;
    direction = direction || "down";
    var devwrkchop;
    if (direction === "down") {
        if (cTop > 300) {
            direction = "right";
        }
        moveBy = {
            "top": "+=10px"
        };
    } else if (direction === "right") {
        if (cLeft > 300) {
            direction = "up";
        }
        moveBy = {
            "left": "+=10px"
        };
    } else if (direction === "up") {
        if (cTop < 40) {
            direction = "left";
        }
        moveBy = {
            "top": "-=10px"
        };
    } else {
        if (cLeft < 40) {
            direction = "down";
        }
        moveBy = {
            "left": "-=10px"
        };
    }

    $what.animate(
    curMoveBy,
    curDuration,
    ease,

    function done() {
        shoot();
        move($what, moveBy, direction, duration);
    });
}

var squares = [];
var colors = ['greenSquare',
    'redSquare',
    'blueSquare',
    'yellowSquare',
    'orangeSquare',
    'purpleSquare',
    'lightBlueSquare',
    'blackSquare'];

var $squareTemplate = $('<div class="square"></div>');

var chooseColor = function chooseColor() {
    var color = Math.floor(Math.random() * colors.length);
    console.log('color', colors[colors.length - 1]);
    return colors[color];
}

var makeSquare = function makeSquare(e) {
    var $square = $squareTemplate.clone();
    var color;
    if (e.data && e.data.color) {
        color = e.data.color;
    } else {
        color = chooseColor();
    }
    $square.addClass(color);
    $('#squares').append($square);
    move($square);
}

$('#addSquare').on('click', makeSquare);
$('#addRedSquare').on('click',...