diff --git a/Games/Detona/index.html b/Games/Detona/index.html new file mode 100644 index 0000000000..e13220afa2 --- /dev/null +++ b/Games/Detona/index.html @@ -0,0 +1,63 @@ + + + + + + + + + Detona Ralph + + + + + + + + + + + + + +
+ + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Games/Detona/readme.md b/Games/Detona/readme.md new file mode 100644 index 0000000000..cb352df934 --- /dev/null +++ b/Games/Detona/readme.md @@ -0,0 +1,49 @@ +## Awesome JSGame Detona Ralph + +``` + #game-development + #javascript-game + #html-css-javascript + #html-css-javascript-games + #ifood + #dio-bootcamp +``` + + +# Bem-vindo ao **JSGame Detona Ralph**! + +Um projeto que, além do entretenimento, demonstra várias técnicas avançadas de desenvolvimento de jogos em JavaScript. + + +Aqui, no repositório, você encontrará os arquivos do projeto. + +Nesta [página do jogo](https://netopaiva.github.io/detona-ralph/) você poderá se divertir com um *game* baseado no famoso filme "Detona Ralph". + +### Tecnologias Utilizadas + +- HTML5 e CSS3 para a estrutura e aparência do jogo. +- JavaScript para a lógica de programação e interatividade. +- Sprites e imagens customizadas para criar a estética única do universo de Detona Ralph. + +### Funcionalidades Incríveis + +- **Sistema de Pontuação**: Acompanhe sua pontuação à medida que progride no jogo e desafie seus amigos a superá-la, clique no quadrado que o Ralph se encontre + +### Como Jogar + +1. Clone este repositório para sua máquina local. +2. Abra o arquivo `index.html` em seu navegador web. +3. Use as setas direcionais para mover o personagem e a barra de espaço para interagir. +4. Divirta-se explorando e coletando moedas, mas fique atento aos inimigos! + +### Contribuição + +Contribuições são bem-vindas! Se você deseja melhorar este jogo, adicionar novos recursos ou corrigir problemas, sinta-se à vontade para abrir um _pull request_. + +### Créditos + +Este jogo foi desenvolvido como parte de um projeto educacional da Digital Innovation One. + +--- + +Divirta-se [jogando o **JSGame Detona Ralph**](https://netopaiva.github.io/detona-ralph/) enquanto explora as técnicas modernas de desenvolvimento de jogos em JavaScript. Lembre-se de conferir o repositório original [aqui](https://github.com/digitalinnovationone/jsgame-detona-ralph) e deixar uma ⭐️ se você gostou do projeto! diff --git a/Games/Detona/src/audios/hit.m4a b/Games/Detona/src/audios/hit.m4a new file mode 100644 index 0000000000..d747823dd2 Binary files /dev/null and b/Games/Detona/src/audios/hit.m4a differ diff --git a/Games/Detona/src/images/favicon.jpg b/Games/Detona/src/images/favicon.jpg new file mode 100644 index 0000000000..8c5153aafc Binary files /dev/null and b/Games/Detona/src/images/favicon.jpg differ diff --git a/Games/Detona/src/images/player.png b/Games/Detona/src/images/player.png new file mode 100644 index 0000000000..3d320717ff Binary files /dev/null and b/Games/Detona/src/images/player.png differ diff --git a/Games/Detona/src/images/ralph.png b/Games/Detona/src/images/ralph.png new file mode 100644 index 0000000000..e8e5b9dd5b Binary files /dev/null and b/Games/Detona/src/images/ralph.png differ diff --git a/Games/Detona/src/images/wall.png b/Games/Detona/src/images/wall.png new file mode 100644 index 0000000000..7e4216a480 Binary files /dev/null and b/Games/Detona/src/images/wall.png differ diff --git a/Games/Detona/src/scripts/engine.js b/Games/Detona/src/scripts/engine.js new file mode 100644 index 0000000000..4dd1859e8b --- /dev/null +++ b/Games/Detona/src/scripts/engine.js @@ -0,0 +1,65 @@ +const state = { + view: { + squares: document.querySelectorAll(".square"), + enemy: document.querySelector(".enemy"), + timeLeft: document.querySelector("#time-left"), + score: document.querySelector("#score"), + }, + values: { + gameVelocity: 1000, + hitPosition: 0, + result: 0, + curretTime: 60, + }, + actions: { + timerId: setInterval(randomSquare, 1000), + countDownTimerId: setInterval(countDown, 1000), + }, +}; + +function countDown() { + state.values.curretTime--; + state.view.timeLeft.textContent = state.values.curretTime; + + if (state.values.curretTime <= 0) { + clearInterval(state.actions.countDownTimerId); + clearInterval(state.actions.timerId); + alert("Game Over! O seu resultado foi: " + state.values.result); + } +} + +function playSound(audioName) { + let audio = new Audio(`./src/audios/${audioName}.m4a`); + audio.volume = 0.2; + audio.play(); +} + +function randomSquare() { + state.view.squares.forEach((square) => { + square.classList.remove("enemy"); + }); + + let randomNumber = Math.floor(Math.random() * 9); + let randomSquare = state.view.squares[randomNumber]; + randomSquare.classList.add("enemy"); + state.values.hitPosition = randomSquare.id; +} + +function addListenerHitBox() { + state.view.squares.forEach((square) => { + square.addEventListener("mousedown", () => { + if (square.id === state.values.hitPosition) { + state.values.result++; + state.view.score.textContent = state.values.result; + state.values.hitPosition = null; + playSound("hit"); + } + }); + }); +} + +function initialize() { + addListenerHitBox(); +} + +initialize(); diff --git a/Games/Detona/src/styles/main.css b/Games/Detona/src/styles/main.css new file mode 100644 index 0000000000..ade1402bdb --- /dev/null +++ b/Games/Detona/src/styles/main.css @@ -0,0 +1,48 @@ +.container { + display: flex; + flex-direction: column; + height: 100vh; + background-image: url("../images/wall.png"); +} + +.menu { + display: flex; + justify-content: space-evenly; + align-items: center; + + height: 90px; + width: 100%; + background-color: #000000; + color: #ffffff; + border-bottom: 5px solid #ffd700; +} + +.panel { + margin-top: 1rem; + display: flex; + align-items: center; + justify-content: center; +} + +.square { + height: 150px; + width: 150px; + border: 1px solid #000000; + background-color: #1aeaa5; +} + +.enemy { + background-image: url("../images/ralph.png"); + background-size: cover; +} + +.menu-lives { + display: flex; + align-items: center; + justify-content: center; +} + +.menu-time h2:nth-child(2), +.menu-score h2:nth-child(2) { + margin-top: 1rem; +} diff --git a/Games/Detona/src/styles/reset.css b/Games/Detona/src/styles/reset.css new file mode 100644 index 0000000000..9395805ea8 --- /dev/null +++ b/Games/Detona/src/styles/reset.css @@ -0,0 +1,7 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + /* font-family: "Bebas Neue", sans-serif; */ + font-family: "Press Start 2P", cursive; +} diff --git a/Games/detona-ralph b/Games/detona-ralph new file mode 160000 index 0000000000..ad4688257a --- /dev/null +++ b/Games/detona-ralph @@ -0,0 +1 @@ +Subproject commit ad4688257a9a341a1d073d4a47b330998304ab54 diff --git a/README.md b/README.md index 7a1cf1b4f5..c8619d615a 100644 --- a/README.md +++ b/README.md @@ -221,7 +221,9 @@ This repository also provides one such platforms where contributers come over an | [Word Scramble Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Scramble_Game) | [Tetris](https://github.com/kunjgit/GameZone/tree/main/Games/Tetris) | [Interactive Quizzing Application](https://github.com/kunjgit/GameZone/tree/main/Games/Interactive_Quizzing) | [Planet Defense Game](https://github.com/kunjgit/GameZone/tree/main/Games/Planet_Defense) | [Rabbit Rush Game](https://github.com/kunjgit/GameZone/tree/main/Games/Rabbit_Rush) | | [Wordle](https://github.com/kunjgit/GameZone/tree/main/Games/Wordle) | [Roll Race Game](https://github.com/kunjgit/GameZone/tree/main/Games/Roll_Race) | [Menja Game](https://github.com/kunjgit/GameZone/tree/main/Games/Menja) | [Typing Speed Test Game](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test_Game) | [Tile Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tile_Game) | | [Stick Hero Game](https://github.com/kunjgit/GameZone/tree/main/Games/Stick_Hero_Game) | [Starwars Character Game](https://github.com/kunjgit/GameZone/tree/main/Games/Starwars_Character_Game) | [Traffic Run](https://github.com/kunjgit/GameZone/tree/main/Games/Traffic_Run) | [Love Result Predictor](https://github.com/kunjgit/GameZone/tree/main/Games/Love_Result_Predictor) | [Tower Defense](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Defense) | + | [Menja_block_breaker](https://github.com/kunjgit/GameZone/tree/main/Games/Menja_block_breaker) | [Quick_Math](https://github.com/AaryanManghnani/GameZone/tree/QuickMath/Games/Quick_Math) | [Yahtzee](https://github.com/kunjgit/GameZone/tree/main/Games/Yahtzee) | + | [Bird Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bird_game) | [Bubble Blast Game](https://github.com/kunjgit/GameZone/tree/main/Games/Bubble_Blast_Game) | [Emoji Charades](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Charades) | [Drum And Kit](https://github.com/kunjgit/GameZone/tree/main/Games/Drum_Kit_Game) | [Rock Paper Scissors](https://github.com/kunjgit/GameZone/tree/main/Games/Rock_Paper_Scissors) | | [Frogger](https://github.com/kunjgit/GameZone/tree/main/Games/Frogger) | [!morethan5 ](https://github.com/kunjgit/GameZone/tree/main/Games/Not_morethan5) | [Unruly Tower](https://github.com/kunjgit/GameZone/tree/main/Games/Unruly_Tower) | [Maze Game](https://github.com/kunjgit/GameZone/tree/main/Games/MazeGame) | [Connect4](https://github.com/kunjgit/GameZone/tree/main/Games/Connect4) | | [Spelling_Bee](https://github.com/kunjgit/GameZone/tree/main/Games/Spelling_Bee) | [2048](https://github.com/kunjgit/GameZone/tree/main/Games/2048) | [Spin the Wheel](https://github.com/kunjgit/GameZone/tree/main/Games/Spin_the_wheel) | [Breakout](https://github.com/kunjgit/GameZone/tree/main/Games/Breakout) | [Tower Blocks](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Blocks) | diff --git a/assets/images/ralph.png b/assets/images/ralph.png new file mode 100644 index 0000000000..e8e5b9dd5b Binary files /dev/null and b/assets/images/ralph.png differ