JSFiddle - React, Tailwind, and code Playground

by khanfused

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
    <div id="modal">
        <div id="title">Agar.io (clone)</div>
        <input type="text" id="username1" class="input" placeholder="Player 1 username" />
        <input type="text" id="username2" class="input" placeholder="Player 2 username" />
        <div id="settings"> <i class="fa fa-2x fa-cog"></i>

        </div>
        <div id="ready">Play</div>
        <div id="instructions"> <span class="block">Eat cells to grow bigger.</span>

            <br /> <span class="block">Avoid viruses. (-1/4 mass on hit)</span> 
            <br /><span class="block" style="font-size: 17.5px;">Eat the other player to win the game.</span> 
            <br /><span class="block">Player 1:</span>

            <br /> <span class="block">Arrow keys - Move</span>

            <br /> <span class="block">Shift - Split. (store mass)</span>

            <br /> <span class="block">Enter - Merge. (regain mass)</span>

            <br /> <span class="block">Player 2:</span>

            <br /> <span class="block">WASD - Move</span>

            <br /> <span class="block">1 - Split (store mass)</span>

            <br /> <span class="block">F - Merge (regain mass)</span>

            <br />
        </div>
    </div>
    <div id="gameOver"></div>
</body>

CSS

body {
    font-family: helvetica;
    overflow-x: hidden;
    overflow-y: hidden;
}
#modal {
    width: 400px;
    height: 900px;
    margin: auto;
    margin-top: 75px;
}
#title {
    text-align: center;
    font-size: 36px;
    color: #505050;
}
.input {
    font-family: helvetica;
    padding: 9px;
    font-size: 16px;
    /* border-radius: 4px; */
}
#username1 {
    margin-top: 2.2222222222222223%;
    margin-left: -2%;
}
#username2 {
    position: relative;
    left: 55.00000000000001%;
    top: -39px;
}
#settings {
    color: #505050;
    margin-left: -21.25%;
    margin-top: -21.25%;
    width: 13.750000000000002%;
    height: 5.555555555555555%;
    background-color: rgb(2, 149, 212);
    border-radius: 100%;
}
.fa {
    color: #fff;
    margin-left: 25%;
    margin-top: 15%;
}
#ready {
    width: 75%;
    height: 5.555555555555555%;
    background-color: #5CB85C;
    margin-top: 10px;
    margin-left: 15%;
    font-size: 24px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
}
#instructions {
    text-align: center;
    margin-top: 25px;
    font-size: 16px;
}
.block {
    display: block;
}
#gameOver {
    text-align: center;
    font-size: 36px;
}

JavaScript

// todo: fix split functions and others 
// make it so players can't split at 1 mass
// player.collision(computer) fails; FIX
var canvas = document.createElement("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.display = "none";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var colors = ['red', 'orange', /* 'yellow', */ 'lime', 'cyan', 'indigo', 'violet'];
var sizes = [2.5, 5];
var food = [];
var darkTheme = false;
var writingColor = "#505050";
var settingsEl = document.getElementById("settings");
settingsEl.addEventListener("click", function () {
    if (darkTheme === false) {
        darkTheme = true;
        settingsEl.style.background = "#505050";
    } else if (darkTheme === true) {
        darkTheme = false;
        settingsEl.style.background = "rgb(2, 149, 212)";
    }
});
var modalEl = document.getElementById("modal");
var player1Name = document.getElementById("username1");
var player2Name = document.getElementById("username2");
var playBtn = document.getElementById("ready");
var names = [];
var player1Score = 0;
var player2Score = 0;
var scoreEl = document.getElementById("score");
var foodEl = document.getElementById("food");
var virusArr = [];
var collision = false;
var gameOverEl = document.getElementById("gameOver");
var keys = [];
var speedEl = document.getElementById("speed");

function gameOver(num) {
    modalEl.style.display = "none";
    gameOverEl.style.color = writingColor;
    gameOverEl.innerHTML = "Player " + num + " wins";
    scoreEl.style.display = "none";
    foodEl.style.display = "none";
    speedEl.style.display = "none";
}

function OneBeatsTwo() {
    player2X = 5000000;
    gameOver(1);
}

function TwoBeatsOne() {
    player1X = 500000000;
    gameOver(2);
}

function collisionWithAI() {
    computerX = 5000000;
    playerOneMass += computerMass;
}

function ifCollisionOne() {
    globalCell.x = 5000000000;
    playerOneMass += 0.5;
    food.pop();
   ...