Untitled

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Batalha Naval</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .geral {
            display: flex;
        }
        .titulo {
            text-align: center;
            font-size: 200%;
        }
        .tabela table{
            background-color: lightblue;
            width: 50%;
            text-align: center;
            font-size: larger;
        }
        td img{
            width: 100%;
        }
        .status {
            display: flex;
            align-items: center;
        }
        .status button {
            width: 100%;
            height: 4vh;
            font-family: Arial, Helvetica, sans-serif;
        }
        .gameover {
            position: fixed;
            background-color: #EEEEEE;
            left: 6%;
            bottom: 40%;
            height: 20vh;
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 200%;
            font-weight: bold;
            opacity: 0;
            z-index: -1;
        }
    </style>

    <script>

        const cords = new Array('','1','2','3','4','5','6','7','8','9','10','A','B','C','D','E','F','G','H','I','J')
        cord = 0
        const barcos = new Array('','','','','','','','','','','','')
        vidas = 3
        pontos = 0

        function preparo() {
            count = 0
            for (i=0;i<=11;i++) {
                while (count < 12) {
                    barcoPos = `${Math.floor(Math.random()*9)+2}-${Math.floor(Math.random()*9)+2}`
                    for (j=0;j<=11;j++) {
                        if (barcos[j] != barcoPos) {
                            verify = 0
                        } else {
                            verify = 1
                            break
                        }
                    }
                    if (verify == 0) {
                        barcos[count] = barcoPos
                        count += 1
                    }
                }
            }
            document.getElementById("vidas").innerHTML = vidas
            document.getElementById("pontos").innerHTML = pontos
        }
        function refresh() {
            document.getElementById("vidas").innerHTML = vidas
            document.getElementById("pontos").innerHTML = pontos
            if (vidas == 0) {
                document.getElementById("gameover").style.opacity = "0.9"
                document.getElementById("gameover").style.zIndex = "1"
            }
        }
        function tiroAceito(num) {
            for (i=0;i<=11;i++) {
                if (num == barcos[i]) {
                    if (i < 6) {
                        verify = 1
                        break
                    } else if (i < 10) {
                        verify = 2
                        break
                    } else {
                        verify = 3
                        break
                    }
                } else {
                    verify = 0
                }
            }
            switch (verify) {
                case 1: 
                    document.getElementById(`${num}`).src = "imgs/Ship-1.png"
                    pontos += 100
                    vidas += 1
                    refresh() 
                    break  
                case 2: 
                    document.getElementById(`${num}`).src = "imgs/Ship-2.png"
                    pontos += 250
                    vidas += 2
                    refresh() 
                    break 
                case 3: 
                    document.getElementById(`${num}`).src = "imgs/Ship-3.png"
                    pontos += 500
                    vidas += 3
                    refresh() 
                    break 
                case 0:
                    document.getElementById(`${num}`).src = "imgs/Wave.png"
                    vidas = vidas - 1
                    refresh()   
            }
        }
        function tiro(num) {
            imgSrc = document.getElementById(`${num}`).src
            if (vidas > 0 && imgSrc.includes("Fire-icon.png")) {
                tiroAceito(num)
            }
        }
        function gabarito() {
            for (i=0;i<=11;i++) {
                alert(barcos[i])
            }
        }
   </script>

</head>
<body onload="preparo()">
    <h1 class="titulo">Batalha Naval</h1>
    <div class="geral">
        <div class="tabela">
            <table>
                <script>
                    for (i=1;i<=11;i++) {
                        document.write(`<tr>`)
                        for (j=1;j<=11;j++) {
                            document.write(`<td onclick="tiro('${i}-${j}')">`)
                            if (i != 1 && j != 1) { 
                                document.write(`<img id="${i}-${j}" src='imgs/Fire-icon.png'>`)
                            } else {
                                document.write(cords[cord])
                                cord += 1
                            }
                            document.write("</td>")
                        }
                        document.write("</tr>")
                    }
                </script>
            </table>
            </div>
            <div class="status">
                <div>
                    <h1 id="gameOver"></h1>
                    <h1>Vidas: <span id="vidas">a</span></h1>
                    <h1>Pontos: <span id="pontos">a</span></h1>
                    <button onclick="window.location.reload()">Resetar</button>
                    <button onclick="gabarito()">Gabarito</button>
                </div>
            </div>
    </div>
    <div class="gameover" id="gameover">
        <p>Game Over</p>
    </div>
</body>
</html>
Editor is loading...