Skip to content

Commit 27b3dc9

Browse files
QuocThiQuocThi
authoredNov 3, 2018
Merge pull request #1 from QuocThi/gameplay
Gameplay
2 parents 0674246 + 0860e6c commit 27b3dc9

File tree

6 files changed

+906
-0
lines changed

6 files changed

+906
-0
lines changed
 

‎battleship/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Viktor Yberg
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎battleship/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Battleship
2+
3+
A simple 2-player battleship game written in HTML and JavaScript to be played on the same computer
4+
5+
<img src="https://raw.githubusercontent.com/yberg/battleship/master/scrnshot.png" width="550"/>

‎battleship/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Battleship</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div id="left">
10+
<div class="container" style="float: right">
11+
<h1 id="p1" style="position: absolute; right: 0">Player 1</h1>
12+
<div id="player1-board" class="board">
13+
<!-- Board -->
14+
</div>
15+
<div class="ship-container">
16+
<div style="display: inline-block; width: 100%; float: none;">
17+
<div class="ship-placeholder"><div id="shipNo1" class="ship ship2"></div></div>
18+
<div class="ship-placeholder"><div id="shipNo2" class="ship ship3"></div></div>
19+
<div class="ship-placeholder"><div id="shipNo3" class="ship ship3"></div></div>
20+
<div class="ship-placeholder"><div id="shipNo4" class="ship ship4"></div></div>
21+
<div class="ship-placeholder"><div id="shipNo5" class="ship ship5"></div></div>
22+
</div>
23+
<button id="1" class="hidden">Ready</button>
24+
<div class="score">
25+
<span id="shots">Shots: &nbsp; 0</span>
26+
<span id="hits">Hits: &nbsp;&nbsp;&nbsp;&nbsp; 0</span>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
<div id="right">
32+
<div class="container" style="float: left">
33+
<h1 id="p2" style="position: absolute">Player 2</h1>
34+
<button id="reset">Reset</button>
35+
<div id="player2-board" class="board">
36+
<!-- Board -->
37+
</div>
38+
<div class="ship-container">
39+
<div style="display: inline-block; width: 50%; float: left">
40+
<div class="ship-placeholder"><div class="ship ship2"></div></div>
41+
<div class="ship-placeholder"><div class="ship ship3"></div></div>
42+
<div class="ship-placeholder"><div class="ship ship3v3"></div></div>
43+
<div class="ship-placeholder"><div class="ship ship4"></div></div>
44+
<div class="ship-placeholder"><div class="ship ship5"></div></div>
45+
</div>
46+
<div style="display: inline-block; width: 55%; float: left; margin-left: -25px">
47+
<div class="ship-placeholder vertical"><div class="ship ship2 vertical"></div></div>
48+
<div class="ship-placeholder vertical"><div class="ship ship3 vertical"></div></div>
49+
<div class="ship-placeholder vertical"><div class="ship ship3v3 vertical"></div></div>
50+
<div class="ship-placeholder vertical"><div class="ship ship4 vertical"></div></div>
51+
<div class="ship-placeholder vertical"><div class="ship ship5 vertical"></div></div>
52+
</div>
53+
<button id="2" class="hidden">Ready</button>
54+
<div class="score">
55+
<span id="shots">Shots: &nbsp; 0</span>
56+
<span id="hits">Hits: &nbsp;&nbsp;&nbsp;&nbsp; 0</span>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
63+
<script src="script.js"></script>
64+
</body>
65+
</html>

‎battleship/script.js

+527
Large diffs are not rendered by default.

‎battleship/style.css

+288
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Helvetica Neue", Helvetica;
6+
text-shadow: 1px 1px 2px rgba(0,0,0,.6);
7+
}
8+
9+
html, body {
10+
background: #333;
11+
}
12+
13+
h1 {
14+
color: #ccc;
15+
}
16+
17+
#left {
18+
position: relative;
19+
width: 50%;
20+
padding: 20px;
21+
float: left;
22+
}
23+
24+
#right {
25+
position: relative;
26+
width: 50%;
27+
padding: 20px;
28+
float: left;
29+
}
30+
31+
.container {
32+
position: relative;
33+
width: 500px;
34+
}
35+
36+
.board {
37+
position: relative;
38+
margin: 50px auto 0 auto;
39+
width: 500px;
40+
height: 500px;
41+
border: 5px solid #ccc;
42+
border-radius: 5px;
43+
background-color: #03A9F4;
44+
background-image: url(water.jpg);
45+
box-shadow: 0 0 20px 5px rgba(0,0,0,.3);
46+
transition: all .1s;
47+
}
48+
49+
.board.shoot,
50+
.board.winner {
51+
border: 5px solid #AFB42B;
52+
}
53+
54+
/*
55+
Display block in the board
56+
*/
57+
.board > div {
58+
position: relative;
59+
display: block;
60+
float: left;
61+
border: 1px solid #333;
62+
}
63+
64+
/*
65+
Display base element (box-shadow + border-radius + height)
66+
- 'display: none' will make all the element below not show ;
67+
*/
68+
.board > div::after,
69+
.board > div::before,
70+
div.ship::before {
71+
position: absolute;
72+
display: none;
73+
content: "";
74+
75+
border-radius: 50%;
76+
height: 50%;
77+
box-shadow: 0 1px 3px rgba(0,0,0,.6);
78+
left: 10%;
79+
top: 25%;
80+
}
81+
82+
/*
83+
Create pointer cursor when hover + display block
84+
div.place-ship:hover::before
85+
*/
86+
div.ship::before,
87+
div.place-ship::before{
88+
display: block;
89+
cursor: pointer;
90+
z-index: 2;
91+
}
92+
93+
div.opacity::before{
94+
opacity: 0.5;
95+
}
96+
97+
/*
98+
ship shape and color
99+
*/
100+
div.ship2::before {
101+
width: 180%;
102+
background: linear-gradient(#CDDC39, #AFB42B); /* 500, 700 */
103+
border-bottom: 2px solid #827717; /* 900 */
104+
}
105+
106+
div.ship2.left::before{
107+
left: -100%;
108+
}
109+
110+
div.ship2.vertical::before {
111+
left: -40%;
112+
top: 80%;
113+
}
114+
115+
div.ship2.vertical.up::before {
116+
top: -40%;
117+
}
118+
119+
div.ship3::before {
120+
width: 280%;
121+
background: linear-gradient(#4CAF50, #388E3C); /* 500, 700 */
122+
border-bottom: 2px solid #1B5E20; /* 900 */
123+
}
124+
125+
div.ship3.left::before {
126+
left: -200%;
127+
}
128+
129+
div.ship3.vertical::before {
130+
left: -90%;
131+
top: 130%;
132+
}
133+
134+
div.ship3.vertical.up::before {
135+
top: -90%;
136+
}
137+
138+
div.ship3v3::before {
139+
width: 280%;
140+
background: linear-gradient(#FF5722, #E64A19); /* 500, 700 */
141+
border-bottom: 2px solid #BF360C; /* 900 */
142+
}
143+
144+
div.ship3v3.left::before {
145+
left: -200%;
146+
}
147+
148+
div.ship3v3.vertical::before {
149+
left: -90%;
150+
top: 130%;
151+
}
152+
153+
div.ship3v3.vertical.up::before {
154+
top: -90%;
155+
}
156+
157+
div.ship4::before {
158+
width: 380%;
159+
background: linear-gradient(#795548, #5D4037); /* 500, 700 */
160+
border-bottom: 2px solid #3E2723; /* 900 */
161+
}
162+
163+
div.ship4.left::before {
164+
left: -300%;
165+
}
166+
167+
div.ship4.vertical::before {
168+
left: -145%;
169+
top: 180%;
170+
}
171+
172+
div.ship4.vertical.up::before {
173+
top: -145%;
174+
}
175+
176+
div.ship5::before {
177+
width: 480%;
178+
background: linear-gradient(#607D8B, #455A64); /* 500, 700 */
179+
border-bottom: 2px solid #263238; /* 900 */
180+
}
181+
182+
div.ship5.left::before {
183+
left: -400%;
184+
}
185+
186+
div.ship5.vertical::before {
187+
left: -190%;
188+
top: 230%;
189+
}
190+
191+
div.ship5.vertical.up::before {
192+
top: -190%;
193+
}
194+
195+
div.ship.vertical::before,
196+
div.place-ship.vertical::before {
197+
transform: rotate(90deg);
198+
}
199+
200+
.board.shoot > div::after {
201+
width: 50%;
202+
height: 50%;
203+
left: 25%;
204+
top: 25%;
205+
cursor: pointer;
206+
}
207+
208+
.board.shoot > div:hover::after {
209+
display: block;
210+
}
211+
212+
div.bomb::after {
213+
display: block;
214+
width: 30%;
215+
height: 30%;
216+
left: 35%;
217+
top: 35%;
218+
box-shadow: inset 0 0 3px 0px #000;
219+
background: linear-gradient(#F44336, #D32F2F); /* 500, 700 */
220+
border-bottom: none;
221+
}
222+
223+
div.bomb:not(.ship)::after {
224+
background: linear-gradient(#F5F5F5, #E0E0E0); /* 500, 700 */
225+
}
226+
227+
.ship-container {
228+
position: relative;
229+
}
230+
231+
.ship-placeholder {
232+
position: relative;
233+
width: 55px;
234+
height: 55px;
235+
top: 20px;
236+
}
237+
238+
.ship-placeholder.vertical {
239+
float: left;
240+
top: 0px;
241+
margin-top: 0px;
242+
}
243+
244+
button {
245+
position: absolute;
246+
height: 40px;
247+
width: 100px;
248+
margin-left: -100px;
249+
top: 20px;
250+
border: none;
251+
background: linear-gradient(#2196F3, #1E88E5); /* 500, 700 */
252+
border-bottom: 2px solid #1565C0; /* 900 */
253+
border-radius: 5px;
254+
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
255+
color: #ccc;
256+
font-weight: bold;
257+
font-size: 17px;
258+
line-height: 42px;
259+
cursor: pointer;
260+
}
261+
262+
button.hidden {
263+
display: none;
264+
}
265+
266+
button#reset {
267+
position: absolute;
268+
right: 0;
269+
top: 0;
270+
margin: 0;
271+
}
272+
273+
.score {
274+
display: none;
275+
top: 20px;
276+
position: absolute;
277+
width: 200px;
278+
}
279+
280+
.score span {
281+
display: block;
282+
font-size: 26px;
283+
color: #ccc;
284+
}
285+
286+
div .selected {
287+
border: medium ridge red;
288+
}

‎battleship/water.jpg

2.99 MB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.