Javascript Game to Challenge Your Self
This Javascript pig game is a ideal challenge to challenge your javascript skills and learn some basics of the language.
This commit is contained in:
Sadeesha_Jayaweea
GitHub
parent
a95568cc3d
commit
bf126c8a23
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Pig Game</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section class="player player--0 player--active">
|
||||||
|
<h2 class="name" id="name--0">Player 1</h2>
|
||||||
|
<p class="score" id="score--0">43</p>
|
||||||
|
<div class="current">
|
||||||
|
<p class="current-label">Current</p>
|
||||||
|
<p class="current-score" id="current--0">0</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="player player--1">
|
||||||
|
<h2 class="name" id="name--1">Player 2</h2>
|
||||||
|
<p class="score" id="score--1">24</p>
|
||||||
|
<div class="current">
|
||||||
|
<p class="current-label">Current</p>
|
||||||
|
<p class="current-score" id="current--1">0</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<img src="dice-5.png" alt="Playing dice" class="dice" />
|
||||||
|
<button class="btn btn--new">🔄 New game</button>
|
||||||
|
<button class="btn btn--roll">🎲 Roll dice</button>
|
||||||
|
<button class="btn btn--hold">📥 Hold</button>
|
||||||
|
</main>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
|
|
@ -0,0 +1,111 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
//Selecting Elements
|
||||||
|
const player0El = document.querySelector('.player--0') // Player 1 class
|
||||||
|
const player1El = document.querySelector('.player--1') // Player 2 class
|
||||||
|
const score0El = document.getElementById('score--0');
|
||||||
|
const score1El = document.getElementById('score--1');
|
||||||
|
const current0El = document.getElementById('current--0');
|
||||||
|
const current1El = document.getElementById('current--1');
|
||||||
|
|
||||||
|
const diceEl = document.querySelector('.dice');
|
||||||
|
const btnNew = document.querySelector('.btn--new');
|
||||||
|
const btnRoll = document.querySelector('.btn--roll');
|
||||||
|
const btnHold = document.querySelector('.btn--hold')
|
||||||
|
|
||||||
|
let scores, currentScore, activePlayer, playing;
|
||||||
|
|
||||||
|
//Starting condition
|
||||||
|
const init = function () {
|
||||||
|
scores = [0, 0];
|
||||||
|
currentScore = 0;
|
||||||
|
activePlayer = 0;
|
||||||
|
playing = true;
|
||||||
|
|
||||||
|
score0El.textContent = 0;
|
||||||
|
score1El.textContent = 0;
|
||||||
|
current0El.textContent = 0;
|
||||||
|
current1El.textContent = 0;
|
||||||
|
|
||||||
|
diceEl.classList.add('hidden');
|
||||||
|
player0El.classList.remove('player--winner');
|
||||||
|
player1El.classList.remove('player--winner');
|
||||||
|
player0El.classList.add('player--active');
|
||||||
|
player1El.classList.remove('player--active');
|
||||||
|
};
|
||||||
|
init();
|
||||||
|
|
||||||
|
const switchPlayer = function()
|
||||||
|
{
|
||||||
|
if(playing){
|
||||||
|
//switch to the next player
|
||||||
|
document.getElementById(`current--${activePlayer}`).textContent = 0;
|
||||||
|
currentScore = 0;
|
||||||
|
activePlayer = activePlayer === 0 ? 1 : 0 // ternary operator if activePlayer === 0 if not change to 1 else make it 0
|
||||||
|
//Changing the Active Player Color
|
||||||
|
player0El.classList.toggle('player--active'); //toggle is another property in classList which add class if not available
|
||||||
|
player1El.classList.toggle('player--active');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//Hiding the Image Dice
|
||||||
|
diceEl.classList.add('hidden'); // Hiding the Dice by adding the Hidden Class
|
||||||
|
|
||||||
|
//Rolling the Dice Functionality
|
||||||
|
btnRoll.addEventListener('click', function() {
|
||||||
|
|
||||||
|
if(playing){
|
||||||
|
|
||||||
|
//1. Generating a Random Dice Result
|
||||||
|
const dice = Math.trunc(Math.random() * 6 ) + 1; //dice is a not a global Variable - needs to change every time
|
||||||
|
|
||||||
|
//Displaying the Dice
|
||||||
|
diceEl.classList.remove('hidden'); //removing the hidden class
|
||||||
|
diceEl.src = `dice-${dice}.png`; //when dice number becomes random the src also changes according and display the number
|
||||||
|
|
||||||
|
//3. Check for rolled 1: if true, switch to next player
|
||||||
|
if(dice != 1){
|
||||||
|
//Add dice to current one
|
||||||
|
currentScore += dice; //currentScore = CurrentScore+dice
|
||||||
|
document.getElementById(`current--${activePlayer}`).textContent = currentScore;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
switchPlayer(); //calling the function
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
//Hold button Function
|
||||||
|
btnHold.addEventListener('click', function()
|
||||||
|
{
|
||||||
|
if(playing)
|
||||||
|
{
|
||||||
|
//1.Add current score to sctivr Player's score
|
||||||
|
scores[activePlayer] += currentScore; //scores[activePlayer] = scores[activePlayer + currentScore
|
||||||
|
document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer];
|
||||||
|
|
||||||
|
//2. Check if Player's score is >= 100
|
||||||
|
if(scores[activePlayer] >= 100)
|
||||||
|
{
|
||||||
|
//finish the Game
|
||||||
|
playing = false;
|
||||||
|
diceEl.classList.add('hidden');//removing the dice after won
|
||||||
|
document.querySelector(`.player--${activePlayer}`).classList.add('player--winner');
|
||||||
|
document.querySelector(`.player--${activePlayer}`).classList.remove('player--active');//removing the previous class
|
||||||
|
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
//Switch to the next Player -
|
||||||
|
switchPlayer();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//reset Function calling
|
||||||
|
btnNew.addEventListener('click', init);
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Nunito', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 100vh;
|
||||||
|
color: #333;
|
||||||
|
background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
width: 100rem;
|
||||||
|
height: 60rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.35);
|
||||||
|
backdrop-filter: blur(200px);
|
||||||
|
filter: blur();
|
||||||
|
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 9px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
flex: 50%;
|
||||||
|
padding: 9rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
transition: all 0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ELEMENTS */
|
||||||
|
.name {
|
||||||
|
position: relative;
|
||||||
|
font-size: 4rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
word-spacing: 2px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-size: 8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #c7365f;
|
||||||
|
margin-bottom: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player--active {
|
||||||
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
.player--active .name {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.player--active .score {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player--active .current {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current {
|
||||||
|
background-color: #c7365f;
|
||||||
|
opacity: 0.8;
|
||||||
|
border-radius: 9px;
|
||||||
|
color: #fff;
|
||||||
|
width: 65%;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: all 0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-label {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-score {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ABSOLUTE POSITIONED ELEMENTS */
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #444;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 400;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
padding: 0.7rem 2.5rem;
|
||||||
|
border-radius: 50rem;
|
||||||
|
box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn::first-letter {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--new {
|
||||||
|
top: 4rem;
|
||||||
|
}
|
||||||
|
.btn--roll {
|
||||||
|
top: 39.3rem;
|
||||||
|
}
|
||||||
|
.btn--hold {
|
||||||
|
top: 46.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translate(-50%, 3px);
|
||||||
|
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dice {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 16.5rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
height: 10rem;
|
||||||
|
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player--winner {
|
||||||
|
background-color: #2f2f2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player--winner .name {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #c7365f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hidden Class */
|
||||||
|
|
||||||
|
.hidden{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue