I'm working on a game of War for a potential employer and I was hoping someone could review my code and provide feedback on my code.
HTML/CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
<style>
.card{
position: relative;
float: left;
width: 350px;
height: 500px;
text-align: center;
}
.wonDeck{
position: absolute;
bottom: 0;
width: 75px;
height: 100px;
text-align: center;
}
.card{
margin: 0 5%;
}
.card:first-of-type{
margin-left: 0;
}
.card:last-of-type{
margin-right: 0;
}
.card .text{
position: absolute;
margin: 0 0 0 -25%;
left: 35%;
height: 30%;
width: 50%;
font-size: 26px;
color: rgb(150, 150, 150);
}
.wonDeck .text{
position: absolute;
margin: 0 0 0 -25%;
left: 50%;
height: 30%;
width: 50%;
font-size: 16px;
color: rgb(150, 150, 150);
}
.warDeck .text{
position: absolute;
margin: 0 0 0 -25%;
left: 50%;
height: 30%;
width: 50%;
font-size: 16px;
color: rgb(150, 150, 150);
}
.cardHolder{
position: absolute;
top: 0;
left: 0;
width: 75%;
height: 350px;
font-size: 26px;
color: rgb(0, 0, 0);
border: 1px dashed black;
background-color: rgba(0, 0, 0, 0.5);
}
.wonCardsHolder, .warCardsHolder{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 16px;
color: rgb(0, 0, 0);
border: 1px dashed black;
background-color: rgba(0, 0, 0, 0.5);
}
.warDeck{
position: relative;
float: right;
width: 75px;
height: 100px;
}
#reshuffle{
display: none;
}
</style>
</head>
<body>
<div id="player1CurrentCard" class="card">
<div class="warDeck">
<div class="warCardsHolder"></div>
<div class="text">
<p>War Deck</p>
</div>
</div>
<div class="cardHolder"></div>
<div class="text">
<p>Player 1 Card</p>
</div>
<div id="player1WonDeck" class="wonDeck">
<div class="wonCardsHolder"></div>
<div class="text">
<p>Won Deck</p>
</div>
</div>
</div>
<div id="player2CurrentCard" class="card">
<div class="cardHolder"></div>
<div class="warDeck">
<div class="warCardsHolder"></div>
<div class="text">
<p>War Deck</p>
</div>
</div>
<div class="text">
<p>Player 2 Card</p>
</div>
<div id="player2WonDeck" class="wonDeck">
<div class="wonCardsHolder"></div>
<div class="text">
<p>Won Deck</p>
</div>
</div>
</div>
<button id="play">Play</button>
<button id="reshuffle">Reshuffle</button>
</body>
<script src="war.js"></script>
</html>
JS
var play = document.getElementById("play");
var reshuffle = document.getElementById("reshuffle");
var cardHolder = document.getElementsByClassName("cardHolder");
var wonCardsHolder = document.getElementsByClassName("wonCardsHolder");
var warCardsHolder = document.getElementsByClassName("warCardsHolder");
play.onclick = function(){
PlayGame(Player1, Player2);
}
Player = function(name, currentDeck, wonDeck){
this.name = name;
this.currentDeck = currentDeck;
this.wonDeck = wonDeck;
}
Player.prototype.GetCurrentCard = function(){
this.currentCard = this.currentDeck.shift();
}
Player.prototype.isReshuffling = false;
Player.prototype.isAtWar = false;
Deck = {
//suits: ["Clubs", "Diamonds", "Hearts", "Spades"],
suits: ["Spades", "Clubs"],
cards: [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
deck: [],
shuffledDeck: [],
BuildDeck: function(){
for(var suit = 0; suit < this.suits.length; suit++){
for(var card = 0; card < this.cards.length; card++){
this.deck.push([this.cards[card], this.suits[suit]]);
}
}
},
ShuffleDeck: function(){
while(this.deck.length){
var index = Math.floor(Math.random() * this.deck.length);
this.shuffledDeck.push(this.deck.splice(index, 1)[0]);
}
},
DistributeCards: function(player1Deck, player2Deck){
for(var i = 0; i < this.shuffledDeck.length / 2; i++){
player1Deck.push(this.shuffledDeck[i]);
player2Deck.push(this.shuffledDeck[this.shuffledDeck.length - i - 1]);
}
},
ReshuffleDeck: function(player){
while(player.wonDeck.length){
var index = Math.floor(Math.random() * player.wonDeck.length);
player.currentDeck.push(player.wonDeck.splice(index, 1)[0]);
}
player.wonDeck = [];
}
}
PlayGame = function(player1, player2){
if(player1.currentDeck.length == 0){
player1.isReshuffling = true;
}
if(player2.currentDeck.length == 0){
player2.isReshuffling = true;
}
GoToWar = function(){
console.log("War");
var player1WarDeck = [];
var player2WarDeck = [];
player1WarDeck.push(player1.currentCard);
player1.GetCurrentCard();
player1WarDeck.push(player1.currentCard);
player1.GetCurrentCard();
player1WarDeck.push(player1.currentCard);
player2WarDeck.push(player2.currentCard);
player2.GetCurrentCard();
player2WarDeck.push(player2.currentCard);
player2.GetCurrentCard();
player2WarDeck.push(player2.currentCard);
if(player1WarDeck[player1WarDeck.length - 1][0] == player2WarDeck[player2WarDeck.length - 1][0]){
console.log("Tie");
player1.GetCurrentCard();
player1WarDeck.push(player1.currentCard);
player1.GetCurrentCard();
player1WarDeck.push(player1.currentCard);
player2.GetCurrentCard();
player2WarDeck.push(player2.currentCard);
player2.GetCurrentCard();
player2WarDeck.push(player2.currentCard);
}
if(player1WarDeck[player1WarDeck.length - 1][0] > player2WarDeck[player2WarDeck.length - 1][0]){
player1.wonDeck = player1.wonDeck.concat(player1WarDeck, player2WarDeck);
console.log("Player 1 wins");
}
else{
player2.wonDeck = player2.wonDeck.concat(player1WarDeck, player2WarDeck);
console.log("Player 2 wins");
}
console.log(player1WarDeck, player2WarDeck)
warCardsHolder[0].textContent = player1WarDeck[player1WarDeck.length - 1][0] +" of " +player1WarDeck[player1WarDeck.length - 1][1];
warCardsHolder[1].textContent = player2WarDeck[player2WarDeck.length - 1][0] +" of " +player2WarDeck[player2WarDeck.length - 1][1];
cardHolder[0].textContent = player1WarDeck[0][0] +" of " +player1WarDeck[0][1];
cardHolder[1].textContent = player2WarDeck[0][0] +" of " +player2WarDeck[0][1];
}
if(!player1.isReshuffling && !player2.isReshuffling){
player1.GetCurrentCard();
player2.GetCurrentCard();
if(player1.currentCard[0] == player2.currentCard[0]){
player1.isAtWar = true;
player2.isAtWar = true;
}
else if(player1.currentCard[0] > player2.currentCard[0]){
player1.wonDeck.push(player1.currentCard);
player1.wonDeck.push(player2.currentCard);
player1.isAtWar = false;
}
else{
player2.wonDeck.push(player2.currentCard);
player2.wonDeck.push(player1.currentCard);
player2.isAtWar = false;
}
if(player1.isAtWar && player2.isAtWar){
GoToWar();
}
else{
cardHolder[0].textContent = player1.currentCard[0] +" of " +player1.currentCard[1];
cardHolder[1].textContent = player2.currentCard[0] +" of " +player2.currentCard[1];
warCardsHolder[0].textContent = "";
warCardsHolder[1].textContent = "";
}
wonCardsHolder[0].textContent = player1.wonDeck.length;
wonCardsHolder[1].textContent = player2.wonDeck.length;
}
if(player1.isReshuffling){
ReshuffleDeck(player1);
player1.isReshuffling = false;
}
if(player2.isReshuffling){
ReshuffleDeck(player2);
player2.isReshuffling = false;
}
if(player1.currentDeck.length == 26){
GameOver(player1);
}
if(player2.currentDeck.length == 26){
GameOver(player2);
}
}
ReshuffleDeck = function(player){
Deck.ReshuffleDeck(player)
}
GameOver = function(player){
console.log(player.name +" wins!");
}
Player1 = new Player("Player 1", [], []);
Player2 = new Player("Player 2", [], []);
Deck.BuildDeck();
Deck.ShuffleDeck();
Deck.DistributeCards(Player1.currentDeck, Player2.currentDeck);