this is cool
This commit is contained in:
mileswa1q22
@@ -151,6 +151,7 @@
|
||||
<a href="/wedrowemdlemtest/webretro-master/webretro-master/embed/Mario & Luigi_ Superstar Saga.html">Mario & Luigi_ Superstar Saga</a>
|
||||
<a href="/wedrowemdlemtest/webretro-master/webretro-master/embed/Metroid Fusion.html">Metroid Fusion</a>
|
||||
<a href="/wedrowemdlemtest/webretro-master/webretro-master/embed/Mario Kart 64.html">Mario Kart 64</a>
|
||||
<a href="/games/WebGames-master/WebGames-master/index.html">this is the new look we goin for </a>
|
||||
</head>
|
||||
</form>
|
||||
<div id="disqus_thread"></div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.vscode
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/assets/the_bubble_game.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- adding google fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Bricolage+Grotesque:[email protected]&family=Chakra+Petch:wght@400;700&family=Tilt+Prism&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="script.js"></script>
|
||||
|
||||
<title>Bubble Game</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="menu-screen">
|
||||
|
||||
<div class="main-instruction">
|
||||
<h1>Instructions:</h1>
|
||||
<h4>
|
||||
<ul>
|
||||
<li>You have 60 seconds to play the game.</li>
|
||||
<li>A number is displayed in the Hit Panel for reference.</li>
|
||||
<li>Bubbles with random numbers will be present in the Bubble Area.</li>
|
||||
<li>Your task is to hit the bubble with the same number as displayed in the Hit Panel.</li>
|
||||
<li>Successful match: +10 points are awarded.</li>
|
||||
<li>Unsuccessful match: -10 points are deducted.</li>
|
||||
<li>Bubbles' numbers change after each hit.</li>
|
||||
<li>Try to score as many points as possible within the time limit.</li>
|
||||
</ul>
|
||||
</h4>
|
||||
</div>
|
||||
<button class="video-game-button">START</button>
|
||||
</div>
|
||||
|
||||
<div class="game-over-screen">
|
||||
<h1>game over</h1>
|
||||
<h3>your score: <span class="current-score">0</span></h3>
|
||||
<h3>High score: <span class="high-score">0</span></h3>
|
||||
<button class="video-game-button">PLAY AGAIN</button>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="main-panel">
|
||||
<div class="panel-nav">
|
||||
<div class="elem">
|
||||
<h4>hit</h4>
|
||||
<div class="box hit-box">5</div>
|
||||
</div>
|
||||
<div class="elem">
|
||||
<h4>timer</h4>
|
||||
<div class="box timer-box"></div>
|
||||
</div>
|
||||
<div class="elem">
|
||||
<h4>score</h4>
|
||||
<div class="box score-box">0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
|
||||
gsap.from(".menu-screen .main-instruction",{
|
||||
delay:0.2,
|
||||
// x:-200,
|
||||
// scale:0,
|
||||
rotate:-45,
|
||||
opacity:0,
|
||||
duration: 0.3,
|
||||
})
|
||||
|
||||
var panelContent = document.querySelector(".panel-content");
|
||||
var timerBox = document.querySelector(".timer-box");
|
||||
var hitBox = document.querySelector(".hit-box");
|
||||
var scoreBox = document.querySelector(".score-box");
|
||||
var gameOverScreen = document.querySelector(".game-over-screen");
|
||||
var gameOverScore = document.querySelector(".game-over-screen .current-score");
|
||||
var retplayBtn = document.querySelector(".game-over-screen button");
|
||||
var startBtn = document.querySelector(".menu-screen button");
|
||||
var highScoreDisplay = document.querySelector(".game-over-screen .high-score");
|
||||
|
||||
var score = 0;
|
||||
|
||||
function bubbleMaker(panelContent) {
|
||||
var query = "";
|
||||
var panelWidth = panelContent.offsetWidth;
|
||||
var panelHeight = panelContent.offsetHeight;
|
||||
var bubbleSize = 40;
|
||||
var bubblePerRow = panelWidth / bubbleSize;
|
||||
var numRow = panelHeight / bubbleSize;
|
||||
var totalBubbles = bubblePerRow * numRow;
|
||||
|
||||
for (let i = 0; i <= totalBubbles; i++) {
|
||||
var randomNum = Math.floor(Math.random() * 10);
|
||||
query += ` <div class="bubble">${randomNum}</div> `;
|
||||
}
|
||||
|
||||
document.querySelector(".panel-content").innerHTML = query;
|
||||
var bubbles = document.getElementsByClassName("bubble");
|
||||
for (let i = 0; i < bubbles.length; i++)
|
||||
{
|
||||
bubbles[i].style.animationName = "bubble-anim";
|
||||
bubbles[i].style.animationIterationCount = "infinite";
|
||||
bubbles[i].style.animationDelay = Math.random() + "s";
|
||||
bubbles[i].style.animationDuration = 0.8 + Math.random()*0.5 + "s";
|
||||
}
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
gameOverScreen.style.display = "flex";
|
||||
gsap.from(".game-over-screen",{
|
||||
y:"-100vh",
|
||||
duration:0.3
|
||||
});
|
||||
gameOverScore.innerHTML = score;
|
||||
if (score > getHighScore())
|
||||
{
|
||||
setHighScore(score);
|
||||
}
|
||||
highScoreDisplay.innerHTML = getHighScore();
|
||||
}
|
||||
|
||||
function setHighScore(score) {
|
||||
document.cookie = "highScore=" + score + ";path=/";
|
||||
}
|
||||
function getHighScore() {
|
||||
if (document.cookie == "") {
|
||||
return 0;
|
||||
} else {
|
||||
return document.cookie.split("=")[1];
|
||||
}
|
||||
}
|
||||
|
||||
var time = 60;
|
||||
timerBox.innerHTML = time;
|
||||
function timeFunction() {
|
||||
var timerInterval = setInterval(() => {
|
||||
if (time > 0) {
|
||||
time--;
|
||||
timerBox.innerHTML = time;
|
||||
}
|
||||
else{
|
||||
gameOver();
|
||||
clearInterval(timerInterval);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function generateHit() {
|
||||
let hitNum = Math.floor(Math.random()*10);
|
||||
hitBox.innerHTML = hitNum;
|
||||
}
|
||||
|
||||
panelContent.addEventListener("click", (dets)=>{//Event bubbling
|
||||
if(dets.target.classList.contains('bubble')) {
|
||||
if(dets.target.innerHTML == hitBox.innerHTML){
|
||||
score += 10;
|
||||
scoreBox.innerHTML = score;
|
||||
if (score >= 0) {
|
||||
scoreBox.style.color = "rgb(28, 76, 223)";
|
||||
}
|
||||
generateHit();
|
||||
bubbleMaker(panelContent);
|
||||
}
|
||||
else{
|
||||
score -= 10;
|
||||
scoreBox.innerHTML = score;
|
||||
if (score < 0) {
|
||||
scoreBox.style.color = "red";
|
||||
}
|
||||
generateHit();
|
||||
bubbleMaker(panelContent);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
startBtn.addEventListener("click", () => {
|
||||
|
||||
gsap.to(".menu-screen",{
|
||||
scale:0
|
||||
});
|
||||
generateHit();
|
||||
timeFunction();
|
||||
bubbleMaker(panelContent);
|
||||
});
|
||||
|
||||
retplayBtn.addEventListener("click", () => {
|
||||
score = 0;
|
||||
scoreBox.innerHTML = score;
|
||||
scoreBox.style.color = "rgb(28, 76, 223)";
|
||||
gameOverScreen.style.display = "none"
|
||||
generateHit();
|
||||
timeFunction();
|
||||
bubbleMaker(panelContent);
|
||||
time = 61;
|
||||
});
|
||||
@@ -0,0 +1,308 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.main{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(159, 173, 218);
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
width: 85vw;
|
||||
height: 80vh;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.panel-nav{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background-color: rgb(28, 76, 223);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.elem{
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-family: 'Chakra Petch', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.box{
|
||||
color: rgb(28, 76, 223);
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
padding: 5px 8px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Arvo', serif;
|
||||
|
||||
}
|
||||
|
||||
.panel-content{
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
height: calc(100% - 60px);
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'Arvo', serif;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bubble{
|
||||
background-color: #1c29df;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bubble:hover{
|
||||
cursor: pointer;
|
||||
background-color: #211594;
|
||||
}
|
||||
|
||||
.menu-screen{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(0, 255, 0, 0.434);
|
||||
backdrop-filter: blur(5px);
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
|
||||
.menu-screen .main-instruction {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
background-color: rgba(0, 181, 159, 0.50) !important; /*The color set to rgba(0, 181, 159, 0.50) provides good contrast. Phillip Andrews*/
|
||||
/*Changed hexadecimal notation to match the rgba color. Also, I added !important after both background-colors so the desired
|
||||
background color takes precedence. Phillip Andrews*/
|
||||
background-color: #00b59f80 !important; /* Hexadecimal notation */
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 40px 50px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.menu-screen .main-instruction h1{
|
||||
font-family: 'Chakra Petch', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 3vw;
|
||||
color: #211594;
|
||||
|
||||
}
|
||||
|
||||
.main-instruction ul li::before {
|
||||
font-size: 25px;
|
||||
content: "\2022";
|
||||
color: #211594;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
.menu-screen .main-instruction ul{
|
||||
list-style: none;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
font-weight: 400;
|
||||
text-transform: capitalize;
|
||||
font-size: 1.4vw;
|
||||
color: #211594;
|
||||
}
|
||||
|
||||
.game-over-screen{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
background-color: rgba(22, 56, 159, 0.475);
|
||||
backdrop-filter: blur(5px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
}
|
||||
|
||||
.game-over-screen h1{
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
font-size: 999;
|
||||
font-size: 3vw;
|
||||
font-family: 'Arvo', serif;
|
||||
}
|
||||
|
||||
.game-over-screen h3{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: capitalize;
|
||||
font-family: 'Bricolage Grotesque', sans-serif;
|
||||
}
|
||||
|
||||
.game-over-screen h3 .current-score{
|
||||
color: #ffffff;
|
||||
font-size: 40px;
|
||||
font-family: 'Arvo', serif;
|
||||
}
|
||||
.game-over-screen h3 .high-score{
|
||||
color: #ffffff;
|
||||
font-size: 40px;
|
||||
font-family: 'Arvo', serif;
|
||||
}
|
||||
.video-game-button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
font-family: 'Chakra Petch', sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
padding: .75em .5em;
|
||||
background: #1c29df; /* Blue color */
|
||||
border: 2px solid #0512a4; /* Darker blue color */
|
||||
border-radius: 0.75em;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #4a5dff; /* Lighter blue color */
|
||||
border-radius: inherit;
|
||||
-webkit-box-shadow: 0 0 0 2px #0512a4, 0 0.625em 0 0 #5263ff; /* Darker blue color */
|
||||
box-shadow: 0 0 0 2px #0512a4, 0 0.625em 0 0 #5263ff; /* Darker blue color */
|
||||
-webkit-transform: translate3d(0, 0.75em, -1em);
|
||||
transform: translate3d(0, 0.75em, -1em);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button:hover {
|
||||
background: #2936cc; /* Darker blue color on hover */
|
||||
/* border-color: white; */
|
||||
}
|
||||
|
||||
.video-game-button::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #0512a4, 0 0.5em 0 0 #5263ff; /* Darker blue color */
|
||||
box-shadow: 0 0 0 2px #0512a4, 0 0.5em 0 0 #333333; /* Darker color */
|
||||
-webkit-transform: translate3d(0, 0.5em, -1em);
|
||||
transform: translate3d(0, 0.5em, -1em);
|
||||
}
|
||||
|
||||
.video-game-button:active {
|
||||
background: #2936cc; /* Darker blue color on active */
|
||||
-webkit-transform: translate(0em, 0.75em);
|
||||
transform: translate(0em, 0.75em);
|
||||
}
|
||||
|
||||
.video-game-button:active::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #0512a4, 0 0 #5263ff; /* Darker blue color */
|
||||
box-shadow: 0 0 0 2px #0512a4, 0 0 #5263ff; /* Darker blue color */
|
||||
-webkit-transform: translate3d(0, 0, -1em);
|
||||
transform: translate3d(0, 0, -1em);
|
||||
}
|
||||
|
||||
.video-game-button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bubble-anim {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
|
||||
20% {
|
||||
-webkit-transform: scaleY(0.95) scaleX(1.05);
|
||||
transform: scaleY(0.95) scaleX(1.05); }
|
||||
|
||||
48% {
|
||||
-webkit-transform: scaleY(1.1) scaleX(0.9);
|
||||
transform: scaleY(1.1) scaleX(0.9); }
|
||||
|
||||
68% {
|
||||
-webkit-transform: scaleY(0.98) scaleX(1.02);
|
||||
transform: scaleY(0.98) scaleX(1.02); }
|
||||
|
||||
80% {
|
||||
-webkit-transform: scaleY(1.02) scaleX(0.98);
|
||||
transform: scaleY(1.02) scaleX(0.98); }
|
||||
|
||||
97%, 100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); } }
|
||||
|
||||
@keyframes bubble-anim {
|
||||
0% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
|
||||
20% {
|
||||
-webkit-transform: scaleY(0.95) scaleX(1.05);
|
||||
transform: scaleY(0.95) scaleX(1.05); }
|
||||
|
||||
48% {
|
||||
-webkit-transform: scaleY(1.1) scaleX(0.9);
|
||||
transform: scaleY(1.1) scaleX(0.9); }
|
||||
|
||||
68% {
|
||||
-webkit-transform: scaleY(0.98) scaleX(1.02);
|
||||
transform: scaleY(0.98) scaleX(1.02); }
|
||||
|
||||
80% {
|
||||
-webkit-transform: scaleY(1.02) scaleX(0.98);
|
||||
transform: scaleY(1.02) scaleX(0.98); }
|
||||
|
||||
97%, 100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- google fonts link -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=M+PLUS+1+Code&family=Nunito:wght@300;400;500&family=Slabo+13px&display=swap" rel="stylesheet">
|
||||
<link rel="icon" href="/assets/dev_quiz.png">
|
||||
|
||||
<!-- font awesome cdn -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script defer src="script.js"></script>
|
||||
|
||||
<title>👨💻 Dev Quiz 👨💻</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="game-end-panel">
|
||||
<h1 class="end-result">
|
||||
|
||||
<span class="init">function</span>
|
||||
<span class="function">gameResult</span><span class="brackets">(){</span>
|
||||
<br>
|
||||
<span class="result-panel">
|
||||
<h3 class="remark-emoji">{emo}</h3>
|
||||
<h3 class="score-section">score: <span class="score-box">0</span>/<span class="total-score">0<script></script></span></h3>
|
||||
<h3 class="percent">( 0% )</h3>
|
||||
<br><br>
|
||||
<span class="btn">  <button class="restart-btn">restartQuiz<span class="btn-brackets">()</span><span class="btn-colon">;</span></button></span>
|
||||
|
||||
|
||||
</span>
|
||||
<br>
|
||||
<span class="brackets">}</span>
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="game-instructions">
|
||||
<div class="close-btn">
|
||||
<h1 class="exit">
|
||||
<span class="code">exit</span>
|
||||
<span class="brackets">()</span>
|
||||
<span class="colon">;</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="instructions">
|
||||
<h1 class="inst-heading">
|
||||
<span class="code">Console.log</span>
|
||||
<span class="brackets">(</span><span class="string">game-instruction</span>
|
||||
<span class="brackets">)</span><span class="colon">;</span>
|
||||
<br>
|
||||
<br>
|
||||
<span class="output">></span>
|
||||
</h1>
|
||||
<h2 class="inst-text">
|
||||
<ul>
|
||||
<li>If you are not programmer ( or related to field of <span class="is-love">Computer Science❤️</span> ), this game might be not for you as this game is for programmers.</li>
|
||||
<li>The game presents questions related to programming or computer science, each with four answer options.</li>
|
||||
<li>Payers must select the option they believe is the correct answer.</li>
|
||||
<li>Correct answers are worth 10 points, and there's no penalty for wrong answers.</li>
|
||||
<li>The final score is determined by the number of correct answers, with a maximum of 10 points per question.</li>
|
||||
<li>At the end of the game, players will see their total score as an indicator of their programming knowledge.</li>
|
||||
</ul>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-screen">
|
||||
<div class="start-panel">
|
||||
<h1>
|
||||
<span class="code">Console.log<span class="brackets">(</span>
|
||||
<span class="string">"Dev Quiz"</span>
|
||||
<span class="brackets">)</span>
|
||||
<span class="colon">;</span>
|
||||
</span>
|
||||
<br>
|
||||
<br>
|
||||
<span class="if-else">if </span><span class="brackets">(</span>
|
||||
<span class="function">programmer<span class="brackets">()</span></span>
|
||||
<span class="brackets">){</span>
|
||||
<br>
|
||||
<span class="btn">  <button class="start-btn">startQuiz<span class="btn-brackets">()</span><span class="btn-colon">;</span></button></span>
|
||||
<br>
|
||||
<span class="if-else"><span class="brackets">}</span><br>else<span class="brackets">{</span></span>
|
||||
<br>
|
||||
<span class="function read-instruction">  readInstruction<span class="brackets">()</span><span class="colon">;</span></span>
|
||||
<br>
|
||||
<span class="brackets">}</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="instruction-panel">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="game-screen">
|
||||
<div class="score-panel">Score: <span class="score">0</span></div>
|
||||
<!-- here all the game data will be present -->
|
||||
<div class="game-panel">
|
||||
<div class="question-panel">
|
||||
<h1>QUESTION</h1>
|
||||
</div>
|
||||
<div class="option-panel">
|
||||
<button class="options option-a">OPTION</button>
|
||||
<button class="options option-b">OPTION</button>
|
||||
<button class="options option-c">OPTION</button>
|
||||
<button class="options option-d">OPTION</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question-count-wrapper">
|
||||
<span class="question-count"></span>
|
||||
<span class="questions-array-length"></span>
|
||||
<span class="questions-asked-array"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,312 @@
|
||||
|
||||
// declaring variables here
|
||||
const startBtn = document.querySelector(".btn .start-btn");
|
||||
const restartBtn = document.querySelector(".restart-btn");
|
||||
const mainScreen = document.querySelector(".main-screen");
|
||||
const question = document.querySelector(".question-panel h1");
|
||||
const optionPanel = document.querySelector(".option-panel")
|
||||
const options = document.getElementsByClassName("options");
|
||||
const optionA = document.querySelector(".option-a");
|
||||
const optionB = document.querySelector(".option-b");
|
||||
const optionC = document.querySelector(".option-c");
|
||||
const optionD = document.querySelector(".option-d");
|
||||
const scoreSection = document.querySelector(".score");
|
||||
const gameScreen = document.querySelector(".game-screen");
|
||||
const gameEndPanel = document.querySelector(".game-end-panel");
|
||||
const gameScoreBox = document.querySelector(".score-box");
|
||||
const totalScoreBox = document.querySelector(".total-score");
|
||||
const percentBox = document.querySelector(".percent");
|
||||
const remarkEmoji = document.querySelector(".remark-emoji");
|
||||
|
||||
//debugging variables and functions start
|
||||
const questionCountElement = document.querySelector(".question-count");
|
||||
const questionsAskedElement = document.querySelector(".questions-asked-array");
|
||||
const questionArrayLengthElement = document.querySelector(".questions-array-length");
|
||||
let optionPanelPointerEventEnabled = true;
|
||||
|
||||
function print(msg)
|
||||
{
|
||||
console.log(msg);
|
||||
}
|
||||
function updateQuestionCountElement(count){
|
||||
//this function is for debugging purposes only
|
||||
questionCountElement.innerHTML = `question count: ${count}`;
|
||||
}
|
||||
function updateQuestionsArrayLengthElement(length)
|
||||
{
|
||||
//this function is for debugging purposes only
|
||||
questionArrayLengthElement.innerHTML = `question array length: ${length} `
|
||||
}
|
||||
function updateQuestionsAskedElement(length)
|
||||
{
|
||||
//this function is for debugging purposes only
|
||||
questionsAskedElement.innerHTML = `questions asked length : ${length} `
|
||||
}
|
||||
//debugging variables and functions end here
|
||||
|
||||
const readInstructionBtn = document.querySelector(".read-instruction");
|
||||
const instructionPanel = document.querySelector(".game-instructions");
|
||||
const instExitBtn = document.querySelector(".close-btn");
|
||||
|
||||
|
||||
let questionIndex = 0;
|
||||
|
||||
let questionsAsked = []; //all the asked questions will be entered in this array so they will never repeat.
|
||||
let score = 0,
|
||||
scorePercent = 0,
|
||||
questionCount = 0;
|
||||
updateQuestionCountElement(questionCount);
|
||||
|
||||
// questions
|
||||
const questionArray = [
|
||||
"What does HTML stand for?",
|
||||
"Which of the following is not a JavaScript data type?",
|
||||
"What is the result of 2 + '2' in JavaScript?",
|
||||
"What keyword is used to declare a variable in JavaScript?",
|
||||
"Which built-in method adds one or more elements to the end of an array and returns the new length?",
|
||||
"What does CSS stand for?",
|
||||
"Which operator is used for equality comparison without type coercion in JavaScript?",
|
||||
"What does API stand for?",
|
||||
"What is the purpose of the 'use strict' directive in JavaScript?",
|
||||
"Which function is used to parse a JSON string?",
|
||||
"What is the main purpose of a constructor function in JavaScript?",
|
||||
"Which method is used to remove the last element from an array in JavaScript?",
|
||||
"What is the default behavior of the event.preventDefault() method?",
|
||||
"Which keyword is used to declare a constant variable in JavaScript?",
|
||||
"What is the purpose of a callback function in JavaScript?",
|
||||
"Which global function is used to convert a string to an integer?",
|
||||
"What does the acronym CRUD stand for in the context of databases?",
|
||||
"What is the significance of the 'this' keyword in JavaScript?",
|
||||
"Which method is used to schedule a function to run after a certain delay?",
|
||||
"What is the difference between 'null' and 'undefined' in JavaScript?",
|
||||
"What does the NaN value represent in JavaScript?"
|
||||
];
|
||||
|
||||
updateQuestionsArrayLengthElement(questionArray.length)
|
||||
let totalScore = (questionArray.length)*10;
|
||||
totalScoreBox.innerHTML = totalScore;
|
||||
|
||||
|
||||
// options
|
||||
|
||||
const mcqArray = [
|
||||
["High Text Markup Language", "Hyperlink and Text Markup Language", "Hyper Transfer Markup Language", "Hyper Text Markup Language"],
|
||||
["Boolean", "Alert", "Number", "String"],
|
||||
["Error", "4", "NaN", "22"],
|
||||
["int", "string", "variable", "var"],
|
||||
["addToEnd()", "concat()", "push()", "append()"],
|
||||
["Colorful Style Sheets", "Creative Style Sheets", "Cascading Style Sheets", "Computer Style Sheets"],
|
||||
["!==", "===", "==", "="],
|
||||
["Advanced Programming Interface", "Automated Programming Interface", "Application Protocol Interface", "Application Programming Interface"],
|
||||
["Declares a variable", "Enforces stricter parsing and error handling", "Defines a function", "Includes an external script"],
|
||||
["JSON.stringify()", "JSON.serialize()", "JSON.parse()", "JSON.decode()"],
|
||||
["Memory management", "DOM manipulation", "Creating objects", "Error handling"],
|
||||
["shift()", "remove()", "pop()", "delete()"],
|
||||
["Cancels the default behavior of an element", "Prevents the event from bubbling up the DOM tree", "Stops the event propagation", "Prevents the event from capturing"],
|
||||
["const", "let", "constant", "var"],
|
||||
["Handling errors", "Passing a function as an argument to another function", "Executing an asynchronous operation", "Passing data to another domain"],
|
||||
["parseInt()", "toInteger()", "convertToInt()", "stringToInt()"],
|
||||
["Compile, Run, Upload, Debug", "Update, Read, Create, Delete", "Control, Repeat, Undo, Draw", "Copy, Resize, Underline, Delete"],
|
||||
["It refers to the previous function's scope", "It refers to the current function's scope", "It refers to the parent element's scope", "It refers to the global scope"],
|
||||
["setInterval()", "wait()", "delay()", "setTimeout()"],
|
||||
["'undefined' and 'null' can be used interchangeably", "'undefined' is an intentional absence of value, while 'null' indicates a variable that has been declared but not assigned a value", "'null' is an intentional absence of value, while 'undefined' indicates a variable that has been declared but not assigned a value", "'null' is the same as 'undefined'"],
|
||||
["Not-a-Number", "Null", "Negative", "No value"]
|
||||
];
|
||||
|
||||
// answer key
|
||||
const key = [3, 1, 3, 3, 2, 2, 1, 3, 1, 2, 2, 2, 0, 0, 1, 0, 1, 0, 3, 2, 0];
|
||||
|
||||
|
||||
// array contains the background colors
|
||||
const themeColorArray = [
|
||||
"rgb(89, 14, 89)",
|
||||
"rgb(89, 14, 15)",
|
||||
"rgb(24, 14, 89)",
|
||||
"rgb(14, 87, 89)",
|
||||
"rgb(14, 89, 57)",
|
||||
"rgb(27, 89, 14)",
|
||||
"rgb(89, 53, 14)",
|
||||
"rgb(112, 20, 143)",
|
||||
"rgb(143, 20, 120)",
|
||||
"rgb(20, 143, 63)"
|
||||
];
|
||||
|
||||
|
||||
|
||||
// application logic
|
||||
selectTheme();
|
||||
function showGameOverScreen()
|
||||
{
|
||||
gameEndPanel.style.display = "flex";
|
||||
gameScoreBox.innerHTML = `${score}`;
|
||||
scorePercent = Math.trunc((score/totalScore) * (100));
|
||||
percentBox.innerHTML = `( ${scorePercent}% )`;
|
||||
}
|
||||
function calculateTheFinalScore()
|
||||
{
|
||||
|
||||
if (scorePercent >= 80) {
|
||||
remarkEmoji.innerHTML = "🤩";
|
||||
percentBox.style.color = "limegreen";
|
||||
} else if (scorePercent >= 70 && scorePercent < 80) {
|
||||
remarkEmoji.innerHTML = "🥳";
|
||||
percentBox.style.color = "lime";
|
||||
|
||||
} else if (scorePercent >= 60 && scorePercent < 70) {
|
||||
remarkEmoji.innerHTML = "👏"; // Change this emoji
|
||||
|
||||
} else if (scorePercent >= 50 && scorePercent < 60) {
|
||||
remarkEmoji.innerHTML = "👍";
|
||||
percentBox.style.color = "yeelow";
|
||||
|
||||
} else if (scorePercent < 50 && scorePercent > 39) {
|
||||
remarkEmoji.innerHTML = "😕";
|
||||
percentBox.style.color = "crimson";
|
||||
|
||||
}
|
||||
if (scorePercent <= 39 && scorePercent > 0) {
|
||||
remarkEmoji.innerHTML = "😳";
|
||||
percentBox.style.color = "crimson";
|
||||
|
||||
}
|
||||
else if (scorePercent === 0) {
|
||||
remarkEmoji.innerHTML = "🤐";
|
||||
percentBox.style.color = "crimson";
|
||||
|
||||
} else if (scorePercent === 100) {
|
||||
remarkEmoji.innerHTML = "💯";
|
||||
percentBox.style.color = "lightgreen";
|
||||
|
||||
}
|
||||
}
|
||||
function gameFunction() {
|
||||
changeQuestion();
|
||||
optionA.addEventListener("click", () => checkAnswer(0));
|
||||
optionB.addEventListener("click", () => checkAnswer(1));
|
||||
optionC.addEventListener("click", () => checkAnswer(2));
|
||||
optionD.addEventListener("click", () => checkAnswer(3));
|
||||
|
||||
}
|
||||
function toggleOptionPanelClickEvents()
|
||||
{
|
||||
//this prevent users from queueing the same timer multiple times by clickign on answers repeatedly
|
||||
optionPanelPointerEventEnabled = !optionPanelPointerEventEnabled;
|
||||
|
||||
optionPanel.style.pointerEvents = optionPanelPointerEventEnabled? "initial": "none";
|
||||
}
|
||||
|
||||
// function will change questions and options
|
||||
function changeQuestion() {
|
||||
optionA.classList.remove("right-option", "wrong-option");
|
||||
optionB.classList.remove("right-option", "wrong-option");
|
||||
optionC.classList.remove("right-option", "wrong-option");
|
||||
optionD.classList.remove("right-option", "wrong-option");
|
||||
toggleOptionPanelClickEvents();
|
||||
questionIndex = Math.floor(Math.random()*questionArray.length);
|
||||
|
||||
if(questionsAsked.length < questionArray.length )
|
||||
{
|
||||
while(questionsAsked.includes(questionIndex))
|
||||
{
|
||||
questionIndex = Math.floor(Math.random()*questionArray.length);
|
||||
}
|
||||
|
||||
questionsAsked.push(questionIndex);
|
||||
updateQuestionsAskedElement(questionsAsked.length)
|
||||
question.innerHTML = questionArray[questionIndex]; //change question text
|
||||
// change option text
|
||||
optionA.innerHTML = mcqArray[questionIndex][0];
|
||||
optionB.innerHTML = mcqArray[questionIndex][1];
|
||||
optionC.innerHTML = mcqArray[questionIndex][2];
|
||||
optionD.innerHTML = mcqArray[questionIndex][3];
|
||||
|
||||
questionCount++;
|
||||
|
||||
updateQuestionCountElement(questionCount);
|
||||
//this is what determines when the game is finished
|
||||
if (questionCount > questionArray.length -1) showGameOverScreen();
|
||||
calculateTheFinalScore();
|
||||
}else{
|
||||
updateQuestionsAskedElement(questionsAsked.length);
|
||||
}
|
||||
}
|
||||
|
||||
// function will check whether the answer selected by user is right or not.
|
||||
function checkAnswer(userIndex) {
|
||||
// make the right answer green
|
||||
toggleOptionPanelClickEvents();
|
||||
switch(key[questionIndex])
|
||||
{
|
||||
case 0: optionA.classList.add("right-option"); break;
|
||||
case 1: optionB.classList.add("right-option"); break;
|
||||
case 2: optionC.classList.add("right-option"); break;
|
||||
case 3: optionD.classList.add("right-option"); break;
|
||||
}
|
||||
const waitTimeBeforeTheNextQuestion = 500;
|
||||
//if anser is correct
|
||||
if (key[questionIndex] === userIndex) {
|
||||
score+=10;
|
||||
scoreSection.innerHTML = score;
|
||||
setTimeout(function(){
|
||||
changeQuestion();
|
||||
},waitTimeBeforeTheNextQuestion);
|
||||
}
|
||||
else{ //if answer is not correct
|
||||
|
||||
if (userIndex === 0) {
|
||||
optionA.classList.add("wrong-option");
|
||||
}
|
||||
else if (userIndex === 1) {
|
||||
optionB.classList.add("wrong-option");
|
||||
}
|
||||
else if (userIndex === 2) {
|
||||
optionC.classList.add("wrong-option");
|
||||
}
|
||||
else if (userIndex === 3) {
|
||||
optionD.classList.add("wrong-option");
|
||||
}
|
||||
setTimeout(function(){
|
||||
changeQuestion();
|
||||
},waitTimeBeforeTheNextQuestion);
|
||||
}
|
||||
}
|
||||
|
||||
// change theme color
|
||||
function selectTheme() {
|
||||
let themeIndex = Math.floor(Math.random()*themeColorArray.length);
|
||||
let themeColor = themeColorArray[themeIndex];
|
||||
gameScreen.style.backgroundColor = themeColor;
|
||||
}
|
||||
|
||||
|
||||
// click start button on menu screen to perform
|
||||
startBtn.addEventListener("click",() => {
|
||||
mainScreen.style.display = "none";
|
||||
toggleOptionPanelClickEvents();
|
||||
});
|
||||
|
||||
// click on restart button to restart game
|
||||
restartBtn.addEventListener("click", () => {
|
||||
// gameFunction();
|
||||
selectTheme();
|
||||
score = 0;
|
||||
questionCount = 0;
|
||||
updateQuestionCountElement(questionCount);
|
||||
questionsAsked.length = 0;
|
||||
updateQuestionsAskedElement(questionsAsked.length)
|
||||
scoreSection.innerHTML = score;
|
||||
gameEndPanel.style.display = "none";
|
||||
});
|
||||
|
||||
// read instruction button on main screen functionality
|
||||
readInstructionBtn.addEventListener("click", () => {
|
||||
instructionPanel.style.display = "flex";
|
||||
});
|
||||
|
||||
instExitBtn.addEventListener("click", () => {
|
||||
instructionPanel.style.display = "none";
|
||||
});
|
||||
|
||||
gameFunction();
|
||||
|
||||
|
||||
@@ -0,0 +1,479 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* this should block should be set as display: none; as this is used for debugging purposes only */
|
||||
.question-count-wrapper{
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
outline: 1px solid white;
|
||||
gap: 10px;
|
||||
--position-top-left-distance: 20px;
|
||||
bottom: var(--position-top-left-distance);
|
||||
left: var(--position-top-left-distance);
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
background-color: #1a1b26;
|
||||
|
||||
}
|
||||
|
||||
.question-count{
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.game-instructions,
|
||||
.main-screen,
|
||||
.game-screen,
|
||||
.question-panel,
|
||||
.option-panel,
|
||||
.score-panel,
|
||||
.game-end-panel,
|
||||
.result-panel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-screen{
|
||||
background-color: #1a1b26;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
gap: 15vh;
|
||||
}
|
||||
|
||||
.output,
|
||||
.code,
|
||||
.string,
|
||||
.start-btn,
|
||||
.if-else,
|
||||
.function,
|
||||
.brackets,
|
||||
.init{
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.init{
|
||||
color: #ac9af7;
|
||||
}
|
||||
|
||||
.if-else{
|
||||
color: #db78a1;
|
||||
}
|
||||
|
||||
.function{
|
||||
color: #4def74;
|
||||
}
|
||||
|
||||
.brackets{
|
||||
color: #2c4f9e;
|
||||
}
|
||||
|
||||
.colon, .code{
|
||||
color: #5aceff;
|
||||
}
|
||||
|
||||
.string{
|
||||
color: #e9ef84;
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.output{
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
.start-btn,
|
||||
.restart-btn{
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
padding: 10px 25px;
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
.restart-btn{
|
||||
margin-right: 4vw;
|
||||
}
|
||||
|
||||
.start-btn:hover,
|
||||
.restart-btn:hover{
|
||||
color: #4def74;
|
||||
}
|
||||
|
||||
.start-btn:hover .btn-brackets,
|
||||
.restart-btn:hover .btn-brackets{
|
||||
color: #2c4f9e;
|
||||
}
|
||||
|
||||
.start-btn:hover .btn-colon,
|
||||
.restart-btn:hover .btn-colon{
|
||||
color: #5aceff;
|
||||
}
|
||||
|
||||
.start-btn:active,
|
||||
.restart-btn:active{
|
||||
border-color: #db78a1;
|
||||
}
|
||||
|
||||
|
||||
.exit:hover,
|
||||
.read-instruction{
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.exit:hover,
|
||||
.read-instruction:hover{
|
||||
text-shadow: #4def74 1px 0 10px;;
|
||||
}
|
||||
|
||||
.exit:hover .brackets,
|
||||
.read-instruction:hover .brackets{
|
||||
text-shadow: #2c4f9e 1px 0 10px;;
|
||||
}
|
||||
|
||||
.exit:hover,
|
||||
.read-instruction:hover .colon{
|
||||
text-shadow: #5aceff 1px 0 10px;;
|
||||
}
|
||||
|
||||
.game-screen{
|
||||
font-family: 'Nunito', sans-serif;
|
||||
text-transform: capitalize;
|
||||
color: white;
|
||||
background-color: rgb(89, 14, 89);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.game-screen .score-panel{
|
||||
font-size: 2vw;
|
||||
margin-left: 78vw;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.game-screen .score-panel .score{
|
||||
font-size: 3vw;
|
||||
}
|
||||
|
||||
|
||||
.game-panel{
|
||||
background-color: rgba(255, 255, 255, 0.100);
|
||||
/* backdrop-filter: blur(5px); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 75vh; */
|
||||
height: fit-content;
|
||||
width: 70vw;
|
||||
border: 1px solid white;
|
||||
border-radius: 10px;
|
||||
gap: 80px;
|
||||
/* gap: 40px; */
|
||||
}
|
||||
|
||||
.question-panel{
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
font-family: 'Slabo 13px', serif;
|
||||
font-size: clamp(0.5rem, 1.2vw,5rem);
|
||||
}
|
||||
|
||||
.option-panel{
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.option-panel .options{
|
||||
text-align: center;
|
||||
font-family: 'M PLUS 1 Code', sans-serif;
|
||||
background-color: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.800);
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
word-wrap: nowrap;
|
||||
font-size: clamp(1.1rem, 1.35vw,5rem);
|
||||
min-width: 50vw;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.options:hover{
|
||||
background-color: rgba(255, 255, 255, 0.300);
|
||||
}
|
||||
|
||||
.options:active{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.game-end-panel{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #1a1b26;
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.result-panel{
|
||||
margin-top: 30px;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.exit{
|
||||
font-size: 1.3vw;
|
||||
justify-self: flex-end;
|
||||
cursor: pointer;
|
||||
margin-left: 45vw;
|
||||
}
|
||||
|
||||
.is-love{
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.game-instructions{
|
||||
display: none;
|
||||
padding: 10px;
|
||||
padding-right: 20px;
|
||||
background-color: #111111d6;
|
||||
border-radius: 30px;
|
||||
flex-direction: column;
|
||||
border: 1px solid white;
|
||||
width: 55vw;
|
||||
height: 75vh;
|
||||
position: absolute;
|
||||
backdrop-filter: blur(3px);
|
||||
left: 21vw;
|
||||
top: 12vh;
|
||||
z-index: 12;
|
||||
transition: 400ms;
|
||||
}
|
||||
|
||||
.game-instructions:hover{
|
||||
box-shadow: 0 0 30px #4def74;
|
||||
}
|
||||
|
||||
.instructions{
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.inst-heading,
|
||||
.inst-heading .string{
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.inst-text{
|
||||
color: #dedede;
|
||||
font-family: "fira code";
|
||||
font-size: 1.2vw;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.inst-text li{
|
||||
list-style: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.inst-text li::before{
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
.output{
|
||||
animation: output-anime 800ms linear infinite;
|
||||
}
|
||||
|
||||
.option-panel .right-option{
|
||||
background:limegreen;
|
||||
text-shadow: 1px 1px 3px black;
|
||||
}
|
||||
|
||||
.option-panel .wrong-option{
|
||||
background: crimson;
|
||||
text-shadow: 1px 1px 3px black;
|
||||
}
|
||||
|
||||
@keyframes output-anime {
|
||||
|
||||
0%{
|
||||
filter: opacity(1);
|
||||
|
||||
}
|
||||
|
||||
20%{
|
||||
filter: opacity(0);
|
||||
|
||||
}
|
||||
|
||||
40%{
|
||||
filter: opacity(1);
|
||||
|
||||
}
|
||||
|
||||
60%{
|
||||
filter: opacity(1);
|
||||
|
||||
}
|
||||
|
||||
80%{
|
||||
filter: opacity(0);
|
||||
|
||||
}
|
||||
|
||||
100%{
|
||||
filter: opacity(1);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* media queries */
|
||||
@media (max-width:600px) {
|
||||
|
||||
.main-screen{
|
||||
font-size: 3vw;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.main-screen .string{
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.start-btn,
|
||||
.restart-btn{
|
||||
padding: 10px 25px;
|
||||
border-radius: 30px;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.game-instructions{
|
||||
padding-right:7vw;
|
||||
width: 80vw;
|
||||
left: 5.5vw;
|
||||
top: 5vh;
|
||||
}
|
||||
|
||||
.inst-heading,
|
||||
.inst-heading .string{
|
||||
font-size: 3.5vw;
|
||||
}
|
||||
|
||||
.inst-text{
|
||||
font-size: 3.3vw;
|
||||
}
|
||||
|
||||
.exit{
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.game-panel{
|
||||
width: 90vw;
|
||||
/* height: 90vh; */
|
||||
/* height: fit-content; */
|
||||
overflow: hidden;
|
||||
padding: 20px 10px ;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.game-panel .score-panel{
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.option-panel{
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.option-panel .options{
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
.game-end-panel{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.end-result{
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
.game-screen .score-panel{
|
||||
font-size: 5vw;
|
||||
margin-left: 72vw;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.game-screen .score-panel .score{
|
||||
font-size: 5vw;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* adding media query for other devices */
|
||||
@media all and (max-width: 720px) {
|
||||
.game-panel {
|
||||
height: 80%;
|
||||
}
|
||||
.option-panel .options{
|
||||
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.option-panel {
|
||||
height: 100%;
|
||||
}
|
||||
.game-screen {
|
||||
width: 100%;
|
||||
}
|
||||
body, .option-panel {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.option-panel {
|
||||
height: 100%;
|
||||
/* margin-top: -50px; */
|
||||
}
|
||||
.option-panel .options {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
|
||||
# Welcome to WebGames Repository
|
||||
|
||||
|
||||
|
||||
The WebGames repository is a collaborative project aimed at creating a diverse collection of web-based games while having a supportive environment for both new and experienced developers. By participating in this open-source initiative, you can contribute to the world of game and web development, improve your logical thinking, and create enjoyable experiences for users across the globe.
|
||||
## Why WebGames?
|
||||
|
||||
Developing games provides an opportunity to enhance logical reasoning, problem-solving skills, and creativity. Especially, if you are a web developer you can increase your designing skills of HTML/CSS as well by creating prjects like this. The WebGames repository was established with the following goals in mind:
|
||||
|
||||
* **Learning Through Collaboration**: If you're new to the world of open source or game development, this repository is an excellent place to start. Collaborate with like-minded individuals, learn from experienced developers, and build impressive games together.
|
||||
|
||||
* **Contribute and Expand**: Whether you're an aspiring developer or a seasoned pro, there's a place for you in the WebGames community. Contribute your game creations, identify and fix bugs, or collaborate on enhancing existing games.
|
||||
|
||||
* **Free Platform**: The ultimate goal is to create a platform where users can find free web-based games to play and developers can develop games and support each others.
|
||||
## How to Get Involved
|
||||
|
||||
* **Develop a new game**: You can develop a new game from scratch. You can either create a clone game (with some changes) or develop a game with unique concept. The ultimate goal is to create projects to increase development skills.
|
||||
|
||||
* **Bug Hunting**: You can play and enjoy the games and find errors in it. Once you found a bug in any game just add another issue in issue section.
|
||||
|
||||
* **Choose an Issues**: If you're unsure where to start, head to the [Issues](https://github.com/sarmadhamdani02/webGames/issues) section and find tasks that match your skills and interests. It's a great way to learn, grow, and contribute simultaneously.
|
||||
## Getting Started
|
||||
|
||||
Not sure how things work. Here are some steps for you:
|
||||
|
||||
* **Fork** the WebGames repository to your GitHub account.
|
||||
|
||||
* **Clone** your forked repository to your local machine.
|
||||
|
||||
* **Make your changes**, additions or fixes.
|
||||
|
||||
* **Commit and push** your changes to your forked repository.
|
||||
|
||||
* Submit a **pull request** to have your changes reviewed and merged into the main repository.
|
||||
|
||||
* Try using HTML, CSS and Javascript (and any library of Javascript) only, as this repository is basically focusing on the skill development for beginners.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="icon" href="assets/page_icon.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Play:wght@700&family=Press+Start+2P&display=swap"
|
||||
rel="stylesheet" />
|
||||
<!-- font awesome cdn -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
||||
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
|
||||
<script defer src="script.js"></script>
|
||||
<title>fun-miles</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="nav-bar">
|
||||
<h1>fun-miles</h1>
|
||||
<div class="nav-elem">
|
||||
<button>
|
||||
<a
|
||||
class="a-text nav-item"
|
||||
href="https://github.com/sarmadhamdani02/webGames"
|
||||
target="_blank"
|
||||
>contribute </a
|
||||
>
|
||||
<a href="https://github.com/sarmadhamdani02/webGames" target="_blank"
|
||||
><i class="fa-brands fa-github nav-item"></i
|
||||
></a>
|
||||
</button>
|
||||
|
||||
<button>
|
||||
<a
|
||||
class="a-text nav-item"
|
||||
href="https://github.com/sarmadhamdani02/webGames#readme"
|
||||
target="_blank"
|
||||
>About </a
|
||||
>
|
||||
<a
|
||||
href="https://github.com/sarmadhamdani02/webGames#readme"
|
||||
target="_blank"
|
||||
><i class="fa-solid fa-circle-info nav-item"></i
|
||||
></a>
|
||||
</button>
|
||||
|
||||
<button onclick="onToggleDarkMode()">
|
||||
<p class="nav-item">Dark Mode<i id="dark-mode-icon" class="fa-solid fa-moon"></i></p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="side-bar-menu" id="side-bar-menu">
|
||||
<div class="side-bar-link">
|
||||
<a
|
||||
class="nav-item"
|
||||
href="https://github.com/sarmadhamdani02/webGames"
|
||||
target="_blank"
|
||||
>Contribute <i class="fa-brands fa-github nav-item"></i>
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="nav-item"
|
||||
href="https://github.com/sarmadhamdani02/webGames#readme"
|
||||
target="_blank"
|
||||
>About <i class="fa-solid fa-circle-info nav-item"></i>
|
||||
</a>
|
||||
|
||||
<button id="dark-mode-sidebar" onclick="onToggleDarkMode()">
|
||||
<p class="nav-item">Dark Mode<i id="sidebar-dark-mode-icon" class="fa-solid fa-moon"></i></p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="side-bar-button" id="toggleSideBar" onclick="toggleSideBar()">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- data is coming from JavaScript (script.js) -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
:root {
|
||||
--game-icon-hover-color: #dedede;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
padding: 0 4vw;
|
||||
font-family: "Press Start 2P", cursive;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
background-color: rgb(0, 144, 144);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-bar .logo {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem {
|
||||
margin-left: 45vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem button {
|
||||
background-color: transparent;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.101);
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem button a, p{
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.side-bar-menu {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.side-bar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side-bar-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.side-bar-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#dark-mode-sidebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-family: "Press Start 2P", cursive;
|
||||
}
|
||||
|
||||
#dark-mode-sidebar p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fa-sun, .fa-moon{
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: start;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding: 30px;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.main-content .game {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
width: 12vw;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-content .game:hover {
|
||||
background-color: var(--game-icon-hover-color);
|
||||
border-color: #444444;
|
||||
}
|
||||
|
||||
.main-content .game:hover img {
|
||||
/* rotate: 3deg; */
|
||||
scale: 1.1;
|
||||
outline: 1.5px solid #009090;
|
||||
}
|
||||
.main-content, .nav-bar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game img {
|
||||
background-size: cover;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: 200ms;
|
||||
border: 1px solid #00909067;
|
||||
}
|
||||
|
||||
.game img:hover {
|
||||
/* transform: scale(1.1); */
|
||||
rotate: 8deg;
|
||||
}
|
||||
|
||||
.game h3 {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.game h3:hover {
|
||||
text-decoration: underline;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 700px) {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
height: 75px;
|
||||
gap: 0px;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-bar h1 {
|
||||
font-size: 5vw;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-bar button {
|
||||
font-size: 4vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-bar button .a-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.main-content .game {
|
||||
width: 28vw;
|
||||
}
|
||||
|
||||
.game img {
|
||||
height: 25vw;
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
.side-bar-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgb(0, 144, 72);
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
padding-top: 15vh;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
box-shadow: 0.5px 0 20px rgba(0, 0, 0, 0.541);
|
||||
}
|
||||
|
||||
.side-bar-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
.side-bar-button {
|
||||
background-color: #009090;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-bar-button i {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 701px) and (max-width: 1050px) {
|
||||
.nav-bar {
|
||||
padding: 0 2vw;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.nav-bar .nav-elem {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
|
||||
.nav-bar button {
|
||||
font-size: 18px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* add media query for andriod device */
|
||||
/* @media all and (max-width: 700px) {
|
||||
.nav-bar {
|
||||
width: 100%;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
const mainContent = document.querySelector(".main-content");
|
||||
const navBar = document.querySelector(".nav-bar");
|
||||
const gameText = document.getElementsByClassName("game-text");
|
||||
const navItem = document.getElementsByClassName("nav-item");
|
||||
const gameIcon = document.getElementsByClassName("game");
|
||||
const sideBar = document.getElementById("side-bar-menu");
|
||||
const darkModeIcon = document.getElementById("dark-mode-icon");
|
||||
const sidebarDarkModeIcon = document.getElementById("sidebar-dark-mode-icon");
|
||||
|
||||
const onToggleDarkMode = () => {
|
||||
if (darkModeIcon.classList.contains("fa-moon")) {
|
||||
mainContent.style.backgroundColor = "#15202B";
|
||||
sideBar.style.backgroundColor = "rgb(1, 125, 63)";
|
||||
for (let i = 0; i < gameText.length; i++) {
|
||||
gameText[i].style.color = "#E4E6EB";
|
||||
}
|
||||
for (let i = 0; i < gameIcon.length; i++) {
|
||||
gameIcon[i].style.setProperty("--game-icon-hover-color", "#22303C");
|
||||
}
|
||||
|
||||
navBar.style.backgroundColor = "#03DAC5";
|
||||
navBar.style.color = "#212628";
|
||||
for (let i = 0; i < navItem.length; i++) {
|
||||
navItem[i].style.color = "#212628";
|
||||
}
|
||||
darkModeIcon.className = "fa-solid fa-sun";
|
||||
sidebarDarkModeIcon.className = "fa-solid fa-sun";
|
||||
} else {
|
||||
mainContent.style.backgroundColor = "white";
|
||||
sideBar.style.backgroundColor = "rgb(0, 144, 72)";
|
||||
for (let i = 0; i < gameText.length; i++) {
|
||||
gameText[i].style.color = "#333333";
|
||||
}
|
||||
for (let i = 0; i < gameIcon.length; i++) {
|
||||
gameIcon[i].style.setProperty("--game-icon-hover-color", "#dedede");
|
||||
}
|
||||
|
||||
navBar.style.backgroundColor = "#009090";
|
||||
navBar.style.color = "white";
|
||||
for (let i = 0; i < navItem.length; i++) {
|
||||
navItem[i].style.color = "white";
|
||||
}
|
||||
darkModeIcon.className = "fa-solid fa-moon";
|
||||
sidebarDarkModeIcon.className = "fa-solid fa-moon";
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSideBar = () => {
|
||||
const currentWidth = sideBar.style.width;
|
||||
if (currentWidth === "73vw") {
|
||||
sideBar.style.width = "0";
|
||||
mainContent.style.filter = "brightness(1)";
|
||||
} else {
|
||||
sideBar.style.width = "73vw";
|
||||
mainContent.style.filter = "brightness(50%)";
|
||||
}
|
||||
};
|
||||
|
||||
// Rendering the main content dynamically
|
||||
const mainContentData = [
|
||||
{
|
||||
name: "Tic-Tac-Toe",
|
||||
image: "assets/tic-tac-toe.png",
|
||||
link: "tic-tac-toe/index.html",
|
||||
},
|
||||
{
|
||||
name: "The Bubble Game",
|
||||
image: "assets/the_bubble_game.png",
|
||||
link: "BubbleGame/index.html",
|
||||
},
|
||||
{
|
||||
name: "Dev Quiz",
|
||||
image: "assets/dev_quiz.png",
|
||||
link: "DevQuiz/index.html",
|
||||
},
|
||||
{
|
||||
name: "HangMan",
|
||||
image: "assets/hangman.png",
|
||||
link: "https://hangmangame02.netlify.app/",
|
||||
},
|
||||
{
|
||||
name: "Tic-Tac-Toe",
|
||||
image: "assets/tic-tac-toe.png",
|
||||
link: "https://fun-miles-4jub.onrender.com/test",
|
||||
},
|
||||
];
|
||||
|
||||
mainContentData.forEach(item => {
|
||||
let newDiv = `
|
||||
<a href=${item.link} class="game game1" target="_blank">
|
||||
<img src=${item.image} alt="" />
|
||||
<h3 class="game-text">${item.name}</h3>
|
||||
</a>
|
||||
`;
|
||||
|
||||
mainContent.innerHTML += newDiv;
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/assets/tic-tac-toe.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- google fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Play:wght@700&family=Press+Start+2P&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script defer src="script.js"></script>
|
||||
<title>O Tic Tac Toe X</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="title-screen">
|
||||
<div class="title">
|
||||
<h1><span class="ox">O </span>Tic Tac Toe<span class="ox"> X</span></h1>
|
||||
<h3>Multiplayer</h3>
|
||||
</div>
|
||||
|
||||
<div class="btn-div">
|
||||
<button class="video-game-button">Start Game</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-screen">
|
||||
<h1 id="win-msg"><span class="winner-name"></span> is the <span class="winner">winner</span>!!</h1>
|
||||
<h1 id="draw-msg" style="color:yellow;" hidden>Game Drawn</h1>
|
||||
<button class="video-game-button-end">Restart</button>
|
||||
</div>
|
||||
<div class="main">
|
||||
<h1><span class="player">X</span>'s Turn</h1>
|
||||
<div class="game-container">
|
||||
<div class="game-panel game-panel-1"></div>
|
||||
<div class="game-panel game-panel-2"></div>
|
||||
<div class="game-panel game-panel-3"></div>
|
||||
<div class="game-panel game-panel-4"></div>
|
||||
<div class="game-panel game-panel-5"></div>
|
||||
<div class="game-panel game-panel-6"></div>
|
||||
<div class="game-panel game-panel-7"></div>
|
||||
<div class="game-panel game-panel-8"></div>
|
||||
<div class="game-panel game-panel-9"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,734 @@
|
||||
var count = 0;
|
||||
var turn = 0;
|
||||
var fill = 0;
|
||||
var firstTurn = true;
|
||||
var winnerName = document.querySelector(".winner-name");
|
||||
var startBtn = document.querySelector(".btn-div button");
|
||||
var restartBtn = document.querySelector(".win-screen .video-game-button-end");
|
||||
var titleScreen = document.querySelector(".title-screen");
|
||||
var gamePanel = document.querySelector(".game-panel");
|
||||
var turnHead = document.querySelector(".main h1");
|
||||
var turnName = document.querySelector(".main h1 .player");
|
||||
var winScreen = document.querySelector(".win-screen");
|
||||
var panel = document.getElementsByClassName("game-panel");
|
||||
|
||||
var tl = gsap.timeline();
|
||||
|
||||
gsap.from(".title-screen .title, .win-screen h1", {
|
||||
y: 6,
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
ease: "power1",
|
||||
});
|
||||
|
||||
gsap.from(".player", {
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
duration: 2,
|
||||
ease: "linear",
|
||||
});
|
||||
|
||||
startBtn.addEventListener("click", function () {
|
||||
turnHead.style.display = "flex";
|
||||
turnName.innerHTML = "O";
|
||||
randomTheme();
|
||||
|
||||
tl.to(".title-screen", {
|
||||
x: -300,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
tl.to("titleScreen", {
|
||||
display: "none",
|
||||
});
|
||||
|
||||
gsap.to(".win-screen", {
|
||||
y: "-100vh",
|
||||
})
|
||||
});
|
||||
|
||||
panel[0].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[0].innerHTML = "O";
|
||||
panel[0].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[0].innerHTML = "O";
|
||||
panel[0].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[0].innerHTML = "X";
|
||||
panel[0].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[1].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[1].innerHTML = "O";
|
||||
panel[1].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[1].innerHTML = "O";
|
||||
panel[1].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[1].innerHTML = "X";
|
||||
panel[1].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[2].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[2].innerHTML = "O";
|
||||
panel[2].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[2].innerHTML = "O";
|
||||
panel[2].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[2].innerHTML = "X";
|
||||
panel[2].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[3].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[3].innerHTML = "O";
|
||||
panel[3].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[3].innerHTML = "O";
|
||||
panel[3].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[3].innerHTML = "X";
|
||||
panel[3].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[4].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[4].innerHTML = "O";
|
||||
panel[4].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[4].innerHTML = "O";
|
||||
panel[4].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[4].innerHTML = "X";
|
||||
panel[4].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[5].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[5].innerHTML = "O";
|
||||
panel[5].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[5].innerHTML = "O";
|
||||
panel[5].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[5].innerHTML = "X";
|
||||
panel[5].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[6].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[6].innerHTML = "O";
|
||||
panel[6].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[6].innerHTML = "O";
|
||||
panel[6].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[6].innerHTML = "X";
|
||||
panel[6].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[7].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[7].innerHTML = "O";
|
||||
panel[7].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[7].innerHTML = "O";
|
||||
panel[7].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[7].innerHTML = "X";
|
||||
panel[7].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
panel[8].addEventListener("click", () => {
|
||||
if (turn % 2 == 0) {
|
||||
if (firstTurn) {
|
||||
panel[8].innerHTML = "O";
|
||||
panel[8].style.pointerEvents = "none";
|
||||
firstTurn = false;
|
||||
} else {
|
||||
panel[8].innerHTML = "O";
|
||||
panel[8].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "O";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
}
|
||||
turnName.innerHTML = "X";
|
||||
} else {
|
||||
panel[8].innerHTML = "X";
|
||||
panel[8].style.pointerEvents = "none";
|
||||
|
||||
if (!check()) {
|
||||
winnerName.innerHTML = "X";
|
||||
winScreen.style.display = "flex";
|
||||
gsap.to(".win-screen", {
|
||||
y: "0",
|
||||
});
|
||||
}
|
||||
|
||||
turnName.innerHTML = "O";
|
||||
}
|
||||
turn++;
|
||||
count++;
|
||||
});
|
||||
|
||||
restartBtn.addEventListener("click", () => {
|
||||
gsap.to(".win-screen", {
|
||||
y: "-100vh",
|
||||
});
|
||||
|
||||
for (let i = 0; i < panel.length; i++) {
|
||||
panel[i].innerText = "";
|
||||
panel[i].style.pointerEvents = "all";
|
||||
firstTurn = true;
|
||||
count = 0;
|
||||
turn = 0;
|
||||
fill = 0;
|
||||
}
|
||||
turnName.innerText = "O";
|
||||
});
|
||||
|
||||
function check() {
|
||||
if (
|
||||
(panel[0].innerText != "" &&
|
||||
panel[1].innerText != "" &&
|
||||
panel[2].innerText != "" &&
|
||||
panel[0].innerText == panel[1].innerText &&
|
||||
panel[1].innerText == panel[2].innerText) ||
|
||||
(panel[3].innerText != "" &&
|
||||
panel[4].innerText != "" &&
|
||||
panel[5].innerText != "" &&
|
||||
panel[3].innerText == panel[4].innerText &&
|
||||
panel[4].innerText == panel[5].innerText) ||
|
||||
(panel[6].innerText != "" &&
|
||||
panel[7].innerText != "" &&
|
||||
panel[8].innerText != "" &&
|
||||
panel[6].innerText == panel[7].innerText &&
|
||||
panel[7].innerText == panel[8].innerText) ||
|
||||
(panel[0].innerText != "" &&
|
||||
panel[3].innerText != "" &&
|
||||
panel[6].innerText != "" &&
|
||||
panel[0].innerText == panel[3].innerText &&
|
||||
panel[3].innerText == panel[6].innerText) ||
|
||||
(panel[1].innerText != "" &&
|
||||
panel[4].innerText != "" &&
|
||||
panel[7].innerText != "" &&
|
||||
panel[1].innerText == panel[4].innerText &&
|
||||
panel[4].innerText == panel[7].innerText) ||
|
||||
(panel[2].innerText != "" &&
|
||||
panel[5].innerText != "" &&
|
||||
panel[8].innerText != "" &&
|
||||
panel[2].innerText == panel[5].innerText &&
|
||||
panel[5].innerText == panel[8].innerText) ||
|
||||
(panel[0].innerText != "" &&
|
||||
panel[4].innerText != "" &&
|
||||
panel[8].innerText != "" &&
|
||||
panel[0].innerText == panel[4].innerText &&
|
||||
panel[4].innerText == panel[8].innerText) ||
|
||||
(panel[2].innerText != "" &&
|
||||
panel[4].innerText != "" &&
|
||||
panel[6].innerText != "" &&
|
||||
panel[2].innerText == panel[4].innerText &&
|
||||
panel[4].innerText == panel[6].innerText)
|
||||
) {
|
||||
|
||||
document.getElementById("win-msg").style.display = "block";
|
||||
document.getElementById("draw-msg").style.display = "none";
|
||||
if (window.matchMedia("(max-width: 600px)").matches) {
|
||||
document.getElementById("win-msg").style.display = "flex";
|
||||
}
|
||||
|
||||
return false;
|
||||
} else if (count == 8) {
|
||||
winScreen.style.display = "flex";
|
||||
document.getElementById("draw-msg").style.display = "block";
|
||||
document.getElementById("win-msg").style.display = "none";
|
||||
if (window.matchMedia("(max-width: 600px)").matches) {
|
||||
document.getElementById("draw-msg").style.display = "flex";
|
||||
}
|
||||
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function randomTheme() {
|
||||
// random image picks a theme for the better user experience.
|
||||
let randomBackgroundImage = [
|
||||
"./backgrounds/cave.jpg",
|
||||
"./backgrounds/city.jpg",
|
||||
"./backgrounds/cliffside.jpg",
|
||||
"./backgrounds/cloudy-night.jpg",
|
||||
"./backgrounds/forest.jpg",
|
||||
"./backgrounds/outdoor.jpg",
|
||||
"./backgrounds/planets.jpg",
|
||||
"./backgrounds/Space-background.png",
|
||||
"./backgrounds/sunset.jpg",
|
||||
"./backgrounds/tree.jpg"
|
||||
|
||||
]
|
||||
|
||||
// random number to get the random theme as desired
|
||||
let randomNumber = Math.floor(Math.random() * 10);
|
||||
|
||||
// target the main container
|
||||
let targetMain = document.querySelector(".main");
|
||||
|
||||
//set the random background image
|
||||
targetMain.style.backgroundImage = `url(${randomBackgroundImage[randomNumber]})`;
|
||||
//method for the entire layout of the game according to the main background color
|
||||
layoutColor(randomNumber);
|
||||
}
|
||||
|
||||
// first targeting all the necessary points.
|
||||
let targetGameContainer = document.querySelector(".game-container");
|
||||
let targetGamePanel = Array.from(document.querySelectorAll(".game-panel"));
|
||||
|
||||
// layoutColor sets the layout color in the synchronous format to make the theme color ideal
|
||||
function layoutColor(randomNumber) {
|
||||
if (randomNumber === 0) {
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(133,162,194,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(133,162,194, 0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
} else if (randomNumber === 1) {
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(255,189,163,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(255,189,163,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
} else if (randomNumber === 2) {
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(110,166,191,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(110,166,191,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 3){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(6,18,52,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(6,18,52,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 4){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(251,196,106,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(251,196,106,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 5){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(37,107,203,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(37,107,203,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 6){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(71,56,113,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(71,56,113,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 8){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(0,0,0,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(0,0,0,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 8){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(179,24,126,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(179,24,126,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}else if(randomNumber === 9){
|
||||
// targeting the game container tag.
|
||||
targetGameContainer.style.backgroundColor = "rgba(40,55,76,0.2)";
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.style.borderColor = "white";
|
||||
});
|
||||
// targeting the individual box for hover
|
||||
targetGamePanel.forEach((elem) => {
|
||||
elem.addEventListener("mouseover", function () {
|
||||
elem.style.backgroundColor = "rgba(40,55,76,0.8)";
|
||||
});
|
||||
|
||||
elem.addEventListener("mouseleave", function () {
|
||||
elem.style.backgroundColor = "";
|
||||
});
|
||||
});
|
||||
|
||||
targetGamePanel.forEach(function (elem) {
|
||||
elem.addEventListener("click", () => {
|
||||
elem.style.webkitTextStrokeColor = "white";
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// targeting the restart-button.
|
||||
restartBtn.addEventListener("click", randomTheme);
|
||||
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family: sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
background-size: cover;
|
||||
}
|
||||
.win-screen{
|
||||
color: white;
|
||||
backdrop-filter: blur(3px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(225, 65, 190, 0.300);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
|
||||
.win-screen h1{
|
||||
font-size: 3vw;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
.win-screen h1 .winner-name{
|
||||
-webkit-text-stroke: 2px white;
|
||||
color: transparent;
|
||||
font-size: 5vw;
|
||||
font-family: 'Play', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.win-screen h1 .winner{
|
||||
color: #00c7c7;
|
||||
-webkit-text-stroke: 0.8px black;
|
||||
}
|
||||
|
||||
|
||||
.win-screen .btn{
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
.title-screen{
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: rgba(0, 0, 0, 0.37);
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.title-screen .title{
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
user-select: none;
|
||||
line-height: 45px;
|
||||
margin-top: 20px;
|
||||
align-self: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2vh;
|
||||
}
|
||||
|
||||
.title-screen .title h1{
|
||||
text-transform: lowercase;
|
||||
color: white;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
|
||||
}
|
||||
|
||||
.title-screen .title h1 span{
|
||||
color: yellow;
|
||||
font-size: 5vw;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
|
||||
}
|
||||
|
||||
.title-screen .title h3{
|
||||
font-weight: 800;
|
||||
font-size: 2.3vw;
|
||||
color: yellow;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-div{
|
||||
margin-top: 48vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.video-game-button {
|
||||
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #382b22;
|
||||
padding: .75em .5em;
|
||||
background: #9de4f5; /* Cyan-blue color */
|
||||
border: 2px solid #69a3b2; /* Cyan-blue color */
|
||||
border-radius: 0.75em;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #c8f7ff; /* Lighter cyan-blue color */
|
||||
border-radius: inherit;
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0.625em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0.625em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
-webkit-transform: translate3d(0, 0.75em, -1em);
|
||||
transform: translate3d(0, 0.75em, -1em);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button:hover {
|
||||
background: #b8e7f0; /* Lighter cyan-blue color on hover */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.video-game-button::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0.5em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0.5em 0 0 #333333; /* Darker color */
|
||||
-webkit-transform: translate3d(0, 0.5em, -1em);
|
||||
transform: translate3d(0, 0.5em, -1em);
|
||||
}
|
||||
|
||||
.video-game-button:active {
|
||||
background: #b8e7f0; /* Lighter cyan-blue color on active */
|
||||
-webkit-transform: translate(0em, 0.75em);
|
||||
transform: translate(0em, 0.75em);
|
||||
}
|
||||
|
||||
.video-game-button:active::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
-webkit-transform: translate3d(0, 0, -1em);
|
||||
transform: translate3d(0, 0, -1em);
|
||||
}
|
||||
|
||||
.video-game-button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* For the restart button */
|
||||
.video-game-button-end {
|
||||
width: 215px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #382b22;
|
||||
padding: .75em .5em;
|
||||
background: #9de4f5; /* Cyan-blue color */
|
||||
border: 2px solid #69a3b2; /* Cyan-blue color */
|
||||
border-radius: 0.75em;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
-webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button-end::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #c8f7ff; /* Lighter cyan-blue color */
|
||||
border-radius: inherit;
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0.625em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0.625em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
-webkit-transform: translate3d(0, 0.75em, -1em);
|
||||
transform: translate3d(0, 0.75em, -1em);
|
||||
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
|
||||
.video-game-button-end:hover {
|
||||
background: #b8e7f0; /* Lighter cyan-blue color on hover */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.video-game-button-end::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0.5em 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0.5em 0 0 #333333; /* Darker color */
|
||||
-webkit-transform: translate3d(0, 0.5em, -1em);
|
||||
transform: translate3d(0, 0.5em, -1em);
|
||||
}
|
||||
|
||||
.video-game-button-end:active {
|
||||
background: #b8e7f0; /* Lighter cyan-blue color on active */
|
||||
-webkit-transform: translate(0em, 0.75em);
|
||||
transform: translate(0em, 0.75em);
|
||||
}
|
||||
|
||||
.video-game-button-end:active::before {
|
||||
-webkit-box-shadow: 0 0 0 2px #69a3b2, 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
box-shadow: 0 0 0 2px #69a3b2, 0 0 #c9f1ff; /* Cyan-blue color */
|
||||
-webkit-transform: translate3d(0, 0, -1em);
|
||||
transform: translate3d(0, 0, -1em);
|
||||
}
|
||||
|
||||
.video-game-button-end:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
.main{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgb(95, 135, 255);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main h1{
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
/* display: none; */
|
||||
position: absolute;
|
||||
align-self: start;
|
||||
color: white;
|
||||
font-size: 3vw;
|
||||
user-select: none;
|
||||
font-family: 'Play', sans-serif;
|
||||
}
|
||||
|
||||
.main h1 .player{
|
||||
font-family: 'Play', sans-serif;
|
||||
-webkit-text-stroke: 2px white;
|
||||
color: transparent;
|
||||
font-size: 4.5vw;
|
||||
|
||||
}
|
||||
|
||||
.main .player{
|
||||
color: yellow;
|
||||
|
||||
}
|
||||
|
||||
.game-container{
|
||||
background-color: rgb(65, 105, 225);
|
||||
backdrop-filter: blur(5px);
|
||||
border: 2px solid rgb(208, 219, 255);
|
||||
border-radius: 30px;
|
||||
height: 70vh;
|
||||
width: 35vw;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-panel{
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
height: 23.33vh;
|
||||
width: 11.55vw;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
font-weight: 999;
|
||||
font-size: 7vw;
|
||||
-webkit-text-stroke: 2px white;
|
||||
}
|
||||
|
||||
.game-panel:hover{
|
||||
background-color: rgb(28, 78, 228);
|
||||
|
||||
}
|
||||
|
||||
.game-panel:active{
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
|
||||
|
||||
.title-screen .title{
|
||||
margin-top: 15vh;
|
||||
font-size: 3.3vw;
|
||||
}
|
||||
|
||||
.title-screen .title h3{
|
||||
font-size: 7vw;
|
||||
}
|
||||
|
||||
.title-screen .btn-div{
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.game-container{
|
||||
height: 50vh;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.game-panel{
|
||||
font-size: 20vw;
|
||||
height: 16.66vh;
|
||||
width: 26.66vw;
|
||||
}
|
||||
|
||||
.main h1{
|
||||
font-size: 10vw;
|
||||
}
|
||||
|
||||
.main h1 .player{
|
||||
font-size: 15vw;
|
||||
}
|
||||
|
||||
.win-screen h1{
|
||||
font-size: 8vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.win-screen h1 .winner-name{
|
||||
font-size: 12vw;
|
||||
}
|
||||
|
||||
.win-screen h1 .winner{
|
||||
font-size: 8vw;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user