|
1 | 1 | # Battleship-JavaScript |
2 | 2 | A very very simple Battleship game written in plain JavaScript: http://learntocodela.github.io/Battleship-JavaScript/ |
| 3 | + |
| 4 | +Read about the game and its rules here: https://en.wikipedia.org/wiki/Battleship_(game) |
| 5 | + |
| 6 | +## Step 1: Create your files |
| 7 | + |
| 8 | +Useful references: |
| 9 | +- [Final HTML file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/index.html) |
| 10 | +- [Final CSS file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/style.css) |
| 11 | +- [Final JS file](https://github.com/LearnToCodeLA/Battleship-JavaScript/blob/gh-pages/battleship.js) |
| 12 | +- [CSS Relative and Absolute Positioning](http://learnlayout.com/position.html) |
| 13 | + |
| 14 | +## Step 2: Create a grid on your HTML page for the game board |
| 15 | + |
| 16 | +Useful references: |
| 17 | +- [Document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) |
| 18 | +- [Document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) |
| 19 | +- [appendChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) |
| 20 | +- [style property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) |
| 21 | +- [Loops in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) |
| 22 | + |
| 23 | +## Step 3: Model the game board in JavaScript and place ships |
| 24 | + |
| 25 | +Useful references: |
| 26 | +- [Arrays in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) |
| 27 | + |
| 28 | +## Step 4: Create event handler and write the game logic |
| 29 | + |
| 30 | +Useful references: |
| 31 | +- [Events in JavaScript](http://www.kirupa.com/html5/javascript_events.htm) |
| 32 | +- [Handling Events for Many Elements](http://www.kirupa.com/html5/handling_events_for_many_elements.htm) |
| 33 | + |
| 34 | +## Step 5: Play the game! |
| 35 | + |
| 36 | +Play the game here: http://learntocodela.github.io/Battleship-JavaScript/ |
| 37 | + |
| 38 | +Features to implement next: |
| 39 | +- Display game messages within the HTML page instead of using [alert()](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) |
| 40 | +- Randomize placement of the ships at the start of each game |
| 41 | +- Make better graphics, maybe add sound effects? |
| 42 | +- Make a 2-player version of the game! |
0 commit comments