Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
davidkhayutin committed Oct 25, 2018
1 parent f7e08b4 commit 4d7a557
Show file tree
Hide file tree
Showing 3 changed files with 461 additions and 0 deletions.
111 changes: 111 additions & 0 deletions Battleship/assets/CSS/battleship.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
body {
background-image: url(https://www.innerloc.com/wp-content/uploads/2017/03/bigstock-Steel-Metal-background-texture-91281215.jpg);
background-size: cover;
height: 1000px;
}

img{
width:30%;
display: inline-block;
}


.results{
font-size: 100px;
}


.battleShipBoard {
padding-top: 40px;
float: left;
display: inline-block;
text-align: center;
margin-left: 50px;
}

.playerTwoBoard{
padding-top: 40px;
float: right;
display: inline-block;
text-align: center;
margin-right: 50px;
}

.miss{
background-color: #DEC19B !important;
}


.hitwords{
color: red;
}

.hit{
background-color: red !important;
}

form{
width: 100%;
margin-top: 20px;
text-align:center;
display: inline-block;
}

.squares {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #EAEDED;
border:1px solid #BDC3C7;
margin: 2px;
margin-left: 4px;
display: inline-block;
color: black;

}

h3{
font-size: 20px;
text-align: center;
}

.playerOnelogo{
color: #39ff14;
}

.playerOneFeed{
list-style: none;
width: 300px;
height: 200px;
display: inline-block;
margin-left: 50px;
padding: 10px;
text-align: center;
background-color: black;
color: #39ff14;
border: 2px solid #BDC3C7;
overflow-y: scroll;
border-radius: 20px;

}

.fireButton{
width: 100px;
}
input {
margin: 5px;
border-radius: 20px;
width: 70px;
}

label{
color: white;
}


p{
color: white;
}



240 changes: 240 additions & 0 deletions Battleship/assets/JS/battleship.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
$(() => {

let playerOne = [];
let playerTwo = [];
let playerOneShips ={}
let playerTwoShips = {}

const GRID = [
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", "", ""],
];

let letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];

function countRows(){
if(undefined){
return undefined;
} else {
return GRID.length;
}
}

function countColumns(){
if(undefined){
return undefined;
} else {
return GRID[1].length;
}
}

let rows = countRows();
let colums = countColumns();


function createPlayerOne(){
for(var i = 0; i < colums; i++){
$("body #container").addClass("battleShipBoard")
.append($("<div>").addClass(letters[i]).append($("<i>").text(letters[i]).append($("<span>"))))
}

for(var i = 1; i <= rows; i++){
$("body #container div")
.append($("<span>").text(i).addClass("squares"))
}


}

function createPlayerTwo(){
for(var i = 0; i < colums; i++){
$("body #containerTwo").addClass("playerTwoBoard")
.append($("<div>").addClass(letters[i]).append($("<i>").text(letters[i]).append($("<span>"))))
}

for(var i = 1; i <= rows; i++){
$("body #containerTwo div")
.append($("<span>").text(i).addClass("squares"))
}


}


createPlayerOne();
createPlayerTwo();

$(".boatPlacementTwo").slideToggle(0);
$(".fireTwo").slideToggle(0);
$(".fire").slideToggle(0)
$(".playerOneFeed").slideToggle(0)
$(".playerTwoFeed").slideToggle(0)


$("form.boatPlacement").submit(function (event){
event.preventDefault();
// playerOne.shift();
let ShipsEntered = $(this).serializeArray();
playerOneShips["Destroyer"] = [ShipsEntered[0].value,ShipsEntered[1].value];
playerOneShips["submarine"] = [ShipsEntered[2].value, ShipsEntered[3].value, ShipsEntered[4].value];
playerOneShips["Cruiser"] = [ShipsEntered[5].value, ShipsEntered[6].value, ShipsEntered[7].value];
playerOneShips["Battleship"] = [ShipsEntered[8].value, ShipsEntered[9].value, ShipsEntered[10].value, ShipsEntered[11].value];
playerOneShips["Carrier"] = [ShipsEntered[12].value, ShipsEntered[13].value, ShipsEntered[14].value, ShipsEntered[15].value, ShipsEntered[16].value]
playerOne.push(ShipsEntered[0].value,ShipsEntered[1].value,ShipsEntered[2].value, ShipsEntered[3].value, ShipsEntered[4].value,ShipsEntered[5].value, ShipsEntered[6].value, ShipsEntered[7].value, ShipsEntered[8].value, ShipsEntered[9].value, ShipsEntered[10].value, ShipsEntered[11].value,ShipsEntered[12].value, ShipsEntered[13].value, ShipsEntered[14].value, ShipsEntered[15].value, ShipsEntered[16].value)
$(".boatPlacement").slideToggle(0);
$(".boatPlacementTwo").slideToggle();

})

$("form.boatPlacementTwo").submit(function (event){
event.preventDefault();
// playerOne.shift();
let ShipsEntered = $(this).serializeArray();
playerTwoShips["Destroyer"] = [ShipsEntered[0].value,ShipsEntered[1].value];
playerTwoShips["submarine"] = [ShipsEntered[2].value, ShipsEntered[3].value, ShipsEntered[4].value];
playerTwoShips["Cruiser"] = [ShipsEntered[5].value, ShipsEntered[6].value, ShipsEntered[7].value];
playerTwoShips["Battleship"] = [ShipsEntered[8].value, ShipsEntered[9].value, ShipsEntered[10].value, ShipsEntered[11].value];
playerTwoShips["Carrier"] = [ShipsEntered[12].value, ShipsEntered[13].value, ShipsEntered[14].value, ShipsEntered[15].value, ShipsEntered[16].value]
playerTwo.push(ShipsEntered[0].value,ShipsEntered[1].value,ShipsEntered[2].value, ShipsEntered[3].value, ShipsEntered[4].value,ShipsEntered[5].value, ShipsEntered[6].value, ShipsEntered[7].value, ShipsEntered[8].value, ShipsEntered[9].value, ShipsEntered[10].value, ShipsEntered[11].value,ShipsEntered[12].value, ShipsEntered[13].value, ShipsEntered[14].value, ShipsEntered[15].value, ShipsEntered[16].value)
$(".boatPlacementTwo").slideToggle(0);
$(".playerOneFeed").slideToggle()
$(".playerTwoFeed").slideToggle()
$(".fire").slideToggle()

})


$(".fire").submit(function(event){
event.preventDefault();
let shotFired = $(this).serializeArray();
let shotFiredValues = shotFired[0].value.split("")
let rowNeeded = shotFiredValues[0].toUpperCase();
let exactRow = $("." + rowNeeded);
let columNeeded = shotFired[0].value.substring(1);
let columChild = exactRow[0].children
let exactColum = columChild[columNeeded]
let shot = shotFired[0].value
let indexPlayerTwo = playerTwo.indexOf(shot)
let playerTwohit = false;
console.log(playerTwo)
for(var i = 0; i < playerTwo.length; i++){
if(playerTwo[i] === shot){
$(exactColum).addClass("hit");
playerTwo.splice(indexPlayerTwo, 1)
$(".playerOneFeed").append($("<li>").text("Player Ones shot at " + shotFired[0].value + ", was a hit! "))
playerTwohit = true;
}
}

if(playerTwohit === false){
$(exactColum).addClass("miss")
$(".playerOneFeed").append($("<li>").text("Player One Shot at " + shotFired[0].value + ", was a miss! "))
}

for(ships in playerTwoShips){
for(var i = 0; i < (playerTwoShips[ships]).length; i++ ){
if(shot === (playerTwoShips[ships])[i]){
playerTwoShips[ships].shift();
$("p.results").fadeIn(500).append($("<h3>").text("You hit player two's " + ships).addClass("hitwords"))
setTimeout(function(){
$('p.results h3').remove();
}, 3000);
}

if(playerTwoShips[ships].length < 1){
$("p.results").fadeIn(500).append($("<h3>").text("You sunk player two's " + ships).addClass("hitwords"))
// $(".playerOneFeed").append($("<li>").text("Your shot" + shotFired[0].value + ", destroyed player two's " + ships))
setTimeout(function(){
$('p.results h2').remove();
}, 3000);
}


if(playerTwo.length < 1 ){
$(".results").append($("<h3>").text("player 1 wins!").addClass("hitwords"))
}

}

}

$(".fire").slideToggle(0)

$(".fireTwo").slideToggle();
console.log(playerTwo)
})



$(".fireTwo").submit(function(event){
event.preventDefault();
let shotFired = $(this).serializeArray();
let shotFiredValues = shotFired[0].value.split("")
let rowNeeded = shotFiredValues[0].toUpperCase();
let exactRow = $("." + rowNeeded);
console.log(exactRow)
let columNeeded = shotFired[0].value.substring(1);
let columChild = exactRow[1].children
let exactColum = columChild[columNeeded]
let shot = shotFired[0].value
let indexPlayerOne = playerOne.indexOf(shot)
let playerOneHit = false;

for(var i = 0; i < playerOne.length; i++){
if(playerOne[i] === shot){
playerOne.splice(indexPlayerOne, 1)
$(exactColum).addClass("hit");
$(".playerOneFeed").append($("<li>").text("Player Two's shot at " + shotFired[0].value + ", was a hit! "))
playerOneHit = true;
}
}

if(playerOneHit === false){
$(exactColum).addClass("miss")
$(".playerOneFeed").append($("<li>").text("Player Two's Shot at " + shotFired[0].value + ", was a miss! "))
}

for(ships in playerOneShips){
console.log(playerOneShips[ships])
for(var i = 0; i < (playerOneShips[ships]).length; i++ ){
console.log("this is ships i", [ships][i])
if(shot === (playerOneShips[ships])[i]){
(playerOneShips[ships]).shift();
$("p.results").fadeIn(500).append($("<h3>").text("You hit player one's " + ships).addClass("hitwords"))
setTimeout(function(){
$('p.results h3').remove();
}, 3000);
}
if(playerOneShips[ships].length < 1){
$("p.results").fadeIn(500).append($("<h3>").text("You sunk player one's " + ships).addClass("hitwords"))
setTimeout(function(){
$('p.results h2').remove();
}, 3000);
}

if(playerOne.length < 1 ){
$(".results").append($("<h3>").text("player 2 wins!").addClass("hitwords"))
}

}

}

$(".fireTwo").slideToggle(0)
$("ul.playerOne").append($("<li>").text(shotFired[0].value + ", "))
$(".fire").slideToggle();
})


})



Loading

0 comments on commit 4d7a557

Please sign in to comment.