JSFiddle - React, Tailwind, and code Playground

by mugs17

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">

    
</head>
<body>
    <div class = 'backgroundWrapper'>
    <div class = 'background1'></div>
    <div class = 'background2'></div>
    <div class = 'background3'></div>
    <div class = 'backgroundGradient'></div>
    </div>
    <h1 class = 'title'>Berserk</h1>
    <div class = "game"> 
       
        <div class = "gameArea">
        <div class = "scoreArea">
         <div class = "text">Score:</div>
          <div class = "score">0</div>
          </div>
           <span class = 'gameMessage'>Press Here to Start</span>
            
        </div>
    </div>
    
    <div class = "triangle"></div>
    
   
    
    
    
    
    
    
    
    
    
    
    
    
    <script src = "app.js"></script>
    <script src = "hash.js"></script>
</body>
</html>

CSS

body {
    background-color: black;
    text-align: center;
    position: relative;
}

.backgroundWrapper {
    left: 50px;
    margin-top: 150px;
    position: absolute;
    overflow: hidden;
    border-left: 5px solid white;
    width: 90%;
    height: 1000px;
    box-shadow: 0px 0px 20px red inset;
    max-width: 1920px;
}

.background1 {
    position: absolute;
    opacity: 1;
    float: left;
    background: url(https://i.imgur.com/DInxYLW.jpg);
    background-repeat: no-repeat;
    height: 1000px;
    width: 30%;
    z-index: -2;
    box-shadow: 0px 0px 400px black inset;
}

.background2 {
    position: relative;
    opacity: .3;
    float: left;
    background-image: url(https://i.imgur.com/xjW4o3Z.jpg);
    background-size: cover;
    height: 1100px;
    width: 100%;
    z-index: -3;
}

.background3 {
    position: absolute;
    float: right;
    background-image: url(https://i.imgur.com/xjW4o3Z.jpg);
    background-size: cover;
    height: 1100px;
    width: 15%;
    opacity: .9;
    z-index: -1;
}

.backgroundGradient {
    opacity: .1;
    height: 100%;
    position: relative;
    background-image: linear-gradient(to right, darkred, black);
    z-index: 99;
}


h1 {
    color: red;

}

.title {
    color: blue;
    font-size: 100px;

}

.gameMessage {
    color: red;
    position: absolute;
    top: 10%;
    left: 33%;
    font-size: 2em;
    z-index: 99;
    background-color: black;
    padding: 20px;
}

.gameArea {
    position: relative;
    border: solid 10px;
    background-image: url(https://i.imgur.com/98aYEeb.jpg);
    background-size: cover;
    width: 800px;
    height: 500px;
    display: inline-block;
    margin-top: 150px;
    margin-bottom: 100px;
    overflow: hidden;
 
}

.hide {
    display: none;
}

.scoreArea {
    position: relative;
    width: 100%;
    height: 20%;
    z-index: 99;
    display: none;
}

.score {
    position: absolute;
    background-color: black;
    color: white;
    font-size: 1em;
    font-family: fantasy;
   ...

JavaScript

const title = document.querySelector(".title");
const gameMessage = document.querySelector(".gameMessage");


function changeColor() {
    let newArray = ["darksalmon", "lightsalmon", "crimson", "red", "deeppink", "yellowgreen", "ghostwhite"];
    let random = Math.floor(Math.random() * Math.floor(newArray.length - 1));
    if (title.style.color != newArray[random]) {
        title.style.color = newArray[random];
        console.log(title.style.color);
    } else {
        changeColor();
    }
}


title.addEventListener("click", changeColor);

const gameArea = document.querySelector(".gameArea");
const game = document.querySelector(".game");
const scoreArea = document.querySelector(".scoreArea");
const score = document.querySelector(".score");
const text = document.querySelector(".text");


document.addEventListener('keydown', pressOn);
document.addEventListener('keyup', pressOff);
gameMessage.addEventListener('click', start);

let player = {
    score: 2000,
    speed: 5,
    inplay: false,
    ready: true,
    maxBombs: 4,
    hasBomb: 0,
    hit: 0,
    hitMax: 9,
    games: 0,
    enemy: {
        x: 0
    },
    getHit: 0,
    getHitMax: 20,
    swing: false,
    swingCount: 0
    
}

let keys = {
    space: false
}

function start() {
    if (player.games === 1) {
        gameArea.removeChild(finalScore);
    }
    gameMessage.style.display = 'none';
    score.style.display = "inline-block";
    scoreArea.style.display = "inline-block";
    text.style.display = "inline-block";
    player.inplay = true;
    makeEnemy();
    player.plane = document.createElement("div");
    player.plane.setAttribute("class", "plane");

    gameArea.appendChild(player.plane);

    player.enemy.x = player.enemy.offsetLeft;
    
    player.enemy.y = player.enemy.offsetTop;

    player.x = player.plane.offsetLeft;

    player.y = player.plane.offsetTop;


    window.requestAnimationFrame(playGame);


}



function playGame() {
    if (player.inplay) {
        moveBomb();
       ...