Untitled


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Statki</title>

	<style>
        main{
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        body{
            background-color: #232323;
            color:white;
        }
        th,td
        {
        border-style: solid;
        width:50px;
        height: 50px;
    }
		#lewy {
			float: left;
		}
        #prawy{
            float:right;
            width: 30%;
        }
	</style>
</head>

<body onLoad="rozstaw_rand();">
    <main>
	<div id="lewy">
        PRZECIWNIK
		<table cellspacing="1">
            <th>LP</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th>
			<script>
				var j = 1;
				while (j < 9) {
					var i = 0;
					document.write('<tr>');
					for (i = 0; i < 9; i++) {
                        if(i==0)
                        document.write('<td>'+j+'</td>');
                        else
						document.write('<td class="statek_A"></td>');
					}
					document.write('</tr>');
					j++;
				}
			</script>
		</table>
	</div>
	<div id="prawy">
        TY
		<table cellspacing="1">
            <th>LP</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th>
			<script>
				var j = 1;
				while (j < 9) {
					var i = 0;
					document.write('<tr>');
					for (i = 0; i < 9; i++) {
                        if(i==0)
                        document.write('<td>'+j+'</td>');
                        else
						document.write('<td class="statek_A"></td>');
					}
					document.write('</tr>');
					j++;
				}
			</script>
		</table>
	</div>
<center>
	<input type="text" id="x">
	<input type="text" id="y"><br>
    <input type="submit" value="strzał" onclick="strzal();"><br>
    <input type="submit" value="rozstaw" onClick="rozstaw();"><br>
    <span id="informator"></span>
</center>

	<script>
        var rzad, krotka, koordy_B = [], koordy_A = [], zmienna_A = [], zmienna_B = [], licznik = 0;
        var informator = document.getElementById("informator");
        // tworzenie 2D tablicy
                for(var i = 0; i < 9; ++i) {
            koordy_A[i] = [ ];
            koordy_B[i] = [ ];
            zmienna_A[i] = [ ];
            zmienna_B[i] = [ ];
            for(var j = 0; j < 9; ++j) {
                koordy_A[i][j] = 0;
                koordy_B[i][j] = 0;
                zmienna_A[i][j] = 0;
                zmienna_B[i][j] = 0;
            }
        }
        // przypisywanie poszczegolnych krotek do tablicy
        for(i=0;i<64;i++)
        {
            rzad = parseInt(i/8);
            krotka = i%8;
            koordy_A[rzad][krotka] = document.getElementsByClassName('statek_A')[i];
        }

		function strzal() {
            // zbieranie wartosci z inputow
			var x = document.getElementById('y').value;
            var y = document.getElementById('x').value;
            koordy_A[x][y].innerHTML = "x";
            // 1 = rozstawiony statek na krotce 0 = nic -1 = punkt który zostal juz postrzelony
            if(zmienna_A[x][y]==1)
            {
                zmienna_A[x][y]=-1;
                koordy_A[x][y].innerHTML = "<font color=\"red\">x</font>";
                informator.innerHTML = "TRAFIONY!";
                hit.play();
            }
            else if(zmienna_A[x][y]==-1)
                informator.innerHTML = "To pole jest juz postrzelone";
            else
            {
            zmienna_A[x][y]--;
            informator.innerHTML = "";
            miss.play();
            }
        }
        /*
        function rozstaw() {
			var y = document.getElementById('y').value;
            var x = document.getElementById('x').value;

            if(zmienna_A[x][y]==1 || zmienna_A[x][y]==-1 || licznik>=4)
            informator.innerHTML = "Nie mozesz tu postawic jednostki";
            else
            {
            koordy_A[x][y].innerHTML = "o";
            zmienna_A[x][y]=1;
            licznik++;
            informator.innerHTML = "";
            }
        }
        */
        function rozstaw_rand()
        {
            var dlugosc=0, pion, poziom;
            for(var i=8;i<=8;i++)
            {
                pion=Math.floor(Math.random() * 2);
                if(pion==0)
                poziom=1;
				else
				poziom=0;
                // ustalanie dlugosci statkow i zagwarantowanie nie wychodzenia poza tabele
                if(i<=4)
                {
                    dlugosc = 1;
                    x=Math.floor(Math.random() * 8);
                    y=Math.floor(Math.random() * 8);
                }
                else if(i<=7 && i>=5)
                {
                    dlugosc = 2
                    x=Math.floor(Math.random() * (8-pion));
                    y=Math.floor(Math.random() * (8-poziom));
                }
                else if(i<=8 && i>=7)
                {
                    dlugosc = 3;
                    x=Math.floor(Math.random() * (8-(pion*2)));
                    y=Math.floor(Math.random() * (8-(poziom*2)));
                }
                else if(i==8)
                {
                    dlugosc = 4;
                    x=Math.floor(Math.random() * (8-(pion*3)));
                    y=Math.floor(Math.random() * (8-(poziom*3)));
                }
                for(var j=0;j<=dlugosc-1;j++)
                {
                    if(pion==1)
                    {
						if(x+j>8)
						{
							alert("Blad! x: " + x + "j: " + j);
						}
                        koordy_A[x+j][y].innerHTML = "o";
                        zmienna_A[x+j][y]=1;

                    }
                    else
                    {
                        koordy_A[x][y+j].innerHTML = "o";
                        zmienna_A[x][y+j]=1;
                    }
                }
            }
        }

    </script><!--jedna 4 dwie 3 trzy 2 cztery 1 opcje generatora liczb pseudolosowych dla komputera-->
    </main>
</body>
</html>