diff --git a/Games/Falling_Words/README.md b/Games/Falling_Words/README.md new file mode 100644 index 0000000000..fd3e160e4b --- /dev/null +++ b/Games/Falling_Words/README.md @@ -0,0 +1,48 @@ +# **Falling Words** + +--- + +
+ +## **Description 📃** + +- Falling words is game where you have to type the word, as fast as you can !!, before it reaches the bottom of the blurred square. If it touches the bottom line you lose. +

+ +## **functionalities 🎮** + +- Score based game, score increase as more words you tyoe correctly before reching the bottom +- Gameover with music +- Music playing while you play +- It has 3 difficulties: +* Easy = 1 word per 3 seconds +* Medium = 1 word per 2 seconds +* Hard = 1 word per 1 second +
+ +## **How to play? 🕹️** +- Open the index.html file +- Select difficulty +- Start typing the words and press enter if completed +-It is a game where you must type the wordas fast as you can !!falling from the top of the blurred square. if it reaches the bottomcyan line . you lose. + +
+ +## **Screenshots 📸** + +### Home + +![Home](Screenshots/home.png) + +### How to play + +![How to play](Screenshots/how.png) + +### Game + +![Game](Screenshots/game.png) +![Game1](Screenshots/game1.png) + +### GameOver + +![GameOver](Screenshots/game_over.png) diff --git a/Games/Falling_Words/Screenshots/game.png b/Games/Falling_Words/Screenshots/game.png new file mode 100644 index 0000000000..becc297532 Binary files /dev/null and b/Games/Falling_Words/Screenshots/game.png differ diff --git a/Games/Falling_Words/Screenshots/game1.png b/Games/Falling_Words/Screenshots/game1.png new file mode 100644 index 0000000000..92a454f6d1 Binary files /dev/null and b/Games/Falling_Words/Screenshots/game1.png differ diff --git a/Games/Falling_Words/Screenshots/game_over.png b/Games/Falling_Words/Screenshots/game_over.png new file mode 100644 index 0000000000..956418ce7d Binary files /dev/null and b/Games/Falling_Words/Screenshots/game_over.png differ diff --git a/Games/Falling_Words/Screenshots/home.png b/Games/Falling_Words/Screenshots/home.png new file mode 100644 index 0000000000..dcd5b90c31 Binary files /dev/null and b/Games/Falling_Words/Screenshots/home.png differ diff --git a/Games/Falling_Words/Screenshots/how.png b/Games/Falling_Words/Screenshots/how.png new file mode 100644 index 0000000000..ed6c8d2675 Binary files /dev/null and b/Games/Falling_Words/Screenshots/how.png differ diff --git a/Games/Falling_Words/app.js b/Games/Falling_Words/app.js new file mode 100644 index 0000000000..6242377ab7 --- /dev/null +++ b/Games/Falling_Words/app.js @@ -0,0 +1,289 @@ +// HTTP GET LEVEL FROM index.html +const params = new URLSearchParams(window.location.search); +const LEVEL = params.get('lvl'); + +// DOM ELEMENTS +const buttonElementID = document.getElementById('StartButton'); +const gameContentID = document.getElementById('GameContent'); +const gameContentClass = document.getElementsByClassName('game-content'); +const inputElementID = document.getElementById('InputWord'); +const scoreElementID = document.getElementById('Score'); +const scoreElementClass = document.getElementsByClassName('score'); +const levelElementID = document.getElementById('Level'); + +// VARIABLES +const currentLevel = LEVEL; +const gameWidth = gameContentID.clientWidth; +const gameHeight = gameContentID.clientHeight; +let score = 0; +let gameOver = false; +let arrWords = []; +let arrWordsDiv = []; +let topVal = 0; + +// SOUNDS +const startGameSound = document.getElementById('StartGameSound'); +const gameoverSound = document.getElementById('GameoverSound'); +const pointSound = document.getElementById('PointSound'); +const notPointSound = document.getElementById('NotPointSound'); + +// DEFAULT VOLUME (was too high) +startGameSound.style.zIndex = 1; +startGameSound.volume = 0.5; +gameoverSound.volume = 0.5; +pointSound.volume = 0.2; + +// DICTIONARY WORDS +const DICTIONARY = [ + 'school', + 'college', + 'btc', + 'elon', + 'musk', + 'courses', + 'internet', + 'patience', + 'argentina', + 'motivation', + 'tech', + 'info', + 'send', + 'mate', + 'reactjs', + 'game', + 'brusca', + 'graphic', + 'copper', + 'boca', + 'lie', + 'case', + 'expand', + 'absence', + 'football', + 'native', + 'demon', + 'thread', + 'award', + 'tycoon', + 'riquelme', + 'still', + 'empirical', + 'doll', + 'java', + 'ackerman', + 'dinner', + 'register', + 'proof', + 'script', + 'wrist', + 'sulphur', + 'selection', + 'slam', + 'grandmother', + 'assertive', + 'eaux', + 'javascript', + 'admiration', + 'recognize', + 'roll', + 'bank', + 'reactor', + 'gradient', + 'ribbon', + 'slayer', + 'pleasant', + 'path', + 'draft', + 'polish', + 'art', + 'hook', + 'messi', + 'flow', + 'operational', + 'transaction', + 'physics', + 'rally', + 'fold', + 'housewife', + 'suspicion', + 'craft', + 'objective', + 'grass', + 'reckless', + 'manual', + 'test', + 'switch', + 'diegote', + 'silver', + 'take', + 'president', + 'constituency', + 'basis', + 'cluster', + 'psychology', + 'cat', + 'minimize', + 'hide', + 'chord', + 'brilliance', + 'official', + 'condition', + 'guideline', + 'apology', + 'general', + 'sock', + 'hunting', + 'kinship', + 'change', + 'departure', + 'mile', + 'ancestor', + 'diego', + 'cheat', + 'taxi', + 'tight', + 'moment', + 'dimension', + 'family', + 'vegan', + 'projection', + 'demonstration', + 'pony', + 'standard', + 'appendix', + 'reluctance', + 'gian', + 'davinci', + 'system', + 'analyst', + 'levi', +]; + +// GAME START +function init() { + showLevel(); + setInterval(() => { + if (!gameOver) { + drawWord(); + } + }, currentLevel); + updateWordPosition(); +} + +// CREATE WORD, STORES IT IN AN ARRAY & GET POSITION WHERE IT STARTS TO FALLLS +function drawWord() { + const word = generateRandomWord(DICTIONARY); + arrWords.push(word); + let wordDiv = document.createElement('div'); + wordDiv.innerHTML = `

${word}

`; + wordDiv.classList.add('word'); + wordDiv.style.top = '-2px'; + wordDiv.style.zIndex = '1'; + wordDiv.style.left = (Math.random() * (gameWidth - 150)).toString() + 'px'; + arrWordsDiv.push(wordDiv); + gameContentClass[0].appendChild(wordDiv); +} + +// GET RANDOM WORD FROM DICTIONARY +function generateRandomWord(words) { + return words[Math.floor(Math.random() * words.length)]; +} + +// GET VALUE FROM INPUT +function getWord() { + let inputValue = inputElementID.value.toLowerCase(); + inputElementID.value = ''; + if (arrWords.includes(inputValue)) { + updateScore(); + let indexWord = arrWords.indexOf(inputValue); + let wordDivIndex = arrWordsDiv[indexWord]; + arrWords.splice(indexWord, 1); + arrWordsDiv.splice(indexWord, 1); + wordDivIndex.parentNode.removeChild(wordDivIndex); + playSound(pointSound, 0, notPointSound); + } else { + playSound(notPointSound, 0, pointSound); + } +} + +// FALLING WORD LOGIC + GAMEOVER +function updateWordPosition() { + setInterval(() => { + if (!gameOver) { + let wordText = document.getElementsByClassName('word'); + for (let i = 0; i < arrWords.length; i++) { + if (parseInt(topVal) + 15 > gameHeight) { + gameOver = true; + gameContentID.innerHTML = modalGameOver(); + playSound(gameoverSound, 8, startGameSound); + gameoverSound.style.zIndex = 1; + inputElementID.setAttribute('disabled', true); + } else { + topVal = wordText[i].style.top; + topVal.replace('px', ''); + wordText[i].style.top = (parseInt(topVal) + 1).toString() + 'px'; + } + } + } + }, 20); +} + +// UPDATE SCORE +function updateScore() { + score += 10; + scoreElementID.innerHTML = `

Score ${score}

`; +} + +// HELPERS +// PLAY SOUND +function playSound(sound, time, stopSound) { + let playPromise = sound.play(); + + if (playPromise !== undefined) { + playPromise + .then(() => { + stopSound.pause(); + sound.pause(); + stopSound.currentTime = 0; + }) + .then(() => { + sound.currentTime = time; + }) + .then(() => { + sound.play(); + }); + } +} + +// SHOWS CURRENT PLAYING LEVEL +function showLevel() { + if (LEVEL === '3000') { + levelElementID.innerHTML = `

Level: EASY

`; + } else if (LEVEL === '2000') { + levelElementID.innerHTML = `

Level: MEDIUM

`; + } else { + levelElementID.innerHTML = `

Level: HARD

`; + } +} + +// GAMEOVER MODAL +function modalGameOver() { + return ` + + `; +} + +init(); diff --git a/Games/Falling_Words/css/game.css b/Games/Falling_Words/css/game.css new file mode 100644 index 0000000000..5db4a58881 --- /dev/null +++ b/Games/Falling_Words/css/game.css @@ -0,0 +1,88 @@ +h2 { + margin-bottom: 1.5rem; +} + +h6 { + margin: 0 !important; + padding: 0.5rem 0 !important; +} + +.wrapper { + max-width: 600px; + margin-top: 40px; + margin-left: auto; + margin-right: auto; + text-align: center; + padding: 2em 2em; + color: white; + background-color: #343a40; /* Dark background color */ +} + +.container-data { + display: flex; + justify-content: space-around; + padding: 5px 0; + background-color: rgba(0, 0, 0, 0.8); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +#GameContent { + position: relative; + margin: 0 auto 0 auto; + height: 600px; + width: 100%; + border-bottom: 5px solid rgb(0, 217, 255); + background-color: rgba(0, 0, 0, 0.5); +} + +.word { + position: absolute; + background-color: red; + padding: 0 10; + width: auto; + height: auto; + text-align: center; +} + +.word p { + position: relative; + margin: 0; +} + +.modal-gameover { + display: flex; + flex-direction: column; + padding: 40px 30px; + background-color: rgba(0, 0, 0, 0.8); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +input { + border-radius: 0 !important; + border: none !important; +} + +.btn-modal { + transition: all 0.5s; + margin: 0.3em 0; +} + +.btn-modal a { + color: black; +} + +.btn-modal:hover, +.btn-modal a:hover { + background-color: rgb(153, 44, 255); + border-radius: 0; + color: rgb(238, 255, 0) !important; + transform: translateY(-4px); +} + +audio { + position: absolute; + top: 2%; + right: 2%; +} diff --git a/Games/Falling_Words/css/global.css b/Games/Falling_Words/css/global.css new file mode 100644 index 0000000000..a5021b82db --- /dev/null +++ b/Games/Falling_Words/css/global.css @@ -0,0 +1,48 @@ +@font-face { + font-family: 'karcade'; + src: url('../font/karcade.ttf'); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-box-sizing: border-box; +} + +body { + font-family: 'karcade'; + background-color: #1a1a1a; /* Dark background color */ + min-height: min-content; + height: 100vh; + width: 100vw; +} + +input { + margin-top: 50px; +} + +p { + margin-bottom: 0; +} + +/*** Navbar ***/ + +.navbar { + padding-top: 30px; +} + +.nav-link, +.navbar-brand { + color: white; +} + +.nav-link { + transition: all 0.5s; +} + +.nav-link:hover { + background-color: rgba(192, 125, 255, 0.63); + color: rgb(238, 255, 0) !important; + transform: translateY(-4px); +} diff --git a/Games/Falling_Words/css/how.css b/Games/Falling_Words/css/how.css new file mode 100644 index 0000000000..9bf3bdb936 --- /dev/null +++ b/Games/Falling_Words/css/how.css @@ -0,0 +1,40 @@ +.main { + margin-top: 80px; + background-color: rgba(0, 0, 0, 0.8); + padding: 100px 0; + color: white; +} + +h2 { + background: -webkit-linear-gradient(rgb(217, 255, 1), rgb(5, 255, 255)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +h3 { + background: -webkit-linear-gradient(rgb(238, 255, 0), rgb(143, 5, 255)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +ul { + list-style: none; +} + +li:first-of-type { + color: greenyellow; +} + +.cyan { + color: cyan; +} + +.lose { + color: red; +} + +.fast { + color: coral; +} diff --git a/Games/Falling_Words/css/index.css b/Games/Falling_Words/css/index.css new file mode 100644 index 0000000000..7f608c00fa --- /dev/null +++ b/Games/Falling_Words/css/index.css @@ -0,0 +1,44 @@ +/*** Main Container ***/ + +.main { + margin-top: 40px; + margin-bottom: 40px; + background-color: rgba(0, 0, 0, 0.6); + padding: 30px 0; +} + +/*** Buttons ***/ +/*** HOW TO PLAY, EASY, MEDIUM, HARD, CREDITS ***/ +.buttons-container { + margin: 30px 0; +} + +.btn-index { + transition: all 0.5s; + margin: 0.3em 0; +} + +.btn-index:hover, +.btn-index a:hover { + background-color: rgb(153, 44, 255); + border-radius: 0; + color: rgb(238, 255, 0) !important; + transform: translateY(-4px); +} + +.btn-index a { + color: black; +} + +/*** AUDIO ***/ +#HomeSound { + position: absolute; + top: 2%; + right: 2%; +} + +/*** Buttons Text ***/ +h2 { + margin: 0 !important; + padding: 0.5rem 0 !important; +} \ No newline at end of file diff --git a/Games/Falling_Words/favicon.ico b/Games/Falling_Words/favicon.ico new file mode 100644 index 0000000000..e08a723273 Binary files /dev/null and b/Games/Falling_Words/favicon.ico differ diff --git a/Games/Falling_Words/font/karcade.ttf b/Games/Falling_Words/font/karcade.ttf new file mode 100644 index 0000000000..d1df85235c Binary files /dev/null and b/Games/Falling_Words/font/karcade.ttf differ diff --git a/Games/Falling_Words/game.html b/Games/Falling_Words/game.html new file mode 100644 index 0000000000..df8575426c --- /dev/null +++ b/Games/Falling_Words/game.html @@ -0,0 +1,87 @@ + + + + + Falling Words + + + + + + + + + +
+
+
Score: 0
+
Level:
+
+ +
+ +
+ + +
+
+ + + + + + + +