Projekt na 4 wieczory, taki na szybko w celu zdobycia doświadczenia, rozeznania i rozgrzewki przed:
gra w statki - koncepcja
Od strony wizualnej można by co nieco poprawić, mnie bardziej interesuje opinia na temat kodu w JS:
// ----------------------------------------------------------------
// deklaracja zmiennych
// przyciski
let generateButton = document.getElementById("losuj");
let resetButton = document.getElementById("resetuj");
// status pól planszy (max 100) (0-99)
let areaSize = 100;
let freeAreas = document.getElementsByTagName("td");
// zebrane punkty i oddane strzały
let totalHitsByUser = 0;
let totalHitsByPc = 0;
let totalShotsByUser = 0;
let totalShotsByPc = 0;
let currentScore = document.getElementsByTagName("p");
// wyniki losowania (pozycja i kierunek statku)
let generateShipPositionResult = 0;
let generateShipDirectionResult = false;
// rozmiary i ilość statków
let shipLength = 0;
let noOfShips = 5;
// tymczasowe
let temp = 1;
// ----------------------------------------------------------------
// obsługa kliknięcia na planszę oraz przycisków losuj, reset, xxx
// klinięcie każdego pola - albo trafione - Hit, albo nie - Miss
for (let i = 0 ; i < freeAreas.length ; i++)
{
freeAreas[i].addEventListener('click', function()
{
if ((this.textContent != "M") && (this.textContent.charAt(0) != "H"))
{
totalShotsByUser++;
checkIfHitOrMiss(this.id);
}
updateResults();
})
}
// przycisk losujący planszę
generateButton.addEventListener('click', function()
{
// wylosuj i zablokuj przycisk
generateButton.disabled = true;
for (let i = 0 ; i < noOfShips ; i++)
{
// ustal długość okrętu (1-2-3-4-5)
shipLength+=1;
// wylosuj pozycję tak, by zmieściła się na planszy uwzględniając długość okrętu
do
{
generateShipPositionResult = Math.floor((areaSize - 1) * Math.random());
}
while (!((generateShipPositionResult + shipLength) < 101));
// wylosuj kierunkek
generateShipDirectionResult = Math.random() < 0.5;
// pokaż w konsoli
console.log("wylosowana pozycja: " + (1 + generateShipPositionResult));
console.log("kierunek (true - w prawo): " + generateShipDirectionResult);
console.log("długość statku: " + shipLength);
// rysowanie
if ((checkIfFits(generateShipPositionResult, generateShipDirectionResult, shipLength)) && (checkIfColision(generateShipPositionResult, generateShipDirectionResult, shipLength)))
{
// nie ma kolizji i mieści się na planszy - jest ok
if (generateShipDirectionResult)
{
// true - poziomo w prawo
for (let i = 0 ; i < shipLength ; i++)
{
freeAreas[generateShipPositionResult + i].textContent = "X" + shipLength;
freeAreas[generateShipPositionResult + i].className = "random";
}
}
else
{
// false - pionowo w dół
for (let i = 0 ; i < (shipLength * 10) ; i += 10)
{
freeAreas[generateShipPositionResult + i].textContent = "X" + shipLength;
freeAreas[generateShipPositionResult + i].className = "random";
}
}
}
else
{
// losuj do skutku - w razie niepowodzenia cofamy pętlę
i--;
shipLength--;
}
}
})
// przycisk resetujący planszę
resetButton.addEventListener('click', function()
{
window.location.reload();
})
// ----------------------------------------------------------------
// metody pomocznicze
// czy mieściy się na planszy?
function checkIfFits(p, d, l)
{
let noFit = true;
if (d)
{
// sprawdzamy w prawo bo poziomo
if ((parseInt(freeAreas[p].id.charAt(2)) + parseInt(l) > 11) || (freeAreas[p].id.substring(2) == "10"))
{
console.log("poza obszarem poziomo!");
return false;
}
}
else
{
// sprawdzamy w dół bo pionowo
if ((parseInt(freeAreas[p].id.charAt(1)) + parseInt(l) > 11) || (freeAreas[p].id.substring(1,3) == "10") || (freeAreas[p].id == "x110"))
{
console.log("poza obszarem pionowo!");
return false;
}
}
return noFit;
}
// czy nie ma kolizji?
function checkIfColision(p, d, l)
{
let noColision = true;
if (d)
{
// sprawdzamy w prawo bo poziomo
for (let i = 0 ; i < l ; i++)
{
if (freeAreas[p+i].textContent.charAt(0) == "X")
{
console.log("kolizja poziomo!");
return false;
}
}
}
else
{
// sprawdzamy w dół bo pionowo
for (let i = 0 ; i < (l * 10) ; i+=10)
{
if (freeAreas[p+i].textContent.charAt(0) == "X")
{
console.log("kolizja pionowo!");
return false;
}
}
}
return noColision;
}
// czy trafiliśmy?
function checkIfHitOrMiss(p)
{
let position = document.getElementById(p);
if (position.textContent.charAt(0) == "X")
{
position.className = "hit";
position.textContent = "H" + position.textContent.charAt(1);
totalHitsByUser++;
}
else
{
position.className = "miss";
position.textContent = "M";
}
}
function updateResults()
{
currentScore[0].textContent = "Liczba oddanych strzałów: " + totalShotsByUser;
currentScore[1].textContent = "Liczba trafień: " + totalHitsByUser;
if (totalHitsByUser == 15)
{
alert("Wygrałeś!");
}
}