Skip to content

Commit

Permalink
Merge pull request #41 from kushaljgec2025/jwoc
Browse files Browse the repository at this point in the history 
#19 issue  resolved.
  • Loading branch information
@Rakesh9100
Rakesh9100 authored Feb 17, 2023
2 parents 905d6a1 + 24fa116 commit af1df33
Show file tree
Hide file tree
Showing 3 changed files with 310 additions and 205 deletions.
298 changes: 170 additions & 128 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome -->
<link rel="icon" type="image/x-png" href="images/favicon.png" />
<script
src="https://kit.fontawesome.com/5587893eae.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Let's Play the Game !!!</title>
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome -->
<link rel="icon" type="image/x-png" href="images/favicon.png">
<script src="https://kit.fontawesome.com/5587893eae.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Let's Play the Game !!!</title>
</head>

<body>
<div class="screen">
<i id="home-icon" onclick="reset()" class="fa fa-home" aria-hidden="true"></i>
<img src="images/pause-button.svg" alt="Pause Button" id="pause-button" onclick="pauseGame()" aria-hidden="true">
<h2>Play with your Favorite Edible🎮</h2>
<button class="btn" id="start-btn">
Play Game!
<span></span><span></span><span></span><span></span>
</button>
</div>

<div class="screen">
<h1>Choose your favorite Fruit</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Apple</p>
<img src="images/apple.png" alt="Apple">
</button>
</li>
<li>
<button class="choose-btn">
<p>Banana</p>
<img src="images/banana.png" alt="Banana" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Guava</p>
<img src="images/guava.png" alt="Guava" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Mango</p>
<img src="images/mango.png" alt="Mango" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Watermelon</p>
<img src="images/watermelon.png" alt="Watermelon" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Orange</p>
<img src="images/orange.png" alt="Orange">
</button>
</li>
<li>
<button class="choose-btn">
<p>Grapes</p>
<img src="images/grapes.png" alt="Grapes">
</button>
</li>
</ul>
<body>
<div class="container">
<i
class="fa-solid fa-moon"
id="light-icon"
aria-hidden="true"
onclick="change()"
></i>
<!-- //done by kushaljgec2530 -->
<i
id="home-icon"
onclick="reset()"
class="fa fa-home"
aria-hidden="true"
></i>
</div>
<div class="screen">
<img
src="images/pause-button.svg"
alt="Pause Button"
id="pause-button"
onclick="pauseGame()"
aria-hidden="true"
/>
<h2>Play with your Favorite Edible🎮</h2>
<button class="btn" id="start-btn">
Play Game!
<span></span><span></span><span></span><span></span>
</button>
</div>

<h1>OR</h1>
<h1>Choose your favorite Vegetable to continue..</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Broccoli</p>
<img src="images/broccoli.png" alt="Broccoli">
</button>
</li>
<li>
<button class="choose-btn">
<p>Cabbage</p>
<img src="images/cabbage.png" alt="Cabbage" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Carrot</p>
<img src="images/carrot.png" alt="Carrot" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Cauliflower</p>
<img src="images/cauliflower.png" alt="Cauliflower" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Tomato</p>
<img src="images/tomato.png" alt="Tomato" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Pumpkin</p>
<img src="images/pumpkin.png" alt="Pumpkin" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Potato</p>
<img src="images/potato.png" alt="Potato" />
</button>
</li>
</ul>
</div>
<div class="screen">
<div class="screen-page">
<div></div>
<h1>Choose your favorite Fruit</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Apple</p>
<img src="images/apple.png" alt="Apple" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Banana</p>
<img src="images/banana.png" alt="Banana" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Guava</p>
<img src="images/guava.png" alt="Guava" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Mango</p>
<img src="images/mango.png" alt="Mango" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Watermelon</p>
<img src="images/watermelon.png" alt="Watermelon" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Orange</p>
<img src="images/orange.png" alt="Orange" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Grapes</p>
<img src="images/grapes.png" alt="Grapes" />
</button>
</li>
</ul>

<div id="pause-menu">
<p>PAUSED</p>
<div class="options">
<img src="images/play-button.svg" alt="Resume Playing" class="play-button" onclick="pauseGame()">
<img src="images/restart-button.svg" alt="Restart Game" class="restart-button" onclick="restartGame()">
<img src="images/home-button.svg" alt="Home" class="home-button" onclick="reset()">
<h1>OR</h1>
<h1>Choose your favorite Vegetable to continue..</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Broccoli</p>
<img src="images/broccoli.png" alt="Broccoli" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Cabbage</p>
<img src="images/cabbage.png" alt="Cabbage" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Carrot</p>
<img src="images/carrot.png" alt="Carrot" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Cauliflower</p>
<img src="images/cauliflower.png" alt="Cauliflower" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Tomato</p>
<img src="images/tomato.png" alt="Tomato" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Pumpkin</p>
<img src="images/pumpkin.png" alt="Pumpkin" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Potato</p>
<img src="images/potato.png" alt="Potato" />
</button>
</li>
</ul>
</div>
</div>
</div>

<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
</div>
<div id="pause-menu">
<p>PAUSED</p>
<div class="options">
<img
src="images/play-button.svg"
alt="Resume Playing"
class="play-button"
onclick="pauseGame()"
/>
<img
src="images/restart-button.svg"
alt="Restart Game"
class="restart-button"
onclick="restartGame()"
/>
<img
src="images/home-button.svg"
alt="Home"
class="home-button"
onclick="reset()"
/>
</div>
</div>

<script src="script.js"></script>
</body>
<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
</div>

<script src="script.js"></script>
</body>
</html>
33 changes: 23 additions & 10 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ let seconds = 0
let score = 0
let selected_edible = {}
var gameInterval;
var isRunning=-1; //this defines the state of game running or not
var isRunning = -1; //this defines the state of game running or not

start_btn.addEventListener('click', () => screens[0].classList.add('up'))

Expand Down Expand Up @@ -85,10 +85,10 @@ function increaseScore() {
// Page reload
function reset() {
// startGame();
window.close();
window.open("https://rakesh9100.github.io/Click-The-Edible-Game/");
location.reload();
// window.close();
// window.open("https://rakesh9100.github.io/Click-The-Edible-Game/");
}

function pauseGame() {
//if running then pause the timer
if (isRunning == 1) {
Expand All @@ -110,10 +110,10 @@ function pauseGame() {
}
}
// Pause game by space bar
document.body.addEventListener("keyup",(e)=>{
if(e.keyCode==32 || e.keyCode==0){
document.body.addEventListener("keyup", (e) => {
if (e.keyCode == 32 || e.keyCode == 0) {
//mozilla have "space" keycode 0 and other browsers 32
if(isRunning!=-1){
if (isRunning != -1) {
pauseGame()
}
}
Expand All @@ -136,9 +136,22 @@ function restartGame() {
startGame()
}

function removeEdibles(){
function removeEdibles() {
const createdEdibles = document.getElementsByClassName('edible');
while(createdEdibles.length > 0){
while (createdEdibles.length > 0) {
createdEdibles[0].parentNode.removeChild(createdEdibles[0]);
}
}
}
var icon = document.getElementById("light-icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
document.getElementById("light-icon").classList.remove("fa-moon");
document.getElementById("light-icon").classList.add("fa-sun");

}
else {
document.getElementById("light-icon").classList.remove("fa-sun");
document.getElementById("light-icon").classList.add("fa-moon");
}
};
Loading

0 comments on commit af1df33

Please sign in to comment.