From 7ac9040f3f96b5b7e870d78740512a34c4886c46 Mon Sep 17 00:00:00 2001 From: "Glitch (sound-and-light-memory-game---codepath-prework)" Date: Wed, 30 Mar 2022 22:27:53 +0000 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=AA=F0=9F=8C=AA=EF=B8=8F=20Updated?= =?UTF-8?q?=20with=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 0 .glitch-assets | 17 +++++ LICENSE | 54 +++++++++++++++ README.md | 91 +++++-------------------- TODO.md | 19 ++++++ index.html | 78 +++++++++++++++++++++ script.js | 181 +++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 178 ++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 544 insertions(+), 74 deletions(-) create mode 100644 .gitignore create mode 100644 .glitch-assets create mode 100644 LICENSE create mode 100644 TODO.md create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..8089974 --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,17 @@ +{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"} +{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"} +{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"} +{"uuid":"adSBq97hhhpFNUna","deleted":true} +{"uuid":"adSBq97hhhpFNUnb","deleted":true} +{"uuid":"adSBq97hhhpFNUnc","deleted":true} +{"name":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"} +{"name":"HKGrotesk-Medium.otf","date":"2020-10-15T17:19:39.944Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Medium.otf","type":"","size":69888,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Medium.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"mSnvx5eJut7fimxB"} +{"name":"HKGrotesk-Regular.otf","date":"2020-10-15T17:19:40.076Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf","type":"","size":67768,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Regular.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"VY2dLeOvcf8ffuEw"} +{"name":"HKGrotesk-SemiBold.otf","date":"2020-10-15T17:20:42.442Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-SemiBold.otf","type":"","size":69948,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-SemiBold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yEDZsSX7I7P2NlF1"} +{"name":"HKGrotesk-Bold.otf","date":"2020-10-15T17:21:24.249Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf","type":"","size":68144,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Bold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aHiG7zYivg7tnSDH"} +{"name":"illustration.svg","date":"2021-04-11T21:42:24.016Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fillustration.svg","type":"image/svg+xml","size":21272,"imageWidth":658,"imageHeight":682,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2Fillustration.svg","thumbnailWidth":319,"thumbnailHeight":330,"uuid":"WlqPAPkJzcjf2thL"} +{"uuid":"aHiG7zYivg7tnSDH","deleted":true} +{"uuid":"mSnvx5eJut7fimxB","deleted":true} +{"uuid":"yEDZsSX7I7P2NlF1","deleted":true} +{"uuid":"VY2dLeOvcf8ffuEw","deleted":true} +{"uuid":"XPQ2UUJettC9yQ6L","deleted":true} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b2b4c42 --- /dev/null +++ b/LICENSE @@ -0,0 +1,54 @@ +The LICENSE file for any project gives credit to the creator/author of the +project, copyright information for the project, and the legal terms under +which it's being shared. In other words, this is us using an MIT license to +say "we wrote this and you can do whatever you want with it." + +****************************************************************************** +~glitch-hello-website +****************************************************************************** +MIT License + +Copyright (c) 2021, Glitch, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + + + + +****************************************************************************** + +THIRD-PARTY SOFTWARE +This is all the software we used to build this starter project. All of these +licenses are compatible with the license above. We've included links so you +can learn more if you want. + +1. HK Grotesk: The font we're using. + + +****************************************************************************** +1. HK Grotesk +URL: https://hanken.co/products/hk-grotesk +****************************************************************************** +HK Grotesk was designed by Hanken Design Co. It is shared using a SIL OFL +license. Full license text can be found at: + +https://hanken.co/pages/web-fonts-eula +****************************************************************************** +END, HK Grotesk +****************************************************************************** \ No newline at end of file diff --git a/README.md b/README.md index ee6a490..2afe6a9 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,32 @@ -# Pre-work - *Memory Game* +# Hello website! -**Memory Game** is a Light & Sound Memory game to apply for CodePath's SITE Program. +This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄 -Submitted by: Folasade Oloye -Time spent: 8 hours spent in total +guesscounter wasnt resetting after game finished, even when playing correct note says its incorrect, changed pattern still wrong, guesscounter starting at one when should start at 0 +## What's in this project? -Link to project: (https://glitch.com/edit/#!/sound-and-light-memory-game---codepath-prework) +← `README.md`: That's this file, where you can tell people what your cool website does and how you built it. -## Required Functionality +← `index.html`: This is the main web page for your site. The HTML defines the structure and content of the page using _elements_. You'll see references in the HTML to the JS and CSS files. Try clicking the image in the center of the page! -The following **required** functionality is complete: +← `style.css`: CSS files add styling rules to your content. The CSS applies styles to the elements in your HTML page. The style rules also make the image move when you click it. -* [x] Game interface has a heading (h1 tag), a line of body text (p tag), and four buttons that match the demo app -* [x] "Start" button toggles between "Start" and "Stop" when clicked. -* [x] Game buttons each light up and play a sound when clicked. -* [x] Computer plays back sequence of clues including sound and visual cue for each button -* [x] Play progresses to the next turn (the user gets the next step in the pattern) after a correct guess. -* [x] User wins the game after guessing a complete pattern -* [x] User loses the game after an incorrect guess +← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. The code in the JavaScript file runs when the page loads, and when the visitor clicks the button you can add below. -The following **optional** features are implemented: +Open each file and check out the comments (in gray) for more info. -* [x] Any HTML page elements (including game buttons) has been styled differently than in the tutorial -* [x] Buttons use a pitch (frequency) other than the ones in the tutorial -* [x] More than 4 functional game buttons -* [x] Playback speeds up on each turn -* [x] Computer picks a different pattern each time the game is played -* [x] Player only loses after 3 mistakes (instead of on the first mistake) -* [ ] Game button appearance change goes beyond color (e.g. add an image) -* [ ] Game button sound is more complex than a single tone (e.g. an audio file, a chord, a sequence of multiple tones) -* [ ] User has a limited amount of time to enter their guess on each turn +## Try this next 🏗️ -The following **additional** features are implemented: +Take a look in `TODO.md` for next steps you can try out in your new site! -- [ ] Create difficulty levels -- [ ] User is able to create their own pattern -- [ ] Mobile device playablity +___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___ -## Video Walkthrough (GIF) +![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576) -If you recorded multiple GIFs for all the implemented features, you can add them here: -![](https://recordit.co/hAGd5OGIpv) -![](https://recordit.co/AUXCbQpUwY) +## You built this with Glitch! -## Reflection Questions -1. If you used any outside resources to help complete your submission (websites, books, people, etc) list them here. +[Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites. -https://www.w3schools.com/css//css_font_websafe.asp -https://www.bestcssbuttongenerator.com/ -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random -https://www.w3schools.com/cssref/css_colors.asp -https://www.w3schools.com/css/css_align.asp - -2. What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words) - -The biggest challenge I encountered while creating this submission was implementing the guess function. After I had implemented the guess function to the best of my ability, I had double checked with the given solution to see if I was in proper shape. Most of my logic had matched the solution, and after implementing this function the game should have been fully playable. However, my game was still very buggy and would tell the user that they had played the incorrect note even when they had pressed the correct one. In order to figure out where in my code the problem was, I used the console.log() function to debug and see there was a problem with my variables not updating properly. After running the game a couple times through and looking at what was being output to the console, I noticed that my guessCounter variable was not updating correctly, causing the program to look at the wrong value in the pattern array. At first I was completely lost on how to fix this bug. I then took a step away from the computer for a bit, as I know getting too into the code can sometimes be detrimental. After taking a break from implementing this function, I then came back to it and looked at where guessCounter should be resetting, which was inside of the playClueSequence function. Although it resets it to 0 in the function, I added another line before playClueSequence is called in the guess function that set it equal to 0 to make sure that my value was truly being set to the correct value. After implementing that line, my game began to work and fixing this bug made me feel very accomplished and working through it was so rewarding. - -3. What questions about web development do you have after completing your submission? (recommended 100 - 300 words) - -A large question about web development I have after creating my submission is how are web pages that are compatible on both computers and mobile phones created. After creating this game, I tried playing it on my phone and it was nearly impossible to play after a certain number of buttons had been added. Most websites that we use and encounter on a daily basis are compatible on both desktops and mobile devices, and I was wondering how those are implemented. Another question about web development I have is: When HTML, CSS, and JavaScript were created, was their original intent for them to be used together? The three languages truly work together so easily, so I want to know more about the origins of these languages and if this was the original intent of the languages. - -4. If you had a few more hours to work on this project, what would you spend them doing (for example: refactoring certain functions, adding additional features, etc). Be specific. (recommended 100 - 300 words) - -If I had a few more hours to work on this project, I would try to implement a few more features. I would first try to research how I could make this game more playable on a mobile phone. After finishing implementing the game, I tried playing it on my phone, but it was a bit difficult as the game is mainly meant to be played on a computer or monitor, as not all the buttons are visible on one screen if the user is playing on a mobile device. Another feature that I think would be fun to implement is creating levels of the game. The user would be able to select the difficulty of the game, rather than there be a set difficulty every time. I think this would also make the game a bit more accessible, as some people may not be able to play a very difficult implementation of the game. Lastly, I think something that would be very interesting to add if I had a few more hours is to give the user more input and be able to create a pattern themselves. If a person was playing the game with a friend, they would be able to create a pattern that the friend would then have to follow. This could also be taken a step further and could be created into a player vs player game and whoever properly guesses the other player’s pattern wins. - - - -## Interview Recording URL Link - -[My 5-minute Interview Recording](your-link-here) - - -## License - - Copyright Folasade Oloye - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. \ No newline at end of file +- Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions. +- Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more. diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..4963e61 --- /dev/null +++ b/TODO.md @@ -0,0 +1,19 @@ +# TODO 🚧 + +Your new site is all yours so it doesn't matter if you break it! Try editing the code–add a button element that moves when the user clicks it. + +In `index.html`, add this code on the line after the comment with `ADD BUTTON HERE` in it (you can copy and paste the button element HTML): + +```html + +``` + +Look at the page to see the button. Click it! + +Open `script.js` to see the script that makes the button move. + +## Keep going! 🚀 + +Try adding more properties to the CSS `dipped` style for the button to see how the changes appear on click. diff --git a/index.html b/index.html new file mode 100644 index 0000000..847940d --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + CodePath Summer Internship Prework + + + + + + + + + + + + + + + + + + + +

Sound and Light Memory Game

+ + +
+

Welcome to the game! Are you ready to get started?

+

+ Instructions: Follow the pattern back to win the game! +

+ + +
+
+ +
+ + + + + + + + + + +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2398c4b --- /dev/null +++ b/script.js @@ -0,0 +1,181 @@ +// global constants +const cluePauseTime = 333; //how long to pause in between clues +const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence + +//Global Variables +var pattern = []; //[2, 9, 1, 3, 6, 8, 5, 4,10,7]; +var progress = 0; +var gamePlaying = false; +var tonePlaying = false; +var volume = 0.5; +var guessCounter = 0; +var clueHoldTime = 1000; //how long to hold each clue's light/sound +var mistakes = 0; + +function startGame() { + //initialize game variables + progress = 0; + mistakes = 0; + pattern = []; + createPattern(); + + for (let i = 0; i <= 10; i++) { + //prints out every value of the pattern array to the console + console.log("length of patternarray" + pattern[i]); + } + + gamePlaying = true; + document.getElementById("startBtn").classList.add("hidden"); + document.getElementById("stopBtn").classList.remove("hidden"); + playClueSequence(); +} +// swap the Start and Stop buttons + +function stopGame() { + //end the current game + gamePlaying = false; + guessCounter = 0; + document.getElementById("startBtn").classList.remove("hidden"); + document.getElementById("stopBtn").classList.add("hidden"); +} + +function lightButton(btn) { + document.getElementById("button" + btn).classList.add("lit"); +} +function clearButton(btn) { + document.getElementById("button" + btn).classList.remove("lit"); +} + +function createPattern() { + //creates a random pattern every time the game restarts + var length = 0; + while (length < 11) { + pattern.push(Math.floor(Math.random() * (10 - 1 + 1) + 1)); + length++; + } + length = 0; +} + +function playSingleClue(btn) { + if (gamePlaying) { + lightButton(btn); + playTone(btn, clueHoldTime); + setTimeout(clearButton, clueHoldTime, btn); + } +} + +function playClueSequence() { + var guessCounter = 0; + if (clueHoldTime > 450) { + clueHoldTime = clueHoldTime - 90; //decreases the amount of time a note plays for + } + context.resume(); + let delay = nextClueWaitTime; //set delay to initial wait time + for (let i = 0; i <= progress; i++) { + // for each clue that is revealed so far + console.log("play single clue: " + pattern[i] + " in " + delay + "ms"); + setTimeout(playSingleClue, delay, pattern[i]); // set a timeout to play that clue + delay += clueHoldTime; + delay += cluePauseTime; + } +} + +function loseGame() { + stopGame(); + alert("Game Over. You lost."); +} +function winGame() { + stopGame(); + alert("You Won! Congratulations."); +} + +function guess(btn) { + console.log("user guessed: " + btn); + console.log("guess counter: " + guessCounter); + console.log("progress: " + progress); + console.log("place in pattern array: " + pattern[guessCounter]); + if (!gamePlaying) { + return; + } + if (btn == pattern[guessCounter]) { + //checks if the button is the correct one + + if (progress == guessCounter) { + //checks how many times the user has guessed a square + + if (progress == pattern.length - 1) { + // checks if we've hit the end of pattern array + winGame(); + } else { + //if we haven't hit end of array play next clue + progress++; + guessCounter = 0; + playClueSequence(); + } + } else { + guessCounter++; + } + } else if (mistakes < 3) { + //checks how many mistakes user has made + mistakes++; + if (mistakes == 3) { + loseGame(); + } else { + //if mistakes are less than 3 it alerts user how many mistakes they've made + if (mistakes == 1) { + alert("Incorrect Move! You have made " + mistakes + " mistake."); + } else { + alert("Incorrect Move! You have made " + mistakes + " mistakes."); + } + } + } else { + loseGame(); + } +} + +// Sound Synthesis Functions +const freqMap = { + 1: 261.6, + 2: 329.6, + 3: 392, + 4: 466.2, + 5: 175, + 6: 650.4, + 7: 200, + 8: 800, + 9: 225, + 10: 523.6, +}; +function playTone(btn, len) { + o.frequency.value = freqMap[btn]; + g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025); + context.resume(); + tonePlaying = true; + setTimeout(function () { + stopTone(); + }, len); +} +function startTone(btn) { + if (!tonePlaying) { + context.resume(); + o.frequency.value = freqMap[btn]; + g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025); + context.resume(); + tonePlaying = true; + } +} +function stopTone() { + g.gain.setTargetAtTime(0, context.currentTime + 0.05, 0.025); + tonePlaying = false; +} + +// Page Initialization +// Init Sound Synthesizer +var AudioContext = window.AudioContext || window.webkitAudioContext; +var context = new AudioContext(); +var o = context.createOscillator(); +var g = context.createGain(); +g.connect(context.destination); +g.gain.setValueAtTime(0, context.currentTime); +o.connect(g); +o.start(0); diff --git a/style.css b/style.css new file mode 100644 index 0000000..c044b2e --- /dev/null +++ b/style.css @@ -0,0 +1,178 @@ + +:root { + --color-bg: #69F7BE; + --color-text-main: #000000; + --color-primary: #FFFF00; + --wrapper-height: 87vh; + --image-max-width: 300px; + --image-margin: 3rem; + --font-family: "HK Grotesk"; + --font-family-header: "HK Grotesk"; +} + +/* Basic page style resets */ +* { + box-sizing: border-box; +} +[hidden] { + display: none !important; +} + +/* Import fonts */ +@font-face { + font-family: HK Grotesk; + src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027") + format("opentype"); +} +@font-face { + font-family: HK Grotesk; + font-weight: bold; + src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437") + format("opentype"); +} + + + + +/****************************************************************************** +END Glitch hello-app default styles +******************************************************************************/ + +body { + font-family: Helvetica, arial, sans-serif; + background-color: slategrey; + color: white; + margin: 2em; + text-align: center; +} + +/* Button - Add it from the README instructions */ +button, +input { + font-family: inherit; + font-size: 100%; + background: #FFFFFF; + border: 1px solid #000000; + box-sizing: border-box; + border-radius: 4px; + padding: 0.5rem 1rem; + transition: 500ms; +} +button { + padding: 10px; + border-radius: 10px; + +} +.notGB { + box-shadow: 0px 1px 0px 0px #1c1b18; + background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%); + background-color:#eae0c2; + border-radius:15px; + border:2px solid #333029; + display:inline-block; + cursor:pointer; + color:#505739; + font-size:14px; + font-weight:bold; + padding:12px 16px; + text-decoration:none; + text-shadow:0px 1px 0px #ffffff; +} + +.notGB:hover { + background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%); + background-color:#ccc2a6; +} +.notGB:active { + position:relative; + top:1px; +} + + +#gameButtonArea > button { + width:200px; + height:200px; + margin:2px; +} + +#button1 { + background: lightgreen; +} +#button1:active, #button1.lit { + background: green; +} + + +#button2 { + background: lightblue; +} +#button2:active, #button2.lit { + background: blue; +} + +#button3 { + background: pink; +} +#button3:active, #button3.lit { + background: red; +} + +#button4 { + background: lightyellow; +} +#button4:active, #button4.lit { + background: yellow; +} +#button5 { + background: lavender; +} +#button5:active, #button5.lit { + background: purple; +} + + +#button6 { + background: thistle; +} +#button6:active, #button6.lit { + background: rosybrown; +} + +#button7 { + background: burlywood; +} +#button7:active, #button7.lit { + background: saddlebrown; +} + +#button8 { + background: Turquoise; +} +#button8:active, #button8.lit { + background: teal; +} +#button9 { + background: dodgerblue; +} +#button9:active, #button9.lit { + background: midnightblue; +} +#button10 { + background: lightsalmon; +} +#button10:active, #button10.lit { + background: chocolate; +} + +/* Subheading */ +h2 { + color: #2800FF; +} + +h1 { + font-family: Courier New, arial, sans-serif; +} + +.hidden{ + display: none; +} \ No newline at end of file From 347f11471f8ccb8c725e1292584a8c04e8dd7146 Mon Sep 17 00:00:00 2001 From: "Glitch (sound-and-light-memory-game---codepath-prework)" Date: Fri, 1 Apr 2022 16:22:32 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=96=F0=9F=A7=88=20Updated=20with?= =?UTF-8?q?=20Glitch?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 92 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 75 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 2afe6a9..3e6536f 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,90 @@ -# Hello website! +# Pre-work - *Memory Game* -This is a basic HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen ✨ immediately in the preview window. On the left you'll see the files that make up your site, including HTML, JavaScript, and CSS. You can upload assets like images or audio in `assets`. The rest is up to you and your imagination. 🦄 +**Memory Game** is a Light & Sound Memory game to apply for CodePath's SITE Program. +Submitted by: Folasade Oloye -guesscounter wasnt resetting after game finished, even when playing correct note says its incorrect, changed pattern still wrong, guesscounter starting at one when should start at 0 -## What's in this project? +Time spent: 8 hours spent in total -← `README.md`: That's this file, where you can tell people what your cool website does and how you built it. +Link to project: (https://glitch.com/edit/#!/sound-and-light-memory-game---codepath-prework) -← `index.html`: This is the main web page for your site. The HTML defines the structure and content of the page using _elements_. You'll see references in the HTML to the JS and CSS files. Try clicking the image in the center of the page! +## Required Functionality -← `style.css`: CSS files add styling rules to your content. The CSS applies styles to the elements in your HTML page. The style rules also make the image move when you click it. +The following **required** functionality is complete: -← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. The code in the JavaScript file runs when the page loads, and when the visitor clicks the button you can add below. +* [x] Game interface has a heading (h1 tag), a line of body text (p tag), and four buttons that match the demo app +* [x] "Start" button toggles between "Start" and "Stop" when clicked. +* [x] Game buttons each light up and play a sound when clicked. +* [x] Computer plays back sequence of clues including sound and visual cue for each button +* [x] Play progresses to the next turn (the user gets the next step in the pattern) after a correct guess. +* [x] User wins the game after guessing a complete pattern +* [x] User loses the game after an incorrect guess -Open each file and check out the comments (in gray) for more info. +The following **optional** features are implemented: -## Try this next 🏗️ +* [x] Any HTML page elements (including game buttons) has been styled differently than in the tutorial +* [x] Buttons use a pitch (frequency) other than the ones in the tutorial +* [x] More than 4 functional game buttons +* [x] Playback speeds up on each turn +* [x] Computer picks a different pattern each time the game is played +* [x] Player only loses after 3 mistakes (instead of on the first mistake) +* [ ] Game button appearance change goes beyond color (e.g. add an image) +* [ ] Game button sound is more complex than a single tone (e.g. an audio file, a chord, a sequence of multiple tones) +* [ ] User has a limited amount of time to enter their guess on each turn -Take a look in `TODO.md` for next steps you can try out in your new site! +The following **additional** features are implemented: -___Want a minimal version of this project to build your own website? Check out [Blank Website](https://glitch.com/edit/#!/remix/glitch-blank-website)!___ +- [ ] Create difficulty levels +- [ ] User is able to create their own pattern +- [ ] Mobile device playablity -![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576) +## Video Walkthrough (GIF) -## You built this with Glitch! +If you recorded multiple GIFs for all the implemented features, you can add them here: +![x](https://media.giphy.com/media/cAqe4xg0L7Sk6OMHRv/giphy.gif) +![x](https://media.giphy.com/media/qLm8aU9bz5lGyo9Oge/giphy.gif) +![x](https://media.giphy.com/media/izHgMDRGFz9ZUcoN0z/giphy.gif) -[Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites. +## Reflection Questions +1. If you used any outside resources to help complete your submission (websites, books, people, etc) list them here. -- Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions. -- Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more. +https://www.w3schools.com/css//css_font_websafe.asp +https://www.bestcssbuttongenerator.com/ +https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random +https://www.w3schools.com/cssref/css_colors.asp +https://www.w3schools.com/css/css_align.asp + +2. What was a challenge you encountered in creating this submission (be specific)? How did you overcome it? (recommended 200 - 400 words) + +The biggest challenge I encountered while creating this submission was implementing the guess function. After I had implemented the guess function to the best of my ability, I had double checked with the given solution to see if I was in proper shape. Most of my logic had matched the solution, and after implementing this function the game should have been fully playable. However, my game was still very buggy and would tell the user that they had played the incorrect note even when they had pressed the correct one. In order to figure out where in my code the problem was, I used the console.log() function to debug and see there was a problem with my variables not updating properly. After running the game a couple times through and looking at what was being output to the console, I noticed that my guessCounter variable was not updating correctly, causing the program to look at the wrong value in the pattern array. At first I was completely lost on how to fix this bug. I then took a step away from the computer for a bit, as I know getting too into the code can sometimes be detrimental. After taking a break from implementing this function, I then came back to it and looked at where guessCounter should be resetting, which was inside of the playClueSequence function. Although it resets it to 0 in the function, I added another line before playClueSequence is called in the guess function that set it equal to 0 to make sure that my value was truly being set to the correct value. After implementing that line, my game began to work and fixing this bug made me feel very accomplished and working through it was so rewarding. + +3. What questions about web development do you have after completing your submission? (recommended 100 - 300 words) + +A large question about web development I have after creating my submission is how are web pages that are compatible on both computers and mobile phones created. After creating this game, I tried playing it on my phone and it was nearly impossible to play after a certain number of buttons had been added. Most websites that we use and encounter on a daily basis are compatible on both desktops and mobile devices, and I was wondering how those are implemented. Another question about web development I have is: When HTML, CSS, and JavaScript were created, was their original intent for them to be used together? The three languages truly work together so easily, so I want to know more about the origins of these languages and if this was the original intent of the languages. + +4. If you had a few more hours to work on this project, what would you spend them doing (for example: refactoring certain functions, adding additional features, etc). Be specific. (recommended 100 - 300 words) + +If I had a few more hours to work on this project, I would try to implement a few more features. I would first try to research how I could make this game more playable on a mobile phone. After finishing implementing the game, I tried playing it on my phone, but it was a bit difficult as the game is mainly meant to be played on a computer or monitor, as not all the buttons are visible on one screen if the user is playing on a mobile device. Another feature that I think would be fun to implement is creating levels of the game. The user would be able to select the difficulty of the game, rather than there be a set difficulty every time. I think this would also make the game a bit more accessible, as some people may not be able to play a very difficult implementation of the game. Lastly, I think something that would be very interesting to add if I had a few more hours is to give the user more input and be able to create a pattern themselves. If a person was playing the game with a friend, they would be able to create a pattern that the friend would then have to follow. This could also be taken a step further and could be created into a player vs player game and whoever properly guesses the other player’s pattern wins. + + + +## Interview Recording URL Link + +[My 5-minute Interview Recording](https://www.loom.com/share/3ca74d885cad49e389eac1f8daea187b) + + +## License + + Copyright Folasade Oloye + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file From 6a6dceb4d11a458ab9732d074accb229861fa1f3 Mon Sep 17 00:00:00 2001 From: "Glitch (sound-and-light-memory-game---codepath-prework)" Date: Fri, 1 Apr 2022 19:59:48 +0000 Subject: [PATCH 3/3] updated interview video --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3e6536f..15ef022 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ If I had a few more hours to work on this project, I would try to implement a fe ## Interview Recording URL Link -[My 5-minute Interview Recording](https://www.loom.com/share/3ca74d885cad49e389eac1f8daea187b) +[My 5-minute Interview Recording](https://www.loom.com/share/63079364d1434d68afae7cf2a62ceebe) ## License