JSFiddle - React, Tailwind, and code Playground

by Isaac Mack

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Game Practice</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>
        <div id="field">
            <div id="sprite"></div>
        </div>
        <div id="buttons">
            <button class="btn" type="button" onclick="moveLeft();">Left</button>
            <button class="btn" type="button" onclick="moveRight();">Right</button>
            <button class="btn" type="button" onclick="moveUp();">Up</button>
            <button class="btn" type="button" onclick="moveDown();">Down</button>
            <button class="btn" type="button" onclick="startMove();">Execute</button>
            <button class="btn" type="button" onclick="removeOne();">Remove</button>
            <button class="btn" type="button" onclick="removeAll();">Clear</button>
        </div>
        <div id="directions">
            <img id="one" src="https://png.icons8.com/metro/1600/arrow.png">
            <img id="two" src="https://png.icons8.com/metro/1600/arrow.png">
            <img id="three" src="https://png.icons8.com/metro/1600/arrow.png">
            <img id="four" src="https://png.icons8.com/metro/1600/arrow.png">
            <img id="five" src="https://png.icons8.com/metro/1600/arrow.png">
            
        </div>
    </body>
</html>

CSS

#sprite {
    width: 25px;
    height: 25px;
    position: relative;
    left: 0;
    top: 0;

    background-color: coral;
    border-radius: 25px;
}

#buttons {
    display: flex;
    justify-content: center;
}

#field {
    background-color: darkslategrey;
    margin: auto;
    width: 50%;
    height: 200px;
}

#directions {
    background-color: lightgray;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 50%;
    height: 90px;
}

#directions img {
    width: 60px;
    height: 50px;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

JavaScript

var queue = [];
var spot;
var left = -30;
var right = 30;
var up = -40;
var down = 40;
var moveLeft = function() {
    if(queue.length < 5){
        queue.push('left');
        switch(queue.length) {
            case 1:
                document.getElementById("one").style.visibility = "visible";
                document.getElementById("one").style.imageOrientation = "180deg";
                break;
            case 2:
                document.getElementById("two").style.visibility = "visible";
                document.getElementById("two").style.imageOrientation = "180deg";
                break;
            case 3:
                document.getElementById("three").style.visibility = "visible";
                document.getElementById("three").style.imageOrientation = "180deg";
                break;
            case 4:
                document.getElementById("four").style.visibility = "visible";
                document.getElementById("four").style.imageOrientation = "180deg";
                break;
            case 5:
                document.getElementById("five").style.visibility = "visible";
                document.getElementById("five").style.imageOrientation = "180deg";
                break;
        }
    }
};

var moveRight = function() {
    if(queue.length < 5){
        queue.push('right');
        switch(queue.length) {
            case 1:
                document.getElementById("one").style.visibility = "visible";
                document.getElementById("one").style.imageOrientation = "0deg";
                break;
            case 2:
                document.getElementById("two").style.visibility = "visible";
                document.getElementById("two").style.imageOrientation = "0deg";
                break;
            case 3:
                document.getElementById("three").style.visibility = "visible";
                document.getElementById("three").style.imageOrientation = "0deg";
                break;
            case 4:
               ...