Skip to content

Instantly share code, notes, and snippets.

@hoseinhamzei

hoseinhamzei/index.html

Created July 7, 2018 14:40
Show Gist options
  • Save hoseinhamzei/f21d53deb85bb3c18748cb53059f7cfc to your computer and use it in GitHub Desktop.
Save hoseinhamzei/f21d53deb85bb3c18748cb53059f7cfc to your computer and use it in GitHub Desktop.
Download ZIP
SIMPLE PIG GAME
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Pig Game</title>
</head>
<body>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">43</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">11</div>
</div>
</div>
<div class="player-1-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player-score" id="score-1">72</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
</div>
</div>
<button class="btn-new" onClick="newGame()"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold" onClick="hold()"><i class="ion-ios-download-outline"></i>Hold</button>
<img src="dice-5.png" alt="Dice" class="dice">
</div>
<script src="app.js"></script>
</body>
</html>
Raw
script.js
/*
GAME RULES:
- The game has 2 players, playing in rounds
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game
*/
var scores = [0,0];
var roundScores = 0;
var activePlayer = 0;
hideAndShow('.dice','hide');
document.querySelector('.btn-roll').addEventListener('click', dice);
document.querySelector('#score-0').textContent = '0';
document.querySelector('#score-1').textContent = '0';
document.querySelector('#current-0').textContent = '0';
document.querySelector('#current-1').textContent = '0';
//////////////FUNCTIONS//////////////
function hideAndShow(idorclass,display){
if(display === 'show'){
document.querySelector(idorclass).style.display = 'block';
} else if(display === 'hide'){
document.querySelector(idorclass).style.display = 'none';
}
}
/////////////////////////////////////////////////////////////
function setIMG(imgid,imgsrc){
document.querySelector(imgid).src = imgsrc;
}
/////////////////////////////////////////////////////////
function dice(){
//random dice
var dice = Math.floor(Math.random() * 6) + 1;
//display dice number image
if(dice > 1){
hideAndShow('.dice','show');
setIMG('.dice','dice-' + dice + '.png');
roundScores += dice;
document.querySelector('#current-' + activePlayer).textContent = roundScores;
}else{
hideAndShow('.dice','hide');
roundScores = 0;
document.querySelector('#current-' + activePlayer).textContent = roundScores;
if(activePlayer === 0){
activePlayer = 1;
document.querySelector('.player-0-panel').classList.remove('active');
document.querySelector('.player-1-panel').classList.add('active');
}else{
activePlayer = 0;
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
}
}
}
//////////////////////////////////////////////////////////////
function hold(){
scores[activePlayer] += roundScores;
document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];
roundScores = 0;
document.querySelector('#current-' + activePlayer).textContent = roundScores;
if(scores[activePlayer] > 99){
document.querySelector('#name-' + activePlayer).textContent = "WINNER";
alert('PLAYER'+(activePlayer+1)+' '+'HAS WON THE GAME!');
hideAndShow('.btn-roll','hide');
hideAndShow('.btn-hold','hide');
}else{
if(activePlayer === 0){
activePlayer = 1;
document.querySelector('.player-0-panel').classList.remove('active');
document.querySelector('.player-1-panel').classList.add('active');
}else{
activePlayer = 0;
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
}
}
}
//////////////////////////////////////////////////////////////////
function newGame(){
hideAndShow('.dice','hide');
var newplayer = activePlayer+1;
document.querySelector('#name-' + activePlayer).textContent = "PLAYER"+" "+newplayer;
scores = [0,0];
roundScores = 0;
activePlayer = 0;
document.querySelector('#score-0').textContent = '0';
document.querySelector('#score-1').textContent = '0';
document.querySelector('#current-0').textContent = '0';
document.querySelector('#current-1').textContent = '0';
hideAndShow('.btn-roll','show');
hideAndShow('.btn-hold','show');
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.player-0-panel').classList.add('active');
}
Raw
style.css
/**********************************************
*** GENERAL
**********************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
body {
background-image: linear-gradient(135deg, #4096ee 0%,#ff4444 100%);
background-size: cover;
background-position: center;
font-family: Lato;
font-weight: 300;
position: relative;
height: 100vh;
color: #555;
}
.wrapper {
width: 1000px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.player-0-panel,
.player-1-panel {
width: 50%;
float: left;
height: 600px;
padding: 100px;
}
/**********************************************
*** PLAYERS
**********************************************/
.player-name {
font-size: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 100;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.player-score {
text-align: center;
font-size: 80px;
font-weight: 100;
color: #EB4D4D;
margin-bottom: 130px;
}
.active { background-color: #f7f7f7; }
.active .player-name { font-weight: 300; }
.active .player-name::after {
content: "\2022";
font-size: 47px;
position: absolute;
color: #EB4D4D;
top: -7px;
right: 10px;
}
.player-current-box {
background-color: #EB4D4D;
color: #fff;
width: 40%;
margin: 0 auto;
padding: 12px;
text-align: center;
}
.player-current-label {
text-transform: uppercase;
margin-bottom: 10px;
font-size: 14px;
color: #fff;
font-weight: bolder;
}
.player-current-score {
font-size: 30px;
}
button {
position: absolute;
width: 200px;
left: 50%;
transform: translateX(-50%);
color: #555;
background: none;
border: none;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
transition: background-color 0.3s, color 0.3s;
}
button:hover { font-weight: 600; }
button:hover i { margin-right: 20px; }
button:focus {
outline: none;
}
i {
color: #EB4D4D;
display: inline-block;
margin-right: 15px;
font-size: 32px;
line-height: 1;
vertical-align: text-top;
margin-top: -4px;
transition: margin 0.3s;
}
.btn-new { top: 45px;}
.btn-roll { top: 403px;}
.btn-hold { top: 467px;}
.dice {
position: absolute;
left: 50%;
top: 178px;
transform: translateX(-50%);
height: 100px;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
}
.winner { background-color: #f7f7f7; }
.winner .player-name { font-weight: 300; color: #EB4D4D; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment