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.
<!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>
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP