Add files via upload

nataliedex · May 11, 2024 · 86510d6 · 86510d6
commit 86510d6
Show file tree

Hide file tree

Showing 3 changed files with 267 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Battleship</title>
+    <link rel ="stylesheet" href="./styles.css">
+    <link
+      href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster"
+      rel="stylesheet"
+    />
+</head>
+<body>
+    <h1>Battleship</h1>
+    <p>Rules: Select a row and a column where you think the ship is hiding.
+        There are 3 ships on the 5X5 board and each ship has a length of 3.
+    </p>
+
+    <div class="container">
+
+        <div class="square btn00"></div>
+        <div class="square btn01"></div>
+        <div class="square btn02"></div>
+        <div class="square btn03"></div>
+        <div class="square btn04"></div>
+
+        <div class="square btn10"></div>
+        <div class="square btn11"></div>
+        <div class="square btn12"></div>
+        <div class="square btn13"></div>
+        <div class="square btn14"></div>
+
+        <div class="square btn20"></div>
+        <div class="square btn21"></div>
+        <div class="square btn22"></div>
+        <div class="square btn23"></div>
+        <div class="square btn24"></div>
+
+        <div class="square btn30"></div>
+        <div class="square btn31"></div>
+        <div class="square btn32"></div>
+        <div class="square btn33"></div>
+        <div class="square btn34"></div>
+
+        <div class="square btn40"></div>
+        <div class="square btn41"></div>
+        <div class="square btn42"></div>
+        <div class="square btn43"></div>
+        <div class="square btn44"></div>
+
+
+    </div>
+
+    <p class="guess">Guess Count:</p>
+    <p class="hits">Total Hits:</p>
+    <p class="statment"></p>
+
+
+    <script src="./index.js"></script>
+
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,146 @@
+var shipRow;
+var shipCol;
+var direction = true;
+var space1;
+var space2;
+var space3;
+
+//put ships on the grid
+function spot() {
+    direction = Math.floor(Math.random()*2);
+    if(direction === 0){
+        direction = true;
+    } else {
+        direction = false;
+    }
+    shipRow = Math.floor(Math.random()*3);
+    shipCol = Math.floor(Math.random()*3);
+}
+
+
+function Assign(space1, space2, space3){
+    this.space1 = space1;
+    this.space2 = space2;
+    this.space3 = space3;
+}
+
+function buildShip(){
+    spot();
+    //vertical ship
+    if(direction === true){
+        space1 = ".btn"+shipRow+shipCol;
+        space2 = ".btn"+(shipRow+1)+shipCol;
+        space3 = ".btn"+(shipRow+2)+shipCol;
+    }
+    //horizontal
+    else {
+        space1 = ".btn"+shipRow+shipCol;
+        space2 = ".btn"+shipRow+(shipCol+1);
+        space3 = ".btn"+shipRow+(shipCol+2);
+
+    }
+}
+
+//function checks whether the space is occupied
+function check(){
+    var checkSpot = 2;
+    while(checkSpot > 1){
+        console.log(space1);
+        console.log(space2);
+        console.log(space3);
+
+        if(
+            document.querySelector(space1).classList.contains("ship") ||
+            document.querySelector(space2).classList.contains("ship") ||
+            document.querySelector(space3).classList.contains("ship")
+        )
+        {
+            buildShip();
+            checkSpot = checkSpot+1;
+
+        } else {
+            checkSpot = 0;
+            document.querySelector(space1).classList.add("ship");
+            document.querySelector(space2).classList.add("ship");
+            document.querySelector(space3).classList.add("ship");
+        }
+    }
+}
+
+
+//checks for a win
+function win(){
+    if(hitCount === 9){
+        document.querySelector("h1").innerHTML = "Good Game!"; 
+    }
+}
+
+
+//operations
+buildShip();
+check();
+var ship1 = new Assign(space1, space2, space3);
+
+
+buildShip();
+check();
+var ship2 = new Assign(space1, space2, space3);
+
+buildShip();
+check();
+var ship3 = new Assign(space1, space2, space3);
+
+console.log(ship1);
+console.log(ship2);
+console.log(ship3);
+
+
+
+var guesses = 0;
+var hitCount = 0;
+
+var totalSquares = document.querySelectorAll(".square").length;
+
+
+
+for(i = 0; i < totalSquares; i++){
+    document.querySelectorAll(".square")[i].addEventListener("click",function(){
+        guesses = guesses + 1;
+
+        if(this.classList.contains("ship")){
+            this.classList.add("hit");
+            hitCount = hitCount + 1;
+            win();
+
+        }
+        else {
+            this.classList.add("miss");
+        }
+        document.querySelector(".guess").innerHTML = "Guess Count: " + guesses;
+
+
+
+    }
+    )
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,58 @@
+
+body {
+    background-color: #393E46;
+  }
+
+  h1 {
+    margin: 30px;
+    text-align: center;
+    font-family: 'Lobster', cursive;
+    text-shadow: 5px 0 #232931;
+    font-size: 8rem;
+    color: #4ECCA3;
+  }
+
+  p {
+    font-size: 1.5rem;
+    color: #4ECCA3;
+    font-family: 'Indie Flower', cursive;
+  }
+
+.container {
+    height: 400px;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: 60px 60px 60px 60px 60px;
+    grid-template-rows: 60px 60px 60px 60px 60px; 
+    border-color: black;
+    grid-gap: 5%;
+
+
+
+}
+
+.square {
+    background-color: pink;
+    border: 1px dashed black;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+/* .ship {
+  background-color: black;
+} */
+
+.miss {
+    background-color: white;
+}
+
+.hit {
+    background-color: red;
+}
+
+
+
+
+