Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difficulty Mode Added #249

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions assets/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -1329,7 +1329,7 @@ h1 {
}

#gameplayTime {
height: 54vh;
height: 80vh;
}

#gameplayTime div button {
Expand Down Expand Up @@ -1670,7 +1670,7 @@ h1 {
justify-content: center;
width: 50vw;
margin-bottom: 10rem;
height: 40vh;
margin-top: 15vh;
flex-direction: column;
justify-content: space-evenly;
transition: all 0.5s ease-in-out;
Expand Down
14 changes: 11 additions & 3 deletions assets/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<title>Let's Play the Game !!!</title>
</head>

<body oncontextmenu="return false;">

<body oncontextmenu="return false;">
<div id="preloader" class="loader">
<img src="./images/preloader.gif" alt="" />
</div>
Expand Down Expand Up @@ -511,8 +511,16 @@ <h3 id="score" class="score">Score: 0</h3>
<div id="gameplayTime" class="pqr">
<b>Howdy, partner! How many hours of rootin' tootin' gameplay have you clocked up on this game?</b>
<div id="time-range-val" class="changable-text">2 mins 45 sec</div>
<input type="range" max="300" min="30" id="time-range" style="width: 30vw;" onchange="set_time_range_val()"
onmousemove="set_time_range_val()" ontouchmove="set_time_range_val()">

<input type="range" max="300" min="30" id="time-range" style="width: 30vw;" onchange="set_time_range_val()" onmousemove="set_time_range_val()" ontouchmove="set_time_range_val()">
<br><br>
<!--Difficulty mode options added -->
<h2>Select Your Preferred Difficulty</h2>
<div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="easy" value="1"><label for="easy"> Easy</label></div>
<div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="medium" value="2"><label for="medium"> Medium</label></div>
<div style="display: flex; margin-bottom: 10px;"><input type="radio" name="mode" id="hard" value="3"><label for="hard"> Hard</label></div>
<br><br>

<div style="position: relative;">
<button id="start-btn-time" class="btn2" onclick="closeGameplayDialog()">Start 🎮</button>
</div>
Expand Down
175 changes: 117 additions & 58 deletions assets/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ var isRunning = -1; //this defines the state of game running or not

// Add an event listener to the window to handle autoplay restrictions
window.addEventListener('click', function () {

if (bgm1.paused && bgm2.paused) {
// Start playing the background music only if it's not already playing
bgm1.play();
Expand Down Expand Up @@ -128,76 +129,79 @@ setInterval(() => {

// -------------- bomb management section ----------------
var totalBombs = 0; // total number of bombs on screen at a time
var MAX_BOMBS = 7; // maximum number of bombs that can be on screen
var MAX_BOMB_LIFE = 5; // maximum life of a bomb
var MAX_LIVES = 3; // maximum number of lives
var lives = MAX_LIVES; // current number of lives

var MAX_BOMBS; // maximum number of bombs that can be on screen
var MAX_BOMB_LIFE; // maximum life of a bomb
var MAX_LIVES; // maximum number of lives
var lives; // current number of lives
var prob; //probublity of creating a bomb
var timegap_edible;
var timegap_rotten;
var prob_rotten;
// create a new bomb
function createBomb() {
const bomb = document.createElement('div');
bomb.classList.add('bomb');
bomb.classList.add('bomb-live');
const { x, y } = getRandomLocation();
bomb.style.top = `${y}px`;
bomb.style.left = `${x}px`;
bomb.innerHTML = `<img src="images/bomb.png" alt="💣" style="transform: rotate(${Math.random() * 360}deg)" /><p style="display: none">${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}</p>`;
bomb.addEventListener('click', explodeBomb);
game_container.appendChild(bomb);
const bomb = document.createElement('div');
bomb.classList.add('bomb');
bomb.classList.add('bomb-live');
const { x, y } = getRandomLocation();
bomb.style.top = `${y}px`;
bomb.style.left = `${x}px`;
bomb.innerHTML = `<img src="images/bomb.png" alt="💣" style="transform: rotate(${Math.random() * 360}deg)" /><p style="display: none">${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}</p>`;
bomb.addEventListener('click', explodeBomb);
game_container.appendChild(bomb);
}

// create multiple bombs
function createBombs() {
for (let i = 0; i < MAX_BOMBS; i++) {
createBomb();
totalBombs++;
}
for (let i = 0; i < MAX_BOMBS; i++) {
createBomb();
totalBombs++;
}
}

// explode an existing bomb
function explodeBomb() {
if (isRunning !== 1) return;
if (lives <= 0) return;
if (this.classList.contains('dead')) return;
this.innerHTML = `<img src="images/explosion.png" alt="💥" style="transform: rotate(${Math.random() * 360}deg)" />`;
this.classList.remove('bomb-live');
this.classList.add('dead');
setTimeout(() => {
this.remove();
totalBombs--;
}, 2000);
lives--;
if (click_bomb_audio.currentTime > 0) {
click_bomb_audio.pause();
click_bomb_audio.currentTime = 0;
}
click_bomb_audio.play();
if (isRunning !== 1) return;
if (lives <= 0) return;
if (this.classList.contains('dead')) return;
this.innerHTML = `<img src="images/explosion.png" alt="💥" style="transform: rotate(${Math.random() * 360}deg)" />`;
this.classList.remove('bomb-live');
this.classList.add('dead');
setTimeout(() => {
this.remove();
totalBombs--;
}, 2000);
lives--;
if (click_bomb_audio.currentTime > 0) {
click_bomb_audio.pause();
click_bomb_audio.currentTime = 0;
}
click_bomb_audio.play();
}

// check if a bomb's life is over
function checkBombLife() {
const bombs = document.getElementsByClassName('bomb-live');
for (let i = 0; i < bombs.length; i++) {
const bomb = bombs[i];
const life = bomb.querySelector('p');
if (life.innerText <= 0) {
bomb.classList.add('dead');
bomb.classList.remove('bomb-live');
setTimeout(() => {
bomb.remove();
totalBombs--;
}, 2000);
} else {
life.innerText--;
}
const bombs = document.getElementsByClassName('bomb-live');
for (let i = 0; i < bombs.length; i++) {
const bomb = bombs[i];
const life = bomb.querySelector('p');
if (life.innerText <= 0) {
bomb.classList.add('dead');
bomb.classList.remove('bomb-live');
setTimeout(() => {
bomb.remove();
totalBombs--;
}, 2000);
} else {
life.innerText--;
}
}
}

function removeBombs() {
const createdBombs = document.getElementsByClassName('bomb');
while (createdBombs.length > 0) {
createdBombs[0].parentNode.removeChild(createdBombs[0]);
}
const createdBombs = document.getElementsByClassName('bomb');
while (createdBombs.length > 0) {
createdBombs[0].parentNode.removeChild(createdBombs[0]);
}
}
// -------------- bomb management section ----------------

Expand Down Expand Up @@ -300,6 +304,7 @@ dropArea.addEventListener("drop", (event) => {
});

function uploadFile(file) {

const fileName = typeof file === "string" ? file : file.name;
let uploadArea = document.querySelector(".uploaded-area");
uploadArea.style.display = "block";
Expand Down Expand Up @@ -345,6 +350,7 @@ document.querySelector("#upload-btn").addEventListener("click", () => {
});

document.querySelectorAll(".choose-btn").forEach(button => {

button.addEventListener("click", () => {
const img = button.querySelector("img");
const src = img.getAttribute("src");
Expand All @@ -361,6 +367,42 @@ document.querySelectorAll(".choose-btn").forEach(button => {
// --------------- Uploading Image End ----------------

function chooseGameplayTime() {

document.getElementById("time").style.display = "none";
document.getElementById("gameplayTime").style.display = "flex";
document.getElementById("time-range").addEventListener("change", function (e) {
seconds = parseInt(document.getElementById("time-range").value) - 1;
return seconds;
});
}

function closeGameplayDialog() {

//Taking the value from difficulity options
var ele = document.getElementsByName('mode');
var val;
for (i = 0; i < ele.length; i++) {
if (ele[i].checked)
val = ele[i].value;
}

//changed the values accordingly
MAX_BOMBS = 7 * val; // maximum number of bombs that can be on screen
MAX_BOMB_LIFE = 5 * val; // maximum life of a bomb
MAX_LIVES = (3 - val) + 1; // maximum number of lives
prob = 0.3 * val; //probublity of creating a bomb
lives = MAX_LIVES; //max number of lives
timegap_edible = (1000 / val); //time between two edible
timegap_rotten = (1500 / val); //time gap betwen two rotten
prob_rotten = 0.3 * val; //probablity of rotten creating

isRunning = 1;
seconds = parseInt(document.getElementById("time-range").value) - 1;
setTimeout(createEdible, 1000);
document.getElementById("gameplayTime").style.display = "none";
document.getElementById("time").style.display = "block";
gameInterval = setInterval(decreaseTime, 1000);

document.getElementById("time").style.display = "none";
document.getElementById("gameplayTime").style.display = "flex";
document.getElementById("time-range").addEventListener("change", function (e) {
Expand All @@ -376,6 +418,7 @@ function closeGameplayDialog() {
document.getElementById("gameplayTime").style.display = "none";
document.getElementById("time").style.display = "block";
gameInterval = setInterval(decreaseTime, 1000);

}

function startGame() {
Expand Down Expand Up @@ -420,11 +463,13 @@ function showInstructions() {
}

function closeInstructions() {

document.getElementById("instructions").style.display = "none";
document.getElementById("instructions2").style.display = "none";
document.getElementById("instructions3").style.display = "none";
if (isRunning == 0)
isRunning = 1;

}

//Maximum in the array
Expand All @@ -433,6 +478,7 @@ Array.prototype.max = function () {
};

function gameOver() {

document.getElementById("gameOver-menu").style.display = "flex";
document.getElementById("pause-button").style.display = "none";
finalScore.innerHTML = `Final Score : ${score}`;
Expand All @@ -459,6 +505,7 @@ function gameOver() {
lives = MAX_LIVES;
totalBombs = 0;
// -------------- bomb management section ----------------

}

function starting() {
Expand All @@ -467,6 +514,7 @@ function starting() {

// function maintaining the game time (also acts as main loop for the game)
function decreaseTime() {

let m = Math.floor(seconds / 60);
let s = seconds % 60;
m = m < 10 ? `0${m}` : m;
Expand All @@ -483,6 +531,7 @@ function decreaseTime() {
// ---------- displaying total lives -------------
timeEl.innerHTML = `Time: ${m}:${s} <hr> ${_lives}`;


// -------------- bomb management section ----------------
if (totalBombs < MAX_BOMBS) { // check if there are already more than enough bombs present on screen
if (Math.random() < 0.5) { // randomly decide whether to create a bomb or not
Expand Down Expand Up @@ -522,6 +571,7 @@ function createRottenEdible() {
}

function catchRottenEdible() {

if (isRunning == 1) {
decreaseScore();
this.classList.remove("rotten");
Expand Down Expand Up @@ -553,6 +603,7 @@ function checkRottenEdibleLife() {
}

function createEdible() {

if (isRunning == 1) {
const edible = document.createElement("div");
edible.classList.add("edible");
Expand All @@ -576,6 +627,7 @@ function getRandomLocation() {
}

function catchEdible() {

if (isRunning == 1) {
increaseScore();
this.classList.add("caught");
Expand All @@ -586,16 +638,19 @@ function catchEdible() {
click_edible_audio.currentTime = 0;
}
click_edible_audio.play();

}
}

function addEdibles() {
setTimeout(createEdible, 1000);
// add rotten edibles also
if (Math.random() < 0.3)
setTimeout(createRottenEdible, 1500);
else
setTimeout(createEdible, 1500);

setTimeout(createEdible, timegap_edible);
// add rotten edibles also
if (Math.random() < prob_rotten)
setTimeout(createRottenEdible, timegap_rotten);
else
setTimeout(createEdible, timegap_rotten);

}

// -------------- edible management section ----------------
Expand Down Expand Up @@ -689,6 +744,7 @@ themeicon.onclick = function () {
};
var volumeicon = document.getElementById("volume-off-icon");
volumeicon.onclick = function () {

if (document.getElementById("volume-off-icon").classList.contains("fa-volume-up")) {
bgm1.volume = 0;
bgm2.volume = 0;
Expand All @@ -710,13 +766,15 @@ volumeicon.onclick = function () {
document.getElementById("volume-off-icon").classList.add("fa-volume-up");
document.getElementById("volume-off-icon").classList.remove("fa-volume-off");
}

};
function displayChange() {
foot.classList.toggle("toggle-footer");
}

// displaying the selected time on screen in real time.
function set_time_range_val() {

var time = document.getElementById("time-range").value;
time = parseInt(time);
if (time % 60 == 0) {
Expand All @@ -733,6 +791,7 @@ function set_time_range_val() {
let min = Math.floor(time / 60);
let sec = time % 60;
document.getElementById("time-range-val").innerHTML = min + " min " + sec + " secs";

}
}
function scrollToTop() {
Expand Down
Loading