Howdy, partner! How many hours of rootin' tootin' gameplay have you clocked up on this game?
2 mins 45 sec
-
+
+
+
+
+
Select Your Preferred Difficulty
+
Easy
+
Medium
+
Hard
+
+
Start 🎮
diff --git a/assets/main.js b/assets/main.js
index c61410c..aa3777b 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -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();
@@ -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 = `
${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}
`;
- 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 = `
${1 + Math.floor(Math.random() * MAX_BOMB_LIFE)}
`;
+ 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 = `
`;
- 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 = `
`;
+ 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 ----------------
@@ -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";
@@ -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");
@@ -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) {
@@ -376,6 +418,7 @@ function closeGameplayDialog() {
document.getElementById("gameplayTime").style.display = "none";
document.getElementById("time").style.display = "block";
gameInterval = setInterval(decreaseTime, 1000);
+
}
function startGame() {
@@ -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
@@ -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}`;
@@ -459,6 +505,7 @@ function gameOver() {
lives = MAX_LIVES;
totalBombs = 0;
// -------------- bomb management section ----------------
+
}
function starting() {
@@ -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;
@@ -483,6 +531,7 @@ function decreaseTime() {
// ---------- displaying total lives -------------
timeEl.innerHTML = `Time: ${m}:${s}
${_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
@@ -522,6 +571,7 @@ function createRottenEdible() {
}
function catchRottenEdible() {
+
if (isRunning == 1) {
decreaseScore();
this.classList.remove("rotten");
@@ -553,6 +603,7 @@ function checkRottenEdibleLife() {
}
function createEdible() {
+
if (isRunning == 1) {
const edible = document.createElement("div");
edible.classList.add("edible");
@@ -576,6 +627,7 @@ function getRandomLocation() {
}
function catchEdible() {
+
if (isRunning == 1) {
increaseScore();
this.classList.add("caught");
@@ -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 ----------------
@@ -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;
@@ -710,6 +766,7 @@ 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");
@@ -717,6 +774,7 @@ function displayChange() {
// 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) {
@@ -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() {
diff --git a/assets/style.scss b/assets/style.scss
new file mode 100644
index 0000000..907aebe
--- /dev/null
+++ b/assets/style.scss
@@ -0,0 +1,65 @@
+*,
+*:after,
+*:before {
+ box-sizing: border-box;
+}
+
+$primary-color: #00005c; // Change color here. C'mon, try it!
+$text-color: mix(#000, $primary-color, 64%);
+
+.form-mode {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+
+.label-mode {
+ display: flex;
+ cursor: pointer;
+ font-weight: 500;
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 0.375em;
+ /* Accessible outline */
+ /* Remove comment to use */
+ /*
+ &:focus-within {
+ outline: .125em solid $primary-color;
+ }
+ */
+}
+
+.input-mode {
+ &:checked+span {
+ background-color: mix(#fff, $primary-color, 84%);
+
+ &:before {
+ box-shadow: inset 0 0 0 0.4375em $primary-color;
+ }
+ }
+}
+
+.span-mode {
+ display: flex;
+ align-items: center;
+ padding: 0.375em 0.75em 0.375em 0.375em;
+ border-radius: 99em; // or something higher...
+ transition: 0.25s ease;
+
+ &:hover {
+ background-color: mix(#fff, $primary-color, 84%);
+ }
+
+ &:before {
+ display: flex;
+ flex-shrink: 0;
+ content: "";
+ background-color: #fff;
+ width: 1.5em;
+ height: 1.5em;
+ border-radius: 50%;
+ margin-right: 0.375em;
+ transition: 0.25s ease;
+ box-shadow: inset 0 0 0 0.125em $primary-color;
+ }
+}
\ No newline at end of file
`;
- 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 = `
`;
- 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 = `