initial commit
This commit is contained in:
Prabhat Maurya
commit
fbde09d427
9 changed files with 448 additions and 0 deletions
11
.gitlab-ci.yml
Normal file
11
.gitlab-ci.yml
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
- mkdir .public
|
||||
- cp -r * .public
|
||||
- mv .public public
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- main
|
||||
38
HowToPlay.html
Executable file
38
HowToPlay.html
Executable file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>How to play</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="container">
|
||||
<h1>Read on how to play</h1>
|
||||
<hr>
|
||||
<h2>Intro</h2>
|
||||
<p>
|
||||
This is a guessing game that is divided into <strong>cells</strong> and <strong>columns</strong>. Alphabet (A – G) represents the column and number (0-6) represents the row.
|
||||
</p>
|
||||
|
||||
<h2>Goal</h2>
|
||||
<p>
|
||||
At the right-bottom corner, there is an input box that accepts your input. Your job is to provide the two characters (for example B3) of which the first character is the alphabet from A to G (All in Caps) and a second character is a number from 0 to 6 into the input box. Your input will target the cell (combined with these two characters) to reveal its hidden value.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The game consists of 9 ships hidden behind these cells. You need to find or hit those ships in the minimum guess possible. When all the ships are found the game is over.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
All right then, happy playing.
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<a href="./index.html">back</a>
|
||||
</body>
|
||||
</html>
|
||||
2
README.md
Executable file
2
README.md
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
# BattleshipGame
|
||||
Game for kids
|
||||
212
battleship.js
Executable file
212
battleship.js
Executable file
|
|
@ -0,0 +1,212 @@
|
|||
var model = {
|
||||
boardSize: 7,
|
||||
numShips: 3,
|
||||
shipLength: 3,
|
||||
shipsSunk: 0,
|
||||
|
||||
ships: [
|
||||
{ locations: [0, 0, 0], hits: ["", "", ""] },
|
||||
{ locations: [0, 0, 0], hits: ["", "", ""] },
|
||||
{ locations: [0, 0, 0], hits: ["", "", ""] }
|
||||
],
|
||||
|
||||
// original hard-coded values for ship locations
|
||||
/*
|
||||
ships: [
|
||||
{ locations: ["06", "16", "26"], hits: ["", "", ""] },
|
||||
{ locations: ["24", "34", "44"], hits: ["", "", ""] },
|
||||
{ locations: ["10", "11", "12"], hits: ["", "", ""] }
|
||||
],
|
||||
*/
|
||||
|
||||
fire: function(guess) {
|
||||
for (var i = 0; i < this.numShips; i++) {
|
||||
var ship = this.ships[i];
|
||||
var index = ship.locations.indexOf(guess);
|
||||
|
||||
// here's an improvement! Check to see if the ship
|
||||
// has already been hit, message the user, and return true.
|
||||
if (ship.hits[index] === "hit") {
|
||||
view.displayMessage("Oops, you already hit that location!");
|
||||
return true;
|
||||
} else if (index >= 0) {
|
||||
ship.hits[index] = "hit";
|
||||
view.displayHit(guess);
|
||||
view.displayMessage("HIT!");
|
||||
|
||||
if (this.isSunk(ship)) {
|
||||
view.displayMessage("You sank my battleship!");
|
||||
this.shipsSunk++;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
view.displayMiss(guess);
|
||||
view.displayMessage("You missed.");
|
||||
return false;
|
||||
},
|
||||
|
||||
isSunk: function(ship) {
|
||||
for (var i = 0; i < this.shipLength; i++) {
|
||||
if (ship.hits[i] !== "hit") {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
generateShipLocations: function() {
|
||||
var locations;
|
||||
for (var i = 0; i < this.numShips; i++) {
|
||||
do {
|
||||
locations = this.generateShip();
|
||||
} while (this.collision(locations));
|
||||
this.ships[i].locations = locations;
|
||||
}
|
||||
console.log("Ships array: ");
|
||||
console.log(this.ships);
|
||||
},
|
||||
|
||||
generateShip: function() {
|
||||
var direction = Math.floor(Math.random() * 2);
|
||||
var row, col;
|
||||
|
||||
if (direction === 1) { // horizontal
|
||||
row = Math.floor(Math.random() * this.boardSize);
|
||||
col = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));
|
||||
} else { // vertical
|
||||
row = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));
|
||||
col = Math.floor(Math.random() * this.boardSize);
|
||||
}
|
||||
|
||||
var newShipLocations = [];
|
||||
for (var i = 0; i < this.shipLength; i++) {
|
||||
if (direction === 1) {
|
||||
newShipLocations.push(row + "" + (col + i));
|
||||
} else {
|
||||
newShipLocations.push((row + i) + "" + col);
|
||||
}
|
||||
}
|
||||
return newShipLocations;
|
||||
},
|
||||
|
||||
collision: function(locations) {
|
||||
for (var i = 0; i < this.numShips; i++) {
|
||||
var ship = this.ships[i];
|
||||
for (var j = 0; j < locations.length; j++) {
|
||||
if (ship.locations.indexOf(locations[j]) >= 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var view = {
|
||||
displayMessage: function(msg) {
|
||||
var messageArea = document.getElementById("messageArea");
|
||||
messageArea.innerHTML = msg;
|
||||
},
|
||||
|
||||
displayHit: function(location) {
|
||||
var cell = document.getElementById(location);
|
||||
cell.setAttribute("class", "hit");
|
||||
},
|
||||
|
||||
displayMiss: function(location) {
|
||||
var cell = document.getElementById(location);
|
||||
cell.setAttribute("class", "miss");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var controller = {
|
||||
guesses: 0,
|
||||
|
||||
processGuess: function(guess) {
|
||||
var location = parseGuess(guess);
|
||||
if (location) {
|
||||
this.guesses++;
|
||||
var hit = model.fire(location);
|
||||
if (hit && model.shipsSunk === model.numShips) {
|
||||
view.displayMessage("You sank all my battleships, in " + this.guesses + " guesses");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// helper function to parse a guess from the user
|
||||
|
||||
function parseGuess(guess) {
|
||||
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
|
||||
|
||||
if (guess === null || guess.length !== 2) {
|
||||
alert("Oops, please enter a letter and a number on the board.");
|
||||
} else {
|
||||
var firstChar = guess.charAt(0);
|
||||
var row = alphabet.indexOf(firstChar);
|
||||
var column = guess.charAt(1);
|
||||
|
||||
if (isNaN(row) || isNaN(column)) {
|
||||
alert("Oops, that isn't on the board.");
|
||||
} else if (row < 0 || row >= model.boardSize ||
|
||||
column < 0 || column >= model.boardSize) {
|
||||
alert("Oops, that's off the board!");
|
||||
} else {
|
||||
return row + column;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
// event handlers
|
||||
|
||||
function handleFireButton() {
|
||||
var guessInput = document.getElementById("guessInput");
|
||||
var guess = guessInput.value.toUpperCase();
|
||||
|
||||
controller.processGuess(guess);
|
||||
|
||||
guessInput.value = "";
|
||||
}
|
||||
|
||||
function handleKeyPress(e) {
|
||||
var fireButton = document.getElementById("fireButton");
|
||||
|
||||
// in IE9 and earlier, the event object doesn't get passed
|
||||
// to the event handler correctly, so we use window.event instead.
|
||||
e = e || window.event;
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
fireButton.click();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// init - called when the page has completed loading
|
||||
|
||||
window.onload = init;
|
||||
|
||||
function init() {
|
||||
// Fire! button onclick handler
|
||||
var fireButton = document.getElementById("fireButton");
|
||||
fireButton.onclick = handleFireButton;
|
||||
|
||||
// handle "return" key press
|
||||
var guessInput = document.getElementById("guessInput");
|
||||
guessInput.onkeypress = handleKeyPress;
|
||||
|
||||
// place the ships on the game board
|
||||
model.generateShipLocations();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
images/board.jpg
Executable file
BIN
images/board.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
images/miss.png
Executable file
BIN
images/miss.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
images/ship.png
Executable file
BIN
images/ship.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
96
index.html
Executable file
96
index.html
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Battleship Game</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<script src="battleship.js"></script>
|
||||
</head>
|
||||
<body class="gameContainer">
|
||||
<div class="board">
|
||||
<div id="messageArea"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="00"></td>
|
||||
<td id="01"></td>
|
||||
<td id="02"></td>
|
||||
<td id="03"></td>
|
||||
<td id="04"></td>
|
||||
<td id="05"></td>
|
||||
<td id="06"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="10"></td>
|
||||
<td id="11"></td>
|
||||
<td id="12"></td>
|
||||
<td id="13"></td>
|
||||
<td id="14"></td>
|
||||
<td id="15"></td>
|
||||
<td id="16"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="20"></td>
|
||||
<td id="21"></td>
|
||||
<td id="22"></td>
|
||||
<td id="23"></td>
|
||||
<td id="24"></td>
|
||||
<td id="25"></td>
|
||||
<td id="26"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="30"></td>
|
||||
<td id="31"></td>
|
||||
<td id="32"></td>
|
||||
<td id="33"></td>
|
||||
<td id="34"></td>
|
||||
<td id="35"></td>
|
||||
<td id="36"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="40"></td>
|
||||
<td id="41"></td>
|
||||
<td id="42"></td>
|
||||
<td id="43"></td>
|
||||
<td id="44"></td>
|
||||
<td id="45"></td>
|
||||
<td id="46"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="50"></td>
|
||||
<td id="51"></td>
|
||||
<td id="52"></td>
|
||||
<td id="53"></td>
|
||||
<td id="54"></td>
|
||||
<td id="55"></td>
|
||||
<td id="56"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="60"></td>
|
||||
<td id="61"></td>
|
||||
<td id="62"></td>
|
||||
<td id="63"></td>
|
||||
<td id="64"></td>
|
||||
<td id="65"></td>
|
||||
<td id="66"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="">
|
||||
<input type="text" id="guessInput" placeholder="A0">
|
||||
<input type="button" id="fireButton" value="FIRE">
|
||||
</form>
|
||||
|
||||
<div class="howTo">
|
||||
<p>
|
||||
<a href="./HowToPlay.html">How to play</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
style.css
Executable file
89
style.css
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
.gameContainer{
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.board{
|
||||
position: relative;
|
||||
width: 1024px;
|
||||
height: 863px;
|
||||
margin: auto;
|
||||
background: url("./images/board.jpg") no-repeat;
|
||||
}
|
||||
|
||||
#messageArea{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
table{
|
||||
position: absolute;
|
||||
left: 173px;
|
||||
top: 98px;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td{
|
||||
width: 94px;
|
||||
height: 94px;
|
||||
}
|
||||
|
||||
form{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
background-color: #79B4B7;
|
||||
}
|
||||
|
||||
form input{
|
||||
background-color: #D4ECDD;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.hit{
|
||||
background: url(./images/ship.png) no-repeat center center;
|
||||
}
|
||||
|
||||
.miss{
|
||||
background: url(./images/miss.png) no-repeat center center;
|
||||
}
|
||||
|
||||
.container{
|
||||
margin: 0 20%;
|
||||
|
||||
}
|
||||
|
||||
h1{
|
||||
color: #345B63;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: #00A19D;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
p{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.howTo{
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
color: #00A19D;
|
||||
font-size: 200%;
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: #FFB830 ;
|
||||
}
|
||||
Loading…
Reference in a new issue