FightingGameFront/index.html at main · IkarVs/FightingGameFront · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
    <style>
        *{
            box-sizing: border-box;
        }
    </style>

</head>
<body>
    <div  style="position:relative;display:inline-block;">
        <div style="position:absolute;display:flex;width:100%;align-items: center; padding: 20px;">
            <!--player1Life-->
            <div  style="position: relative;height:30px;width: 100%;display: flex;justify-content:flex-end;">
                <div style="background-color:yellow;height: 30px;width: 100%;"></div>
                <div id="playerHealth" style="position:absolute;background-color:blue;top: 0;right: 0;bottom: 0;width: 100%;"></div>
            </div>
            <!--timer-->
            <div  id="timer"  style="background-color:red;height:100;width: 100px; flex-shrink: 0;display: flex;align-items: center;justify-content:center;">10</div>
            <!--player2Life-->
            <div  style="position: relative;height:30px;width: 100%;">
                <div style="background-color:yellow;height: 30px;"></div>
                <div id="enemyHealth" style="position:absolute;background-color:blue;top: 0;right: 0;bottom: 0;left: 0;"></div>
            </div>
        </div>
    <div id="displayText" style="position:absolute;color:white;display:flex;align-items:center;justify-content: center; top: 0;right:0;bottom:0;left:0;display:none">tie</div>
        <canvas></canvas>
    </div>
    <script  src="js/utils.js"></script>
    <script  src="js/classes.js"></script>
    <script  src="index.js"></script>
</body>