War Project — Ending the Game

War game example

I ended the game today by looking for a player with no cards. Once I found one, I declared the game over by writing into the HTML my end game message. To check if either player had zero cards left, I checked the length of their cards array and used the comparison operator, “or.”

I put this code at the beginning of the assign function.

if (firstPlayer.length == 0 || secondPlayer.length == 0) { endGame(); }

I added CSS to show the winner of each hand by changing the border color of the winning box to red if that player won.

if (number1 > number2) { $firstPlayer.css(“border-color”, “red”);   … }

I then set the border color back to black when I run assign again.

See if you can create a function called endGame() that writes the winner’s info at the top of the screen correctly. You will be able to fork my code from GitHub if you ever want it.

I added an animated button for draw by finding the code on W3schools.com. I changed .button to #draw.

You can watch this lesson as well.