Skip to content

Commit

Permalink
Update game logic and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@MA-Abahmane
MA-Abahmane committed Mar 14, 2024
1 parent e00f28f commit 2589b65
Show file tree
Hide file tree
Showing 23 changed files with 118 additions and 23 deletions.
Binary file added Img/b10.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b12.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b13.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b14.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b15.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b7.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/b9.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c16.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c17.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c18.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c19.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c20.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c21.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c22.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c23.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c24.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/c25.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 27 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
<title>Cup-Con</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>

<div class="outer">
<div class="inner">
<div class="board">
Expand All @@ -21,9 +20,8 @@ <h2><span class="scoreNm">0</span>&#9828;</h2>
<div class="preloader">
<div class="loader"></div>
<h2 style="color: white;">LOADING...</h3>
</div>

<h3> THIMBLES! </h3>
</div>
<h3> THIMBLES! </h3>
<div id="countdown">05:00</div>
<div class="score">Balance: <span class="scoreNm">200</span>&#9828;</div>
<div class="shop">
Expand All @@ -37,22 +35,41 @@ <h2>Cups</h2>
<div class="c5" onclick="setCup(5)"></div>
<div class="c6" onclick="setCup(6)"></div>
<div class="c7" onclick="setCup(7)"></div>
<div class="c23" onclick="setCup(23)"></div>
<div class="c8" onclick="setCup(8)"></div>
<div class="c9" onclick="setCup(9)"></div>
<div class="c10" onclick="setCup(10)"></div>
<div class="c11" onclick="setCup(11)"></div>
<div class="c12" onclick="setCup(12)"></div>
<div class="c13" onclick="setCup(13)"></div>
<div class="c14" onclick="setCup(14)"></div>
<div class="c16" onclick="setCup(16)"></div>
<div class="c9" onclick="setCup(9)"></div>
<div class="c17" onclick="setCup(17)"></div>
<div class="c10" onclick="setCup(10)"></div>
<div class="c15" onclick="setCup(15)"></div>

<div class="c11" onclick="setCup(11)"></div>
<div class="c19" onclick="setCup(19)"></div>
<div class="c20" onclick="setCup(20)"></div>
<div class="c21" onclick="setCup(21)"></div>
<div class="c18" onclick="setCup(18)"></div>
<div class="c22" onclick="setCup(22)"></div>
<div class="c24" onclick="setCup(24)"></div>
<div class="c25" onclick="setCup(25)"></div>
<h2>Balls</h2>
<div class="b0" onclick="setBall(0)"></div>
<div class="b1" onclick="setBall(1)"></div>
<div class="b2" onclick="setBall(2)"></div>
<div class="b3" onclick="setBall(3)"></div>
<div class="b4" onclick="setBall(4)"></div>
<div class="b5" onclick="setBall(5)"></div>
<div class="b6" onclick="setBall(6)"></div>
<div class="b7" onclick="setBall(7)"></div>
<div class="b8" onclick="setBall(8)"></div>
<div class="b9" onclick="setBall(9)"></div>
<div class="b10" onclick="setBall(10)"></div>
<div class="b11" onclick="setBall(11)"></div>
<div class="b12" onclick="setBall(12)"></div>
<div class="b13" onclick="setBall(13)"></div>
<div class="b14" onclick="setBall(14)"></div>
<div class="b15" onclick="setBall(15)"></div>
<div class="s"></div>
</div>

Expand Down
27 changes: 21 additions & 6 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let points = document.getElementsByClassName("scoreNm")[1];
let [score, points] = [...document.getElementsByClassName("scoreNm")]
const countdownEl = document.getElementById('countdown');
let board = document.querySelector(".outer");
let table = document.querySelector(".table");


//pre-loader
Expand All @@ -16,10 +17,24 @@ let onTable = 0
//this function triggers when you click play
function StartGame() {
if (parseInt(points.innerHTML) <= 0) {
score.innerHTML = 'No spades left '
board.style.display = "flex";
clearInterval(idItr);
} else if (onTable == 0) {
alert("Please place a bet");
// blinking border
table.style.border = '5px dashed red'

setTimeout(() => {
table.style.border = '5px dashed transparent'
}, 500)

setTimeout(() => {
table.style.border = '5px dashed red'
}, 1000)

setTimeout(() => {
table.style.border = '5px dashed transparent'
}, 1500)
} else {
Showball();
// setTimeout(Showball,);
Expand Down Expand Up @@ -67,8 +82,8 @@ function Showball() {

if (timeLeft <= 0) {
clearInterval(idItr);
alert("Time's up! You Won " + points.innerHTML + " spades!!");
board.style.display = "flex";
score.innerHTML = 'Time\'s up! You Won ' + points.innerHTML + ' '
}

let minutes = Math.floor(timeLeft / 60);
Expand All @@ -84,7 +99,7 @@ function Showball() {
}
}

//this function resets the class of all the thimbles to default
// This function resets the class of all the thimbles to default
function resetthimbclass() {
document
.getElementById("Cup0")
Expand Down Expand Up @@ -204,6 +219,7 @@ function selectthimble(x) {

if (points.innerHTML <= 0) {
board.style.display = "flex";
score.innerHTML = 'No spades left '
clearInterval(idItr);
}
onTable = 0;
Expand Down Expand Up @@ -244,13 +260,12 @@ function setOnTable(prst) {
sum.innerHTML = onTable;
} else {
board.style.display = "flex";
score.innerHTML = 'No spades left '
clearInterval(idItr);
}
}

function init() {
setCup(9);
setBall(1);
setOnTable(0);
points.innerHTML = 200;
board.style.display = "none";
Expand Down
77 changes: 70 additions & 7 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ body {
.game_section {
position: relative;
width: 100%;
height: 60vh;
height: 62vh;
min-height: 60vh;
display: flex;
align-items: center;
Expand All @@ -112,7 +112,7 @@ body {

/* Thimble */
.sewing_thimble {
background: url(Img/c9.png) no-repeat fixed center;
background: url(Img/c10.png) no-repeat fixed center;
background-size: contain;
border: none;
position: absolute;
Expand Down Expand Up @@ -198,7 +198,7 @@ top: 13.5em;
width: 9.5vw;
height: 5.75vh;
min-width: 15.875em;
bottom: -13em;
bottom: -12.5em;
padding: 0.45em 0.625em 0.625em;
background-color: transparent;
backdrop-filter: blur(0.2em);
Expand Down Expand Up @@ -370,6 +370,38 @@ top: 13.5em;
.c15 {
background: url(Img/c15.png) no-repeat center;
}
.c16 {
background: url(Img/c16.png) no-repeat center;
}
.c17 {
background: url(Img/c17.png) no-repeat center;
}
.c18 {
background: url(Img/c18.png) no-repeat center;
}
.c19 {
background: url(Img/c19.png) no-repeat center;
}
.c20 {
background: url(Img/c20.png) no-repeat center;
}
.c21 {
background: url(Img/c21.png) no-repeat center;
}
.c22 {
background: url(Img/c22.png) no-repeat center;
}
.c23 {
background: url(Img/c23.png) no-repeat center;
}
.c24 {
background: url(Img/c24.png) no-repeat center;
}
.c25 {
background: url(Img/c25.png) no-repeat center;
}



.shop > div[class^="b"] {
width: 4em;
Expand Down Expand Up @@ -404,6 +436,36 @@ top: 13.5em;
.b5 {
background: url(Img/b5.png) no-repeat center;
}
.b6 {
background: url(Img/b6.png) no-repeat center;
}
.b7 {
background: url(Img/b7.png) no-repeat center;
}
.b8 {
background: url(Img/b8.png) no-repeat center;
}
.b9 {
background: url(Img/b9.png) no-repeat center;
}
.b10 {
background: url(Img/b10.png) no-repeat center;
}
.b11 {
background: url(Img/b11.png) no-repeat center;
}
.b12 {
background: url(Img/b12.png) no-repeat center;
}
.b13 {
background: url(Img/b13.png) no-repeat center;
}
.b14 {
background: url(Img/b14.png) no-repeat center;
}
.b15 {
background: url(Img/b15.png) no-repeat center;
}
.s {
width: 100%;
height: 2em;
Expand All @@ -412,7 +474,7 @@ top: 13.5em;

.table {
position: absolute;
top: 60%;
top: 55%;
left: 0;
width: 15em;
height: 30em;
Expand All @@ -424,6 +486,7 @@ top: 13.5em;
backdrop-filter: blur(1em);
box-shadow: 0em 0.1em 0.425em #000000bd;
border-radius: 1em;
border: 5px dashed transparent;
z-index: 10;
transition: all 0.5s ease-in-out;
}
Expand Down Expand Up @@ -466,8 +529,8 @@ top: 13.5em;

.outer {
position: absolute;
width: 112em;
height: 60em;
width: 102vw;
height: 105vh;
top: -1em;
left: -1em;
display: flex;
Expand All @@ -491,7 +554,7 @@ top: 13.5em;
align-content: center;
justify-content: center;
box-shadow: 0em 0.1em 0.625em #000000bd;
background: rgba(255, 255, 255, 0.615);
background: #ffffff37;
border-radius: 1em;
transition: all 0.5s ease-in-out;
z-index: 12;
Expand Down

0 comments on commit 2589b65

Please sign in to comment.