I am trying to create a battle ship game and can not figure out a bug that appeared

Stack Overflow Asked by progg24 on December 31, 2020
I am trying to create a battle ship game.
But I encountered a bug. I wrote some code that should (at least what I thought) create 2 boats, 1 5 blocks long and 1 4 blocks long.
I want to create the game in a table, with each td representing one block of the boat.
The bug is: when I load the page, sometimes the boat with 4 blocks appears more than once. I tried staring at the code for hours and debug it, but I’m quite new to coding and couldn’t figure it out.

    <!DOCTYPE html>
<html>
    <head>
        <title>Battle Ships</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <style>
            th, td {
                width: 32px;
                height: 32px;
                background-color: grey;
            }

            .boat {
                width: 32px;
                height: 32px;
                background-color: red;
            }
        </style>

        <script>
            $(document).ready(function(){
                
                for (var vr = 0; vr < 11; vr++) {
                    var vrsta = document.getElementById('tabela').insertRow(vr);
                    for (var st = 0; st < 11; st++) {
                        var okvir = vrsta.insertCell(st);
                        okvir.id = "x=" + st + "&y=" + vr;
                        okvir.setAttribute("onclick", "koord(this.id)");
                        //okvir.setAttribute("class", "okvir");
                        okvir.innerHTML = "x-" + st + " y-" + vr; 
                    }
                }
            });

            function generateBoats() {

                console.log("func");
                $("tr").children().removeClass("boat");
                generateBoat5();
                generateBoat4();

            }
            
            function generateBoat5() {
                // boat 5
                var rotation = Math.floor((Math.random() * 2));
                var randX = Math.floor((Math.random() * 11));
                var randY = Math.floor((Math.random() * 11));

                var generiranID = "5___x=" + randX + "&y=" + randY;
                console.log(generiranID);
                console.log(rotation);


                if (rotation == 0) {

                    if (randX < 7) {

                        var nID = "x=" + randX + "&y=" + randY;
                        var nID2 = "x=" + (randX + 1) + "&y=" + randY;
                        var nID3 = "x=" + (randX + 2) + "&y=" + randY;
                        var nID4 = "x=" + (randX + 3) + "&y=" + randY;
                        var nID5 = "x=" + (randX + 4) + "&y=" + randY;
                        //console.log(nID5);

                        $(document.getElementById(nID)).addClass("boat");
                        $(document.getElementById(nID2)).addClass("boat");
                        $(document.getElementById(nID3)).addClass("boat");
                        $(document.getElementById(nID4)).addClass("boat");
                        $(document.getElementById(nID5)).addClass("boat");

                    }
                    else {

                        generateBoats();

                    }

                }
                else if (rotation == 1) {

                    if (randY < 7) {

                        var nID = "x=" + randX + "&y=" + randY;
                        var nID2 = "x=" + randX + "&y=" + (randY + 1);
                        var nID3 = "x=" + randX + "&y=" + (randY + 2);
                        var nID4 = "x=" + randX + "&y=" + (randY + 3);
                        var nID5 = "x=" + randX + "&y=" + (randY + 4);
                        //console.log(nID5);

                        $(document.getElementById(nID)).addClass("boat");
                        $(document.getElementById(nID2)).addClass("boat");
                        $(document.getElementById(nID3)).addClass("boat");
                        $(document.getElementById(nID4)).addClass("boat");
                        $(document.getElementById(nID5)).addClass("boat");

                    }
                    else {

                        generateBoats();

                    }

                }
            }

            function generateBoat4() {
                //boat 4

                var rotation = Math.floor((Math.random() * 2));
                var randX = Math.floor((Math.random() * 11));
                var randY = Math.floor((Math.random() * 11));

                var generiranID = "4___x=" + randX + "&y=" + randY;
                console.log(generiranID);
                console.log(rotation);


                if (rotation == 0) {

                    if (randX < 8) {

                        var nID = "x=" + randX + "&y=" + randY;
                        var nID2 = "x=" + (randX + 1) + "&y=" + randY;
                        var nID3 = "x=" + (randX + 2) + "&y=" + randY;
                        var nID4 = "x=" + (randX + 3) + "&y=" + randY;

                        if (($("#nID").hasClass("boat")) || ($("#nID2").hasClass("boat")) || ($("#nID3").hasClass("boat")) || ($("#nID4").hasClass("boat"))) {

                            generateBoats();

                        }
                        else {

                            $(document.getElementById(nID)).addClass("boat");
                            $(document.getElementById(nID2)).addClass("boat");
                            $(document.getElementById(nID3)).addClass("boat");
                            $(document.getElementById(nID4)).addClass("boat");

                        }

                    }
                    else {

                        generateBoats();

                    }

                }
                else if (rotation == 1) {

                    if (randY < 8) {

                        var nID = "x=" + randX + "&y=" + randY;
                        var nID2 = "x=" + randX + "&y=" + (randY + 1);
                        var nID3 = "x=" + randX + "&y=" + (randY + 2);
                        var nID4 = "x=" + randX + "&y=" + (randY + 3);

                        if (($("#nID").hasClass("boat")) || ($("#nID2").hasClass("boat")) || ($("#nID3").hasClass("boat")) || ($("#nID4").hasClass("boat"))) {

                            generateBoats();

                        }
                        else {

                            $(document.getElementById(nID)).addClass("boat");
                            $(document.getElementById(nID2)).addClass("boat");
                            $(document.getElementById(nID3)).addClass("boat");
                            $(document.getElementById(nID4)).addClass("boat");

                        }

                    }
                    else {

                        generateBoats();

                    }
                }
            }
        </script>
    </head>
    
<body onload="generateBoats()">

    <table id="tabela"></table>
</body>
</html>
javascript jquery
Add your own answers!

Ask a Question

Get help from others!