Battleships Starter v2

Developer
Yang Li
Size
2,283 Kb
Views
34,408
  1. Battleships Starter v2 Previews
  2. Battleships Starter v2 HTML Codes
  3. Battleships Starter v2 CSS Codes
  4. Battleships Starter v2 JS Codes

How do I make an battleships starter v2?

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

Battleships Starter v2 Previews
IQ Test

Battleships Starter v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Battleships Starter v2</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 v2 - 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 v2 - 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 value until all three are different // Using three variables to save our ship positions
// Looping through all boxes so we can run an onclick on each one // Declare variable to hold each single box // Creating an onclick event on the variabled we just declared // Getting attribute from id and getting rid of the "n" just before it // Converting string to integer // Using conditional to check if the clicked position matches a ship's location // If we get a hit, the box changes to black // Display success message // If we get no hits, display "try again" message
Battleships Starter v2 - Script Codes
Battleships Starter v2 - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,283 Kb
Views 34,408
Do you need developer help for Battleships Starter v2?

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
Animated Clock
Recreate Google
Battleships Starter
Mac Bar
Animated Clock Starter
Responding Boxes
Simple Hamburger Menu
PokemonJourney
Click Me, Name Me
Fellowship of the Ring
Create amazing web content 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!