From 9e606a633d75657095895bb53a7f78b117aa0864 Mon Sep 17 00:00:00 2001 From: Divyansh singh bisen Date: Sat, 11 May 2024 13:45:31 +0530 Subject: [PATCH] updated the script.js file - removed the deprecated functions and optimized the code --- Games/Alphabet_Learning_Game/script.js | 128 ++++++++----------------- 1 file changed, 40 insertions(+), 88 deletions(-) diff --git a/Games/Alphabet_Learning_Game/script.js b/Games/Alphabet_Learning_Game/script.js index 59b3c1479..5a6820b17 100644 --- a/Games/Alphabet_Learning_Game/script.js +++ b/Games/Alphabet_Learning_Game/script.js @@ -1,131 +1,83 @@ document.addEventListener('DOMContentLoaded', function () { // Declaring stuff - myName = ""; // declaring a variable for my easter egg - audioPlayer = document.getElementsByTagName('audio')[0]; + let myName = ""; // declaring a variable for my easter egg + const audioPlayer = document.querySelector('audio'); // ------ Functions ------ + // Getting the letter sound and playing it. function setLetterSound(letterVariable) { - var mp3Source = document.getElementById('mp3Source'); - var oggSource = document.getElementById('oggSource'); - mp3Source.src = 'sounds/mp3/' + letterVariable + '.mp3'; - oggSource.src = 'sounds/ogg/' + letterVariable + '.ogg'; + audioPlayer.src = `sounds/mp3/${letterVariable}.mp3`; } function setGenericSound() { - var mp3Source = document.getElementById('mp3Source'); - var oggSource = document.getElementById('oggSource'); - mp3Source.src = 'sounds/mp3/like-glass.mp3'; - oggSource.src = 'sounds/ogg/like-glass.ogg'; + audioPlayer.src = 'sounds/mp3/like-glass.mp3'; } // Generating a new element to restart the CSS3 animation. function generateNewElement() { - var elm = document.getElementById('big-char'); - var newone = elm.cloneNode(true); + const elm = document.getElementById('big-char'); + const newone = elm.cloneNode(true); elm.parentNode.replaceChild(newone, elm); } // Running the HTML5 audio player function runAudioPlayer() { - audioPlayer.load(); // pre loading the audi file - // audioPlayer.currentTime = 0; // start the audio from the beginning + audioPlayer.load(); // pre loading the audio file audioPlayer.play(); // play the audio } // Show and hide the about - document.getElementById('hide-button').onclick = function () { + document.getElementById('hide-button').addEventListener('click', function () { document.getElementById('about-cont').style.display = "none"; - } - document.getElementById('about-button').onclick = function () { + }); + + document.getElementById('about-button').addEventListener('click', function () { document.getElementById('about-cont').style.display = "block"; - } + }); // On mobile, when the user taps on "Show Keyboard" move the focus to the hidden input - document.getElementById('show-keyboard-button').onclick = function () { + document.getElementById('show-keyboard-button').addEventListener('click', function () { document.getElementById('mobile-text-input').focus(); - } + }); + + document.addEventListener('keypress', function (event) { // Do stuff when you press any key in the document - document.onkeypress = function (event) { // Do stuff when you press any key in the document - - letterOnScreen = document.getElementById('big-char'); // get the element properties - console.log(event.charCode); - if ( // if use pressed on any of these characters which are not numbers or letters - event.charCode === 13 || - event.charCode === 32 || - event.charCode === 92 || - event.charCode === 96 || - event.charCode === 61 || - event.charCode === 43 || - event.charCode === 45 || - event.charCode === 33 || - event.charCode === 64 || - event.charCode === 35 || - event.charCode === 36 || - event.charCode === 37 || - event.charCode === 94 || - event.charCode === 38 || - event.charCode === 42 || - event.charCode === 40 || - event.charCode === 41 || - event.charCode === 95 || - event.charCode === 91 || - event.charCode === 93 || - event.charCode === 34 || - event.charCode === 39 || - event.charCode === 47 || - event.charCode === 63 || - event.charCode === 62 || - event.charCode === 44 || - event.charCode === 60 || - event.charCode === 46 || - event.charCode === 59 || - event.charCode === 58 || - event.charCode === 123 || - event.charCode === 124 || - event.charCode === 125 || - event.charCode === 126 - ) { - if (event.charCode === 13) { // getting the Enter key - letterOnScreen.innerHTML = "Enter"; - } else if (event.charCode === 32) { - letterOnScreen.innerHTML = "Space"; - } else { - letterOnScreen.innerHTML = String.fromCharCode(event.charCode); - } + const letterOnScreen = document.getElementById('big-char'); // get the element properties + console.log(event.key); + if (!/^[a-zA-Z0-9]$/.test(event.key)) { + const specialChars = { + '13': 'Enter', + '32': 'Space', + }; + const specialChar = specialChars[event.keyCode] || event.key; + letterOnScreen.innerHTML = specialChar; setGenericSound(); // Set the generic sound in the resources of the audio tag - runAudioPlayer(); // Play sound - generateNewElement(); // Generate new DOM element to restart the animation } else { - letterOnScreen.innerHTML = String.fromCharCode(event.charCode); // getting the pressed character - pressedLetter = String.fromCharCode(event.charCode).toLowerCase(); // passing the pressed letter to the function to add it to sources (lower case because the sound files are in lower case). + letterOnScreen.innerHTML = event.key; + const pressedLetter = event.key.toLowerCase(); // passing the pressed letter to the function to add it to sources (lower case because the sound files are in lower case). setLetterSound(pressedLetter); - runAudioPlayer(); // Play sound - generateNewElement(); // Generate new DOM element to restart the animation } + runAudioPlayer(); // Play sound + generateNewElement(); // Generate new DOM element to restart the animation + // An easter egg, if you type my name - myName += String.fromCharCode(event.charCode); + myName += event.key; console.log(myName); - if (myName === "avdhesh") { + if (myName.toLowerCase() === "avdhesh") { alert('You typed my name!\n--------------------------------\nNow I will show you my website.'); window.open('https://avdhesh-portfolio.netlify.app/', '_blank'); } - } - + }); // Mute button - document.getElementById('mute-button').onclick = function () { - if (audioPlayer.muted === false) { - audioPlayer.muted = true; - document.getElementById('mute-button').innerHTML = "Unmute Sounds"; - console.log('sound muted'); - } else { - audioPlayer.muted = false; - document.getElementById('mute-button').innerHTML = "Mute Sounds"; - } - } + document.getElementById('mute-button').addEventListener('click', function () { + audioPlayer.muted = !audioPlayer.muted; + document.getElementById('mute-button').innerHTML = audioPlayer.muted ? "Unmute Sounds" : "Mute Sounds"; + console.log('Sound ' + (audioPlayer.muted ? 'muted' : 'unmuted')); + }); -}); \ No newline at end of file +});