Skip to content

Commit 5ed5ae1

Browse files
1000p1000p
committed
Initial commit
0 parents  commit 5ed5ae1

16 files changed

+459
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/Sea Warfare Set

‎battleship/image_part_001.png

273 Bytes
Loading

‎battleship/image_part_002.png

264 Bytes
Loading

‎battleship/image_part_003.png

3.39 KB
Loading

‎battleship/image_part_004.png

353 Bytes
Loading

‎battleship/image_part_005.png

303 Bytes
Loading

‎destroyer/image_part_001.png

159 Bytes
Loading

‎destroyer/image_part_002.png

2.42 KB
Loading

‎destroyer/image_part_003.png

2.41 KB
Loading

‎destroyer/image_part_004.png

188 Bytes
Loading

‎generateFleet.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
function Ship(length,type) {
2+
this.length = length;
3+
this.tiles = [];
4+
this.type = type;
5+
this.owner;
6+
};
7+
Ship.prototype.placeShip =
8+
function (tile, direction,owner) {
9+
switch (direction) {
10+
case "horizontal":
11+
for (let i = 0; i < this.length; i++) {
12+
let mapTile = owner.tileMap[tile.X][tile.Y + i];
13+
mapTile.classList.add(this.type + (i+1));
14+
mapTile.classList.add("horizontal");
15+
mapTile.taken = true;
16+
mapTile.ship = this;
17+
this.tiles.push(mapTile);
18+
}
19+
break;
20+
21+
case "vertical":
22+
for (let i = 0; i < this.length; i++) {
23+
let mapTile = owner.tileMap[tile.X + i][tile.Y];
24+
mapTile.classList.add(this.type + (i+1));
25+
mapTile.classList.add("vertical");
26+
mapTile.taken = true;
27+
mapTile.ship = this;
28+
this.tiles.push(mapTile);
29+
}
30+
break;
31+
}
32+
this.direction = direction;
33+
this.owner = owner;
34+
}
35+
36+
Ship.prototype.takeDamage =
37+
function(tile) {
38+
this.tiles.pop();
39+
if(this.tiles.length === 0)
40+
{
41+
this.owner.ships.pop();
42+
}
43+
tile.style.classList = "tile-hit";
44+
}
45+
46+
function Battleship() {
47+
Ship.call(this, 5,"battleship");
48+
};
49+
Battleship.prototype = Object.create(Ship.prototype);
50+
Object.defineProperty(Battleship.prototype, "constructor", {
51+
value: Battleship,
52+
enumerable: false,
53+
writable: true
54+
});
55+
56+
function Destroyer() {
57+
Ship.call(this, 4,"destroyer");
58+
};
59+
Destroyer.prototype = Object.create(Ship.prototype);
60+
Object.defineProperty(Destroyer.prototype, "constructor", {
61+
value: Destroyer,
62+
enumerable: false,
63+
writable: true
64+
});

‎generatePlayground.js

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
var browserViewportHeight = $(window).height();
2+
var browserViewportWidth = $(window).width();
3+
4+
function Board(name) {
5+
this.tileMap = [];
6+
this.name = name;
7+
this.ships = [];
8+
this.bombedTiles = [];
9+
}
10+
11+
Board.prototype.placeShipsRandomly =
12+
function (arrayOfShips) {
13+
arrayOfShips.forEach(ship => {
14+
let directions = ["horizontal", "vertical"];
15+
let direction = Math.floor(Math.random() * 2);
16+
17+
let randomTile = this.getRandomTile();
18+
while (!randomTile.ship === undefined) {
19+
randomTile = this.getRandomTile();
20+
}
21+
22+
let iRow = 0;
23+
let iCol = 0;
24+
switch (direction) {
25+
case 0:
26+
iCol = 1;
27+
break;
28+
case 1:
29+
iRow = 1;
30+
break;
31+
}
32+
33+
let shipStartTile = { X: 0, Y: 0 };
34+
let canPlaceshipFlag = this.canPlaceShip(ship.length, randomTile, shipStartTile, iRow, iCol);
35+
while (canPlaceshipFlag === false) {
36+
randomTile = this.getRandomTile();
37+
canPlaceshipFlag = this.canPlaceShip(ship.length, randomTile, shipStartTile, iRow, iCol);
38+
}
39+
ship.placeShip(this.tileMap[shipStartTile.X][shipStartTile.Y], directions[direction], this);
40+
this.ships.push(ship);
41+
});
42+
}
43+
44+
Board.prototype.canPlaceShip =
45+
function (shipLenght, tile, startTile, iRow, iCol) {
46+
let result = false;
47+
let freeSpots = 0;
48+
startTile.X = tile.X;
49+
startTile.Y = tile.Y;
50+
51+
let fitsInDirection = false;
52+
// Horizontaly
53+
if (iCol > 0) {
54+
//Right
55+
if (tile.Y + shipLenght <= this.tileMap[0].length) {
56+
fitsInDirection = true;
57+
} //Left
58+
else if (tile.Y - shipLenght >= 0) {
59+
fitsInDirection = true;
60+
iCol = -1;
61+
}
62+
}
63+
// Vertically
64+
else {
65+
//Down
66+
if (tile.X + shipLenght <= this.tileMap.length) {
67+
fitsInDirection = true;
68+
}
69+
//Up
70+
else if (tile.X - shipLenght >= 0) {
71+
fitsInDirection = true;
72+
iRow = -1;
73+
}
74+
}
75+
76+
if (fitsInDirection) {
77+
let i = 0;
78+
let movRow = 0;
79+
let movCol = 0;
80+
while (freeSpots != shipLenght || i < shipLenght) {
81+
if (this.tileMap[tile.X + movRow][tile.Y + movCol].taken ===
82+
false) {
83+
freeSpots++;
84+
} else {
85+
console.log(this.tileMap[tile.X + movRow][tile.Y + movCol].X + " Y:" +
86+
this.tileMap[tile.X + movRow][tile.Y + movCol].Y)
87+
return false;
88+
}
89+
i++;
90+
movCol = movCol + iCol;
91+
movRow = movRow + iRow;
92+
}
93+
//Direction is vertical up
94+
if (iRow < 0) {
95+
startTile.X -= shipLenght - 1;
96+
}
97+
//Direction is horizontal left
98+
else if (iCol < 0) {
99+
startTile.Y -= shipLenght - 1;
100+
}
101+
result = true;
102+
}
103+
return result;
104+
}
105+
106+
Board.prototype.damageTile =
107+
function (tile) {
108+
if (tile.damageType === undefined) {
109+
console.log("stop");
110+
}
111+
if (tile.taken === true) {
112+
tile.damageType = "tile-hit";
113+
tile.classList = "tile-hit";
114+
tile.ship.takeDamage(tile);
115+
} else {
116+
tile.damageType = "tile-missed-hit";
117+
tile.classList = "tile-missed-hit";
118+
}
119+
if (gameEngine.checkForWinner()) {
120+
return;
121+
}
122+
setTimeout(function () {
123+
console.log("Tile at X:" + tile.X + ", Y:" + tile.Y + " was damaged!");
124+
}, 1000);
125+
}
126+
127+
Board.prototype.getRandomTile =
128+
function () {
129+
let row = Math.floor(Math.random() * this.tileMap
130+
.length);
131+
let col = Math.floor(Math.random() * this.tileMap[0]
132+
.length);
133+
let tile = this.tileMap[row][col];
134+
return tile;
135+
}
136+
137+
Board.prototype.generatePlayground =
138+
function () {
139+
let container = document.createElement("div");
140+
container.className = "container";
141+
let board = document.createElement("div");
142+
board.className = "board";
143+
container.appendChild(board);
144+
145+
container.style.height = Math.floor(browserViewportHeight * 0.8) + "px";
146+
container.style.width = Math.floor(browserViewportHeight * 0.8) + "px";
147+
148+
//Create top row notation tiles
149+
let tile = document.createElement("div");
150+
tile.className = "tile notation";
151+
board.appendChild(tile);
152+
for (let i = 0; i < 10; i++) {
153+
let notString = String.fromCharCode(65 + i);
154+
tile = document.createElement("div");
155+
tile.className = "tile notation";
156+
tile.id = notString;
157+
tile.innerText = notString;
158+
board.appendChild(tile);
159+
}
160+
//Create all other rows
161+
for (let row = 1; row < 11; row++) {
162+
tile = document.createElement("div");
163+
tile.className = "tile notation";
164+
tile.id = row;
165+
tile.innerText = row;
166+
board.appendChild(tile);
167+
168+
this.tileMap.push([]);
169+
for (let d = 0; d < 10; d++) {
170+
tile = document.createElement("div");
171+
tile.className = "tile";
172+
tile.X = row - 1;
173+
tile.Y = d;
174+
tile.taken = false;
175+
tile.damageType = "tile";
176+
tile.owner = this;
177+
178+
board.appendChild(tile);
179+
this.tileMap[row - 1].push(tile);
180+
}
181+
}
182+
this.container = container;
183+
184+
let boardsCont = document.getElementById("boards-container");
185+
boardsCont.appendChild(container);
186+
}
187+
188+
Board.prototype.removeShips =
189+
function () {
190+
this.ships.forEach(ship => {
191+
for (let i = 0; i < ship.tiles.length; i++) {
192+
ship.tiles[i].classList.remove(ship.type + (i + 1), ship.direction);
193+
194+
}
195+
ship.tiles = [];
196+
});
197+
while (this.ships.length > 0) {
198+
this.ships.pop();
199+
}
200+
}

‎index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<HTML>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Battle Ships task</title>
7+
<!-- Add jQuery -->
8+
<script src="jquery-2.2.4.min.js"></script>
9+
<link rel="stylesheet" href="style.css">
10+
11+
</head>
12+
13+
<body>
14+
<div id="boards-container"></div>
15+
16+
<div id="user-interface">
17+
<div class="winMsg"></div>
18+
<button onclick="gameEngine.computerBoard.container.style.display = ''">Show Enemy Ships (debug)</button>
19+
<button onclick="gameEngine.restartGame()">Restart Game!</button>
20+
<button onclick="gameEngine.choosingBoard.selectTile(gameEngine.userBoard, gameEngine.computerBoard)">Take shot!</button>
21+
</div>
22+
<script src="generatePlayground.js"></script>
23+
<script src="generateFleet.js"></script>
24+
<script src="gameEngine.js"></script>
25+
</body>
26+
27+
</HTML>

‎jquery-2.2.4.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "battleships",
3+
"version": "1.0.0",
4+
"description": "Battleships game for Skillo technical task",
5+
"main": "index.html",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "npm run watch",
9+
"watch": "browser-sync start --server --directory --files \"**/*, *.css\""
10+
},
11+
"author": "MI",
12+
"license": "MIT"
13+
}

0 commit comments

Comments
 (0)