diff --git a/Battleship-JavaScript/Battleship.js b/Battleship-JavaScript/Battleship.js new file mode 100644 index 0000000..7ce2127 --- /dev/null +++ b/Battleship-JavaScript/Battleship.js @@ -0,0 +1,18 @@ +// this function generates a random number between a specified minimum and maximum number +function getRandomNumber(min, max) { + return Math.floor(Math.random() * (max - min) + min); +} + +// for our game, we'll pick a number from 1 to 5. This is where our "battleship" is. +var correctAnswer = getRandomNumber(1,5); + +//start the game: +var userInput = parseInt(prompt("Let's play Battleship! To fire at a battleship, please enter another number from 1 to 5:"), 10); + +// the game loop: keep asking the player to guess until they guess the right answer +while (userInput !== correctAnswer) { + var userInput = parseInt(prompt("You missed! To fire again, please enter another number from 1 to 5:"), 10); +} + +// the code below will only run when the game loop ends: +alert("You win! Battleship sunk!") \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index fd2c754..0000000 --- a/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# Battleship-JavaScript -A very very simple Battleship game written in plain JavaScript: http://learntocodela.github.io/Battleship-JavaScript/ - -Read about the game and its rules here: https://en.wikipedia.org/wiki/Battleship_(game) - -### Step 1: Create your files - -Useful references: -- [Final HTML file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/index.html) -- [Final CSS file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/style.css) -- [Final JS file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/battleship.js) -- [CSS Relative and Absolute Positioning](http://learnlayout.com/position.html) - -### Step 2: Create a grid on your HTML page for the game board - -Useful references: -- [Document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) -- [Document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) -- [appendChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) -- [style property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) -- [Loops in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) - -### Step 3: Model the game board in JavaScript and place ships - -Useful references: -- [Arrays in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) - -### Step 4: Create event handler and write the game logic - -Useful references: -- [Events in JavaScript](http://www.kirupa.com/html5/javascript_events.htm) -- [Handling Events for Many Elements](http://www.kirupa.com/html5/handling_events_for_many_elements.htm) -- [Handling Events - Eloquent JavaScript Chapter 14](http://eloquentjavascript.net/14_event.html) - -### Step 5: Play the game! - -Play the game here: http://learntocodela.github.io/Battleship-JavaScript/ - -Features to implement next: -- Display game messages within the HTML page instead of using [alert()](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) -- Randomize placement of the ships at the start of each game -- Make better graphics, maybe add sound effects? -- Make a 2-player version of the game! diff --git a/battleship.js b/battleship.js deleted file mode 100644 index b4a439b..0000000 --- a/battleship.js +++ /dev/null @@ -1,96 +0,0 @@ -// set grid rows and columns and the size of each square -var rows = 10; -var cols = 10; -var squareSize = 50; - -// get the container element -var gameBoardContainer = document.getElementById("gameboard"); - -// make the grid columns and rows -for (i = 0; i < cols; i++) { - for (j = 0; j < rows; j++) { - - // create a new div HTML element for each grid square and make it the right size - var square = document.createElement("div"); - gameBoardContainer.appendChild(square); - - // give each div element a unique id based on its row and column, like "s00" - square.id = 's' + j + i; - - // set each grid square's coordinates: multiples of the current row or column number - var topPosition = j * squareSize; - var leftPosition = i * squareSize; - - // use CSS absolute positioning to place each grid square on the page - square.style.top = topPosition + 'px'; - square.style.left = leftPosition + 'px'; - } -} - -/* lazy way of tracking when the game is won: just increment hitCount on every hit - in this version, and according to the official Hasbro rules (http://www.hasbro.com/common/instruct/BattleShip_(2002).PDF) - there are 17 hits to be made in order to win the game: - Carrier - 5 hits - Battleship - 4 hits - Destroyer - 3 hits - Submarine - 3 hits - Patrol Boat - 2 hits -*/ -var hitCount = 0; - -/* create the 2d array that will contain the status of each square on the board - and place ships on the board (later, create function for random placement!) - - 0 = empty, 1 = part of a ship, 2 = a sunken part of a ship, 3 = a missed shot -*/ -var gameBoard = [ - [0,0,0,1,1,1,1,0,0,0], - [0,0,0,0,0,0,0,0,0,0], - [0,0,0,0,0,0,0,0,0,0], - [0,0,0,0,0,0,1,0,0,0], - [0,0,0,0,0,0,1,0,0,0], - [1,0,0,0,0,0,1,1,1,1], - [1,0,0,0,0,0,0,0,0,0], - [1,0,0,1,0,0,0,0,0,0], - [1,0,0,1,0,0,0,0,0,0], - [1,0,0,0,0,0,0,0,0,0] - ] - -// set event listener for all elements in gameboard, run fireTorpedo function when square is clicked -gameBoardContainer.addEventListener("click", fireTorpedo, false); - -// initial code via http://www.kirupa.com/html5/handling_events_for_many_elements.htm: -function fireTorpedo(e) { - // if item clicked (e.target) is not the parent element on which the event listener was set (e.currentTarget) - if (e.target !== e.currentTarget) { - // extract row and column # from the HTML element's id - var row = e.target.id.substring(1,2); - var col = e.target.id.substring(2,3); - //alert("Clicked on row " + row + ", col " + col); - - // if player clicks a square with no ship, change the color and change square's value - if (gameBoard[row][col] == 0) { - e.target.style.background = '#bbb'; - // set this square's value to 3 to indicate that they fired and missed - gameBoard[row][col] = 3; - - // if player clicks a square with a ship, change the color and change square's value - } else if (gameBoard[row][col] == 1) { - e.target.style.background = 'red'; - // set this square's value to 2 to indicate the ship has been hit - gameBoard[row][col] = 2; - - // increment hitCount each time a ship is hit - hitCount++; - // this definitely shouldn't be hard-coded, but here it is anyway. lazy, simple solution: - if (hitCount == 17) { - alert("All enemy battleships have been defeated! You win!"); - } - - // if player clicks a square that's been previously hit, let them know - } else if (gameBoard[row][col] > 1) { - alert("Stop wasting your torpedos! You already fired at this location."); - } - } - e.stopPropagation(); -} diff --git a/index.html b/index.html deleted file mode 100644 index 0c68b77..0000000 --- a/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - -
-Click the board to fire at a ship. Try to sink every battleship!
- -