Skip to content

Commit be070ca

Browse files
committed
Update README.md
1 parent 7cdba5a commit be070ca

1 file changed

Lines changed: 40 additions & 0 deletions

File tree

README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,42 @@
11
# Battleship-JavaScript
22
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

Comments
 (0)