commit fbde09d42763a8cfb35f1a486de65c89daa11898 Author: Prabhat Maurya Date: Sun Jan 19 19:45:54 2025 +0530 initial commit diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..f98ddf1 --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,11 @@ +pages: + stage: deploy + script: + - mkdir .public + - cp -r * .public + - mv .public public + artifacts: + paths: + - public + only: + - main diff --git a/HowToPlay.html b/HowToPlay.html new file mode 100755 index 0000000..132ede8 --- /dev/null +++ b/HowToPlay.html @@ -0,0 +1,38 @@ + + + + + + + How to play + + + + + + + +

Read on how to play

Intro

+ This is a guessing game that is divided into cells and columns. Alphabet (A – G) represents the column and number (0-6) represents the row. +

+ +

Goal

+ At the right-bottom corner, there is an input box that accepts your input. Your job is to provide the two characters (for example B3) of which the first character is the alphabet from A to G (All in Caps) and a second character is a number from 0 to 6 into the input box. Your input will target the cell (combined with these two characters) to reveal its hidden value. +

+ +

+ The game consists of 9 ships hidden behind these cells. You need to find or hit those ships in the minimum guess possible. When all the ships are found the game is over. +

+ +

+ All right then, happy playing. +

+ + back + + diff --git a/README.md b/README.md new file mode 100755 index 0000000..bd544d5 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# BattleshipGame +Game for kids diff --git a/battleship.js b/battleship.js new file mode 100755 index 0000000..3dcd6fa --- /dev/null +++ b/battleship.js @@ -0,0 +1,212 @@ +var model = { + boardSize: 7, + numShips: 3, + shipLength: 3, + shipsSunk: 0, + + ships: [ + { locations: [0, 0, 0], hits: ["", "", ""] }, + { locations: [0, 0, 0], hits: ["", "", ""] }, + { locations: [0, 0, 0], hits: ["", "", ""] } + ], + +// original hard-coded values for ship locations +/* + ships: [ + { locations: ["06", "16", "26"], hits: ["", "", ""] }, + { locations: ["24", "34", "44"], hits: ["", "", ""] }, + { locations: ["10", "11", "12"], hits: ["", "", ""] } + ], +*/ + + fire: function(guess) { + for (var i = 0; i < this.numShips; i++) { + var ship = this.ships[i]; + var index = ship.locations.indexOf(guess); + + // here's an improvement! Check to see if the ship + // has already been hit, message the user, and return true. + if (ship.hits[index] === "hit") { + view.displayMessage("Oops, you already hit that location!"); + return true; + } else if (index >= 0) { + ship.hits[index] = "hit"; + view.displayHit(guess); + view.displayMessage("HIT!"); + + if (this.isSunk(ship)) { + view.displayMessage("You sank my battleship!"); + this.shipsSunk++; + } + return true; + } + } + view.displayMiss(guess); + view.displayMessage("You missed."); + return false; + }, + + isSunk: function(ship) { + for (var i = 0; i < this.shipLength; i++) { + if (ship.hits[i] !== "hit") { + return false; + } + } + return true; + }, + + generateShipLocations: function() { + var locations; + for (var i = 0; i < this.numShips; i++) { + do { + locations = this.generateShip(); + } while (this.collision(locations)); + this.ships[i].locations = locations; + } + console.log("Ships array: "); + console.log(this.ships); + }, + + generateShip: function() { + var direction = Math.floor(Math.random() * 2); + var row, col; + + if (direction === 1) { // horizontal + row = Math.floor(Math.random() * this.boardSize); + col = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1)); + } else { // vertical + row = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1)); + col = Math.floor(Math.random() * this.boardSize); + } + + var newShipLocations = []; + for (var i = 0; i < this.shipLength; i++) { + if (direction === 1) { + newShipLocations.push(row + "" + (col + i)); + } else { + newShipLocations.push((row + i) + "" + col); + } + } + return newShipLocations; + }, + + collision: function(locations) { + for (var i = 0; i < this.numShips; i++) { + var ship = this.ships[i]; + for (var j = 0; j < locations.length; j++) { + if (ship.locations.indexOf(locations[j]) >= 0) { + return true; + } + } + } + return false; + } + +}; + + +var view = { + displayMessage: function(msg) { + var messageArea = document.getElementById("messageArea"); + messageArea.innerHTML = msg; + }, + + displayHit: function(location) { + var cell = document.getElementById(location); + cell.setAttribute("class", "hit"); + }, + + displayMiss: function(location) { + var cell = document.getElementById(location); + cell.setAttribute("class", "miss"); + } + +}; + +var controller = { + guesses: 0, + + processGuess: function(guess) { + var location = parseGuess(guess); + if (location) { + this.guesses++; + var hit = model.fire(location); + if (hit && model.shipsSunk === model.numShips) { + view.displayMessage("You sank all my battleships, in " + this.guesses + " guesses"); + } + } + } +} + + +// helper function to parse a guess from the user + +function parseGuess(guess) { + var alphabet = ["A", "B", "C", "D", "E", "F", "G"]; + + if (guess === null || guess.length !== 2) { + alert("Oops, please enter a letter and a number on the board."); + } else { + var firstChar = guess.charAt(0); + var row = alphabet.indexOf(firstChar); + var column = guess.charAt(1); + + if (isNaN(row) || isNaN(column)) { + alert("Oops, that isn't on the board."); + } else if (row < 0 || row >= model.boardSize || + column < 0 || column >= model.boardSize) { + alert("Oops, that's off the board!"); + } else { + return row + column; + } + } + return null; +} + + +// event handlers + +function handleFireButton() { + var guessInput = document.getElementById("guessInput"); + var guess = guessInput.value.toUpperCase(); + + controller.processGuess(guess); + + guessInput.value = ""; +} + +function handleKeyPress(e) { + var fireButton = document.getElementById("fireButton"); + + // in IE9 and earlier, the event object doesn't get passed + // to the event handler correctly, so we use window.event instead. + e = e || window.event; + + if (e.keyCode === 13) { + fireButton.click(); + return false; + } +} + + +// init - called when the page has completed loading + +window.onload = init; + +function init() { + // Fire! button onclick handler + var fireButton = document.getElementById("fireButton"); + fireButton.onclick = handleFireButton; + + // handle "return" key press + var guessInput = document.getElementById("guessInput"); + guessInput.onkeypress = handleKeyPress; + + // place the ships on the game board + model.generateShipLocations(); +} + + + + + diff --git a/images/board.jpg b/images/board.jpg new file mode 100755 index 0000000..f1616c1 Binary files /dev/null and b/images/board.jpg differ diff --git a/images/miss.png b/images/miss.png new file mode 100755 index 0000000..471b3a6 Binary files /dev/null and b/images/miss.png differ diff --git a/images/ship.png b/images/ship.png new file mode 100755 index 0000000..955a7e5 Binary files /dev/null and b/images/ship.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..695e647 --- /dev/null +++ b/index.html @@ -0,0 +1,96 @@ + + + + + + + Battleship Game + + + + + + + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + +

+ How to play +

+ +

+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100755 index 0000000..06f94e5 --- /dev/null +++ b/style.css @@ -0,0 +1,89 @@ +.gameContainer{ + background-color: black; +} + +.board{ + position: relative; + width: 1024px; + height: 863px; + margin: auto; + background: url("./images/board.jpg") no-repeat; +} + +#messageArea{ + position: absolute; + top: 0; + left: 0; + color: white; + font-size: 200%; +} + +table{ + position: absolute; + left: 173px; + top: 98px; + border-spacing: 0; +} + +td{ + width: 94px; + height: 94px; +} + +form{ + position: absolute; + bottom: 0; + right: 0; + padding: 15px; + background-color: #79B4B7; +} + +form input{ + background-color: #D4ECDD; + font-size: 100%; +} + +.hit{ + background: url(./images/ship.png) no-repeat center center; +} + +.miss{ + background: url(./images/miss.png) no-repeat center center; +} + +.container{ + margin: 0 20%; + +} + +h1{ + color: #345B63; + font-family: 'Montserrat', sans-serif; + font-weight: 700; +} + +h2{ + color: #00A19D; + font-family: 'Montserrat', sans-serif; + font-weight: 500; +} +p{ + font-family: 'Open Sans', sans-serif; +} + +.howTo{ + position:absolute; + bottom: 0; + left: 0; +} + +a{ + color: #00A19D; + font-size: 200%; + text-transform: capitalize; + text-decoration: none; +} + +a:hover{ + color: #FFB830 ; +} \ No newline at end of file