Battleships Starter

Developer
Yang Li
Size
2,429 Kb
Views
42,504
  1. Battleships Starter Previews
  2. Battleships Starter HTML Codes
  3. Battleships Starter CSS Codes
  4. Battleships Starter JS Codes

How do I make an battleships starter?

What is a battleships starter? How do you make a battleships starter? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Battleships Starter Previews
IQ Test

Battleships Starter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Battleships Starter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Welcome to Battleships!</h1> <h3>Where are the ships?</h3> <div id="board"> <div class="row"> <div class="column" id="n1"></div> <div class="column" id="n2"></div> <div class="column" id="n3"></div> <div class="column" id="n4"></div> <div class="column" id="n5"></div> </div> <div class="row"> <div class="column" id="n6"></div> <div class="column" id="n7"></div> <div class="column" id="n8"></div> <div class="column" id="n9"></div> <div class="column" id="n10"></div> </div> <div class="row"> <div class="column" id="n11"></div> <div class="column" id="n12"></div> <div class="column" id="n13"></div> <div class="column" id="n14"></div> <div class="column" id="n15"></div> </div> <div class="row"> <div class="column" id="n16"></div> <div class="column" id="n17"></div> <div class="column" id="n18"></div> <div class="column" id="n19"></div> <div class="column" id="n20"></div> </div> <div class="row"> <div class="column" id="n21"></div> <div class="column" id="n22"></div> <div class="column" id="n23"></div> <div class="column" id="n24"></div> <div class="column" id="n25"></div> </div> </div> <div id='try'> <h1>Try Again</h1> </div> <div id='success'> <h1>Nice!</h1> </div> <script src="js/index.js"></script>
</body>
</html>

Battleships Starter - Script Codes CSS Codes

body { text-align: center;
}
#board { width: 500px; height: 500px; border-style: double; border-color: black; margin: 0 auto;
}
.row { display: flex; width: 500px; height: 100px;
}
.column { width: 100px; height: 100px; border-style:solid; border-color: black; transition: all .2s ease-in-out;
}
.column:hover { background-color: red; transform: scale(1.25);
}
img { width: 80px; height: 80px;
}
#try { display: none;
}
#success { display: none;
}

Battleships Starter - Script Codes JS Codes

// Boxes is an **array** of DOM elements
var boxes = document.getElementsByClassName("column");
// Writing a while loop to keep setting a random values until all three are different
while (/*some condition*/) { // Using three variables to save our ship positions var ship1 = /*random number between 1 and 25*/; var ship2 = /*random number between 1 and 25*/; var ship3 = /*random number between 1 and 25*/;
}
// Looping through all boxes so we can run an onclick on each one
for(/*some condition*/) { // Declare variable to hold each single box // Creating an onclick event on the variable we just declared // Getting attribute from id and getting rid of the "n" just before it - already done var str = this.getAttribute('id'); str = str.substring(1); // Converting string to integer - already done var position = parseInt(str); // Using conditional to check if the clicked position matches a ship's location if (/*some condition*/) { // If we get a hit, the box changes to black // Display success message; hide the "try again" message. } else { // If we get no hits, display "try again" message; hide the success message } }
};
Battleships Starter - Script Codes
Battleships Starter - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,429 Kb
Views 42,504
Do you need developer help for Battleships Starter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
Battleships
Birthday Party Starter
Drumkit
Click Me, Name Me
Geography Quiz
Sunny Day Driving Starter
Goalkeeper
Googly Eye
Fellowship of the Ring
Animated Clock
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!