War is a card game where the goal is to abtain all 52 cards. You do so by drawing a card from the top of your deck and comparing its value to your opponent's card. The winner then takes both cards and adds it to the bottom of their deck. In the case that both values are equal you now enter in the "War" phase. In the war phase both players place 3 cards face down and 1 card face up. The player with the higher value of the face up card presented takes all cards put in play. If the values are again equal, you repeat the steps in war until a winner is determined.
The very first screen you see has the rules modal open and the game board hidden until you click the "play" button.
Once "Play" is clicked you will see the gameboard with the players deck and current card on the left side and the same for the dealer on the right. The "Play" button also changes to "Reset" to better represent its function.
When "Draw" is clicked the cards put into play and a winner for the round is determined. The cards are generated using DOM manipulation ofthe cards suit and value.
When a winner is determined (win condition currently set to 32 cards or greater), the background changes to the color of the winners deck.
I used HTML to structure the elements in the correct order.
CSS was used to style the board and position the values for each card.
JavaScript took care of the functionality of the game and DOM manipulation.
The challenge that I overcame was being able to use recursion in the "War" function part of the game.
I also found creating the function to dynamically show the cards in play to be challenging and fun to make.
https://darion-d.github.io/Project-1-War/
I would have liked to add animations for cards being played one at a time, insted of instantly. Especially for the war phase of tthe game. I also would have like to find a way to make the "War" phase stand out more.