From 3f85bb9cc659a2ed58ca0d69cfe03c1c502f59db Mon Sep 17 00:00:00 2001 From: Iron-56 Date: Tue, 4 Mar 2025 01:10:53 +0530 Subject: [PATCH] issue-2 --- 3-typing-game/SOLUTION.md | 11 +++ 3-typing-game/beats/index.html | 18 +++++ 3-typing-game/beats/play.svg | 3 + 3-typing-game/beats/script.js | 107 +++++++++++++++++++++++++++ 3-typing-game/beats/style.css | 83 +++++++++++++++++++++ 3-typing-game/image.png | Bin 0 -> 14781 bytes 3-typing-game/typing-game/index.html | 19 +++++ 3-typing-game/typing-game/script.js | 94 +++++++++++++++++++++++ 3-typing-game/typing-game/style.css | 9 +++ 9 files changed, 344 insertions(+) create mode 100644 3-typing-game/SOLUTION.md create mode 100644 3-typing-game/beats/index.html create mode 100644 3-typing-game/beats/play.svg create mode 100644 3-typing-game/beats/script.js create mode 100644 3-typing-game/beats/style.css create mode 100644 3-typing-game/image.png create mode 100644 3-typing-game/typing-game/index.html create mode 100644 3-typing-game/typing-game/script.js create mode 100644 3-typing-game/typing-game/style.css diff --git a/3-typing-game/SOLUTION.md b/3-typing-game/SOLUTION.md new file mode 100644 index 0000000..0575dfd --- /dev/null +++ b/3-typing-game/SOLUTION.md @@ -0,0 +1,11 @@ +## Assignment + +I got the idea and then I searched Google for images so that I can take inspiration from. This was how I made the resources. Keyboard game preview: +![A game involving keyboard](image.png) + +## Challenge + +- To implement highscore, I used localStorage.get and set item to a current score if it is less than the stored highscore. +- To remove the event listener, I simply removed the event listener from the typedValueElement and re-added it after button press. +- To display the modal dialog box, I simply used the alert function as we don't need any other custom UI or styles. +- To disable the text box, I changed the disabled attribute to true; \ No newline at end of file diff --git a/3-typing-game/beats/index.html b/3-typing-game/beats/index.html new file mode 100644 index 0000000..f8eab9c --- /dev/null +++ b/3-typing-game/beats/index.html @@ -0,0 +1,18 @@ + + + + Beats + + + + + +
+ +
+
+
+ +
+ + \ No newline at end of file diff --git a/3-typing-game/beats/play.svg b/3-typing-game/beats/play.svg new file mode 100644 index 0000000..e538083 --- /dev/null +++ b/3-typing-game/beats/play.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/3-typing-game/beats/script.js b/3-typing-game/beats/script.js new file mode 100644 index 0000000..36f9c7a --- /dev/null +++ b/3-typing-game/beats/script.js @@ -0,0 +1,107 @@ + +const game = document.getElementById('game-area'); +const keyArea = document.getElementById('key-area'); +const play = document.getElementById('play'); + +let characters = ['a', 's', 'd', 'j', 'k']; +let blocks = []; + +document.getElementById('floor-top').style.display = 'none'; +document.getElementById('floor-bottom').style.display = 'none'; +keyArea.style.display = 'none'; + +var delta = 0; +var difficulty = 1; + +function exit() { + play.style.display = ''; +} + +function animate() { + + if (Math.random() < (delta**0.8)*difficulty/10000) { + const block = document.createElement('div'); + block.classList.add('block'); + block.lane = Math.round(Math.random()*4); + block.style.top = '-20%'; + game.appendChild(block); + blocks.push(block); + block.offsetTop = 0; + block.innerHTML = characters[block.lane]; + + + for (let i = 0; i < blocks.length; i++) { + let b = blocks[i]; + if (b === block) continue; + + let bTop = parseFloat(b.style.top); + + const computedStyle = window.getComputedStyle(block); + + const width = parseFloat(computedStyle.width); + const height = parseFloat(computedStyle.height); + let blockTop = parseFloat(block.style.top); + + if (b.lane === block.lane && bTop < blockTop + height) { + blockTop -= height; + block.style.top = blockTop + "px"; + i = -1; + } + } + + delta = 0; + } + + for (let i=0; i game.clientHeight) { + exit(); + return; + } + + if (block.offsetTop > keyArea.offsetTop && block.offsetTop < keyArea.offsetTop + keyArea.clientHeight) { + if(keyArea.innerHTML === '') { + continue; + } + if (keyArea.innerHTML === block.innerHTML) { + keyArea.innerHTML = ''; + blocks.splice(i, 1); + block.remove(); + i--; + } else { + exit(); + return; + } + } + } + + delta++; + difficulty += 0.0001; + + requestAnimationFrame(animate); +} + +play.addEventListener("click", function() { + requestAnimationFrame(animate); + blocks.forEach(block => block.remove()); + blocks = []; + this.style.display = 'none'; + keyArea.style.display = ''; + document.getElementById('floor-top').style.display = ''; + document.getElementById('floor-bottom').style.display = ''; + keyArea.innerHTML = ''; +}); + +document.addEventListener('keydown', function(event) { + if (characters.includes(event.key)) { + keyArea.innerHTML = event.key; + } +}); + +exit(); \ No newline at end of file diff --git a/3-typing-game/beats/style.css b/3-typing-game/beats/style.css new file mode 100644 index 0000000..e2667d6 --- /dev/null +++ b/3-typing-game/beats/style.css @@ -0,0 +1,83 @@ +/* GAME AREA */ +#game-area { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 95vh; + width: 25vw; /* Use vw instead of fixed width */ + background-color: skyblue; + margin: 2vh auto; /* Margin with vh */ + border-radius: 1.5vw; /* Responsive border-radius */ +} + +/* FLOORS */ +#floor-top { + position: absolute; + bottom: 5vh; /* Use vh for vertical spacing */ + width: 25vw; + height: 4vh; + background-color: #739eec; + z-index: 10; +} + +#floor-bottom { + position: absolute; + bottom: 1vh; + width: 25vw; + height: 5vh; + background-color: #3d5a91; + z-index: 10; + border-radius: 0 0 1.5vw 1.5vw; +} + +/* BLOCKS */ +.block { + width: 5vw; /* Make block size relative */ + aspect-ratio: 1/2; + position: absolute; + border-radius: 1vw; + background-image: linear-gradient(orange, yellow); + box-shadow: inset 0 0 0 0.3vw maroon, 0.2vw 0.5vw 1vw rgba(0, 0, 0, 0.3); + font-size: 3vw; + text-align: center; +} + +#key-area { + display: flex; + height: 25%; + bottom: 9%; + justify-content: center; + width: 25vw; + background-color: rgba(255, 0, 0, 0.3); + background-image: none; + border-radius: 0%; + box-shadow: none; + border-top: maroon 0.2vw solid; + z-index: 20; +} + +/* BODY */ +body { + overflow: hidden; + padding: 0; + margin: 0; + background-color: darkcyan; +} + + +#play { + position: absolute; + border-radius: 0.5vw; + padding: 1vh; + /* bottom: 0.0vh; */ + + display: flex; + flex-wrap: wrap; + justify-content: center; + /* width: vw; */ + z-index: 100; + background-color: #5da16c; + + box-shadow: 0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 0.3); +} \ No newline at end of file diff --git a/3-typing-game/image.png b/3-typing-game/image.png new file mode 100644 index 0000000000000000000000000000000000000000..b401cfdb5366dc0b92fdee606023aef1c540564b GIT binary patch literal 14781 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 SG`+zVaLMwjMd=0i-~Ja+0-9q0 literal 0 HcmV?d00001 diff --git a/3-typing-game/typing-game/index.html b/3-typing-game/typing-game/index.html new file mode 100644 index 0000000..0258fa8 --- /dev/null +++ b/3-typing-game/typing-game/index.html @@ -0,0 +1,19 @@ + + + + Typing game + + + +

Typing game!

+
+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

+

+
+ + +
+ + + \ No newline at end of file diff --git a/3-typing-game/typing-game/script.js b/3-typing-game/typing-game/script.js new file mode 100644 index 0000000..781329b --- /dev/null +++ b/3-typing-game/typing-game/script.js @@ -0,0 +1,94 @@ +var quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; + +let words = []; +let wordIndex = 0; + +let startTime = Date.now(); + +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +const highscore = document.getElementById('highscore'); + +typedValueElement.disabled = true; + +if (localStorage.getItem('highscore') === null) { + localStorage.setItem('highscore', 0); +} else { + highscore.innerText = `Highscore: ${localStorage.getItem('highscore') / 1000} seconds`; +} + +document.getElementById('start').addEventListener('click', () => { + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + words = quote.split(' '); + wordIndex = 0; + + const spanWords = words.map(function(word) { return `${word} `}); + quoteElement.innerHTML = spanWords.join(''); + quoteElement.childNodes[0].className = 'highlight'; + messageElement.innerText = ''; + + typedValueElement.value = ''; + typedValueElement.disabled = false; + typedValueElement.focus(); + + startTime = new Date().getTime(); + typedValueElement.addEventListener('input', input); +}); + +function input() { + const currentWord = words[wordIndex]; + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + typedValueElement.disabled = true; + messageElement.innerText = ''; + typedValueElement.value = ''; + + let HighScoreTime = parseInt(localStorage.getItem('highscore')); + if (HighScoreTime === 0) { + HighScoreTime = elapsedTime; + } + if (HighScoreTime > elapsedTime || HighScoreTime === 0 || isNaN(HighScoreTime)) { + HighScoreTime = elapsedTime; + } + + alert(message+'\nHighscore: '+HighScoreTime / 1000+' seconds'); + highscore.innerText = `Highscore: ${HighScoreTime / 1000} seconds`; + + localStorage.setItem('highscore', HighScoreTime); + + + typedValueElement.removeEventListener('input', input); + + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + + typedValueElement.value = ''; + wordIndex++; + + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + + quoteElement.childNodes[wordIndex].className = 'highlight'; + + } else if (currentWord.startsWith(typedValue)) { + typedValueElement.className = ''; + + } else { + typedValueElement.className = 'error'; + } +} \ No newline at end of file diff --git a/3-typing-game/typing-game/style.css b/3-typing-game/typing-game/style.css new file mode 100644 index 0000000..461b237 --- /dev/null +++ b/3-typing-game/typing-game/style.css @@ -0,0 +1,9 @@ + +.highlight { + background-color: yellow; +} + +.error { + background-color: lightcoral; + border: red; +} \ No newline at end of file