Merge pull request #2357 from ankit071105/my-feature

New: Hit Bugs with Sound Effects, Music and add timer !
Sulagna-Dutta-Roy · Jul 14, 2024 · 047ca3c · 047ca3c
2 parents f05448b + 05cde77
commit 047ca3c
Show file tree

Hide file tree

Showing 16 changed files with 344 additions and 0 deletions.
diff --git a/BugEliminator/app.html b/BugEliminator/app.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <title>Bug Eliminator</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="estilo.css" />
+    <script src="jogo.js"></script>
+    <link rel="shortcut icon" href="https://ideogram.ai/assets/progressive-image/balanced/response/jQ-h8xq5SmmquBgHkziFkQ" type="image/x-icon">
+</head>
+
+<body onresize="ajustaTamanhoPalcoJogo()">
+    <div class="painel">
+        <div class="vidas">
+            <img id="v1" src="img/coracao_cheio.png" />
+            <img id="v2" src="img/coracao_cheio.png" />
+            <img id="v3" src="img/coracao_cheio.png" />
+
+        </div>
+
+        <div class="cronometro">Start: <span id="cronometro"></span></div>
+
+    </div>
+
+    <script>
+        document.getElementById('cronometro').innerHTML = tempo
+
+        let criaMosquito = setInterval(function() {
+            posicaoRandomica()
+
+        }, criaMosquitoTempo)
+    </script>
+
+</body>
+
+</html>
diff --git a/BugEliminator/background_music.mp3 b/BugEliminator/background_music.mp3
diff --git a/BugEliminator/estilo.css b/BugEliminator/estilo.css
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+
+
+html {
+    cursor: url('img/mata_mosquito.png') 30 30, auto;
+}
+
+body {
+    background-image: url('img/bg.jpg');
+    background-size: cover;
+  height: auto;
+}
+
+
+
+
+.mosquito1 {
+    width: 50px;
+    height: 50px;
+}
+
+.mosquito2 {
+    width: 70px;
+    height: 70px;
+}
+
+.mosquito3 {
+    width: 90px;
+    height: 90px;
+}
+
+
+
+
+.ladoA {
+    transform: scaleX(1);
+}
+
+.ladoB {
+    transform: scaleX(-1);
+}
+
+
+
+
+.painel {
+    position: absolute;
+    width: 190px;
+    padding: 10px;
+    left: 0px;
+    bottom: 0px;
+    border-top: solid 1px white;
+    background-color: white;
+    opacity: 0.7;
+}
+
+.vidas {
+    float: left;
+}
+
+.cronometro {
+    float: left;
+    font-size: 20px;
+    font-weight: bold;
+}
diff --git a/BugEliminator/fim_de_jogo.html b/BugEliminator/fim_de_jogo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <title>Bug Eliminator</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="estilo.css" />
+    <link rel="shortcut icon" href="https://ideogram.ai/assets/progressive-image/balanced/response/jQ-h8xq5SmmquBgHkziFkQ" type="image/x-icon">
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <img src="img/game_over.png" />
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <button type="button" class="btn btn-dark btn-lg" onclick="window.location.href = 'index.html' ">Replay</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/BugEliminator/game-over.mp3 b/BugEliminator/game-over.mp3
diff --git a/BugEliminator/icon.png b/BugEliminator/icon.png
diff --git a/BugEliminator/img/bg.jpg b/BugEliminator/img/bg.jpg
diff --git a/BugEliminator/img/coracao_cheio.png b/BugEliminator/img/coracao_cheio.png
diff --git a/BugEliminator/img/coracao_vazio.png b/BugEliminator/img/coracao_vazio.png
diff --git a/BugEliminator/img/game_over.png b/BugEliminator/img/game_over.png
diff --git a/BugEliminator/img/mata_mosquito.png b/BugEliminator/img/mata_mosquito.png
diff --git a/BugEliminator/img/mosca.png b/BugEliminator/img/mosca.png
diff --git a/BugEliminator/index.html b/BugEliminator/index.html
@@ -0,0 +1,64 @@
+
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <title>Bug Eliminator</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="estilo.css" />
+    <link rel="shortcut icon" href="https://ideogram.ai/assets/progressive-image/balanced/response/jQ-h8xq5SmmquBgHkziFkQ" type="image/x-icon">
+    <script>
+        function iniciarJogo() {
+            let nivel = document.getElementById('nivel').value
+
+            if (nivel === '') {
+                alert('Selecione um nível valido.')
+                return false
+            }
+
+            window.location.href = "app.html?" + nivel
+        }
+    </script>
+</head>
+
+<body><br>  <br>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <img src="https://ideogram.ai/assets/progressive-image/balanced/response/j6tRjLn5T0KtnRj63kbDAg" style="width: 200px; height: 200px; border-radius: 100%;"/>
+                </div>
+            </div>
+        </div>
+<br>  <br>
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <div class="mb-2">
+                        <select class="form-control" id="nivel">
+                        <option value="">---Select level---</option>
+                        <option value="normal">Beginner</option>
+                        <option value="dificil">Intermediate</option>
+                        <option value="extremo">Hard</option>
+                        <option value="insano">Extreme</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <button type="button" class="btn btn-danger btn-lg" onclick="iniciarJogo()">Play Game</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/BugEliminator/jogo.js b/BugEliminator/jogo.js
@@ -0,0 +1,107 @@
+let largura = 0;
+let altura = 0;
+let vidas = 1;
+let tempo = 30;
+
+let criaMosquitoTempo = 2000;
+
+let nivel = window.location.search;
+nivel = nivel.replace('?', '');
+
+if (nivel === 'normal') {
+    criaMosquitoTempo = 2000;
+} else if (nivel === 'dificil') {
+    criaMosquitoTempo = 1500;
+} else if (nivel === 'extremo') {
+    criaMosquitoTempo = 1000;
+} else if (nivel === 'insano') {
+    criaMosquitoTempo = 750;
+}
+
+function ajustaTamanhoPalcoJogo() {
+    altura = window.innerHeight;
+    largura = window.innerWidth;
+    console.log(largura, altura);
+}
+
+ajustaTamanhoPalcoJogo();
+
+// Add background music
+let backgroundMusic = new Audio('background_music.mp3');
+backgroundMusic.loop = true;
+backgroundMusic.play();
+
+let cronometro = setInterval(function() {
+    tempo -= 1;
+    if (tempo < 0) {
+        clearInterval(cronometro);
+        clearInterval(criaMosquito);
+        window.location.href = 'vitoria.html';
+    } else {
+        document.getElementById('cronometro').innerHTML = tempo;
+    }
+}, 1000);
+
+function posicaoRandomica() {
+    if (document.getElementById('mosquito')) {
+        document.getElementById('mosquito').remove();
+        if (vidas > 3) {
+            let gameOverSound = new Audio('game-over.mp3');
+            gameOverSound.play();
+            setTimeout(function() {
+                window.location.href = 'fim_de_jogo.html';
+            }, 2000); // Wait for 2 seconds to let the game over sound play
+        } else {
+            document.getElementById('v' + vidas).src = "img/coracao_vazio.png";
+            vidas++;
+        }
+    }
+
+    let posicaoX = Math.floor(Math.random() * largura) - 90;
+    let posicaoY = Math.floor(Math.random() * altura) - 90;
+
+    posicaoX = posicaoX < 0 ? 0 : posicaoX;
+    posicaoY = posicaoY < 0 ? 0 : posicaoY;
+
+    console.log(posicaoX, posicaoY);
+
+    let mosquito = document.createElement('img');
+    mosquito.src = 'img/mosca.png';
+    mosquito.className = tamanhoAleatorio() + ' ' + ladoAleatorio();
+    mosquito.style.left = posicaoX + 'px';
+    mosquito.style.top = posicaoY + 'px';
+    mosquito.style.position = 'absolute';
+    mosquito.id = 'mosquito';
+    mosquito.onclick = function() {
+        let hitSound = new Audio('mosquito_hit.mp3');
+        hitSound.play();
+        this.remove();
+    };
+
+    document.body.appendChild(mosquito);
+}
+
+function tamanhoAleatorio() {
+    let classe = Math.floor(Math.random() * 3);
+    switch (classe) {
+        case 0:
+            return 'mosquito1';
+        case 1:
+            return 'mosquito2';
+        case 2:
+            return 'mosquito3';
+    }
+}
+
+function ladoAleatorio() {
+    let classe = Math.floor(Math.random() * 2);
+    switch (classe) {
+        case 0:
+            return 'ladoA';
+        case 1:
+            return 'ladoB';
+    }
+}
+
+// Call posicaoRandomica at intervals based on the level
+let criaMosquito = setInterval(posicaoRandomica, criaMosquitoTempo);
diff --git a/BugEliminator/mosquito_hit.mp3 b/BugEliminator/mosquito_hit.mp3
diff --git a/BugEliminator/vitoria.html b/BugEliminator/vitoria.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="estilo.css" />
+    <title>Bug Eliminator</title>
+    <link rel="shortcut icon" href="https://ideogram.ai/assets/progressive-image/balanced/response/jQ-h8xq5SmmquBgHkziFkQ" type="image/x-icon">
+</head>
+
+<body>
+    <br><br>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <img src="https://ideogram.ai/assets/progressive-image/balanced/response/j6tRjLn5T0KtnRj63kbDAg"  width="200px" style="border-radius: 100%;"/>
+                </div>
+            </div>
+        </div>
+<br><br>
+        <div class="row">
+            <div class="col">
+                <div class="d-flex justify-content-center">
+                    <button type="button" class="btn btn-dark btn-lg" onclick="window.location.href = 'index.html' ">Restart</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>