Pig game Project with Javascript


Recently I am reviewing the Javascript with the course called The complete Javascript Course 2019:build real project from udemy.

Online demo

Keep up following the basic knowledge and projects from it.

The final solution is the Pig game with two dices and two players.

The rules:


HTML:
Two players panel with scores and current score.
Three buttons for resetting the game,rolling the dices and holding the current players' score/
At the bottom is the Final scores for winners' reach point.Normally the rules' final score is 100.



CSS:
The backgound color and the dot are changing when switching the player,because of the classname active added.

Set up the position of two dices and the bottom final-score style.

Javascript:
Initial the original setting in function init()


The scores and current score are both "0".And the dices don't display at first place.
If there is a winner last round,basically clear all the old records.


When click button rolling the dices,function execute immediately.
Random the dice number with
 var dice1=Math.floor(Math.random()*6)+1;  
 var dice2=Math.floor(Math.random()*6)+1;  
meanwhile the picture display based on the rolling number.

If either dice1 or dice2 is "1",the current score is added.
Or switch to another player.


When click hold button,the function execute.
Which means you need change to another player and show uo the current score to player's score panel.
If the panel scores bigger or equal to final score,the winner come out and the player's name changed.
Or continue the game to next player.


activePlayer=0 means the first player is in the rolling turn,the same to activePlayer=1.
reset the current score to 0 and meantime turn the other players' current score.
CSS style with togging classname active.
And hide the two dices as default.


And the last button is the reset game,which will initialize the game record.
Simply call the function init.

What a clear JS,although the code is not concise,but easy to understand for beginner.

If you'd like to check it out ,go to github download 

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Mantine: A TS-Based Open-Source React Components Library

Meet Tippy.js: The Complete Tooltip Popover Plugin