{"id":28373429,"url":"https://github.com/david-voss/simon-game","last_synced_at":"2026-05-07T14:46:28.500Z","repository":{"id":295474702,"uuid":"990214070","full_name":"David-Voss/Simon-Game","owner":"David-Voss","description":"Browser-based Simon Game implemented with ES6 classes, jQuery, HTML5 \u0026 CSS3 (responsive \u0026 OOP-style).","archived":false,"fork":false,"pushed_at":"2025-05-27T17:33:16.000Z","size":223,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-22T19:08:06.157Z","etag":null,"topics":["beginner-project","css","game","html","javascript","jquery","oop","responsive","simon-game"],"latest_commit_sha":null,"homepage":"https://david-voss.github.io/Simon-Game/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/David-Voss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-25T18:19:50.000Z","updated_at":"2025-05-27T17:37:09.000Z","dependencies_parsed_at":"2025-05-26T14:16:59.638Z","dependency_job_id":null,"html_url":"https://github.com/David-Voss/Simon-Game","commit_stats":null,"previous_names":["david-voss/simon-game"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/David-Voss/Simon-Game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Voss%2FSimon-Game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Voss%2FSimon-Game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Voss%2FSimon-Game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Voss%2FSimon-Game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/David-Voss","download_url":"https://codeload.github.com/David-Voss/Simon-Game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Voss%2FSimon-Game/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269905716,"owners_count":24494314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner-project","css","game","html","javascript","jquery","oop","responsive","simon-game"],"created_at":"2025-05-29T19:39:05.973Z","updated_at":"2025-10-17T09:23:52.574Z","avatar_url":"https://github.com/David-Voss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎮 Simon Game\n\n![HTML5](https://img.shields.io/badge/HTML5-%3C%2F%3E-orange)\n![CSS3](https://img.shields.io/badge/CSS3-%23-blue)\n![JavaScript](https://img.shields.io/badge/JS-yellow?logo=javascript\u0026logoColor=white)\n![jQuery](https://img.shields.io/badge/jQuery-%240blue)\n![Google Fonts](https://img.shields.io/badge/fonts-Google%20Fonts-red)\n![Language: English](https://img.shields.io/badge/language-English-blue)\n\nA browser-based Simon game implemented with modern ES-class structure, supporting keyboard, mouse and touch input.  \nPlayers must memorise and reproduce an ever-growing sequence of coloured button presses to advance through the levels.\n\n---\nThis project was created as a practice exercise to consolidate my JavaScript (and especially jQuery) skills from  \n[_Dr. Angela Yu’s_](https://www.udemy.com/course/the-complete-web-development-bootcamp/) Udemy course  \n**“The Complete Full-Stack Web Development Bootcamp”**.\n\nI extended the original spec by:\n\n- Applying an **OOP-style architecture**, including ES private class methods  \n- Adding **responsive design** via media queries  \n- Implementing extra **visual feedback**, e.g. for correct sequences   \n\n---\n\n\n\u003e **🔗 Live Demo on GitHub Pages:**  \n\u003e 👉 [Simon Game on GitHub Pages](https://david-voss.github.io/Simon-Game/)\n\n\n---\n\n## 📋 Table of Contents\n\n1. 🌄 [Preview](#1-preview)  \n2. ⭐ [Features](#2-features)  \n3. 🌐 [Technologies Used](#3-technologies-used)  \n4. 🎮 [Controls](#4-controls)  \n5. 📋 [Code Overview](#5-code-overview)  \n6. 📐 [JavaScript Function Overview](#6-javascript-function-overview)  \n7. ©️ [Author \u0026 Credits](#7-author--credits)  \n\n---\n\n## 1. 🌄 Preview\n\n**Starting Screen:**\n![Starting Screen](./images/starting-screen-screenshot.png)\n\n**Correct Sequence Feedback:**\n![Correct Sequence Feedback](./images/success-screen-screenshot.png)\n\n**Sequence Progress:**\n![Sequence Progres](./images/sequence-progress-screen-screenshot.png)\n\n**Incorrect Sequence Feedback:**\n![Incorrect Sequence Feedback](./images/wrong-screen-screenshot.png)\n\n**Game Over Screen:**\n![Game Over Screen](./images/game-over-screen-screenshot.png)\n\n---\n\n## 2. ⭐ Features\n\n- **4-colour Simon game** with increasing random sequences  \n- **Keyboard start/restart** (`ENTER`) and **click/touch** interactions  \n- **Responsive layout**: optimised for use on desktop, tablets and smartphones  \n- **Audio + visual feedback** for button presses, success and failure  \n- **ES-class architecture** with private methods \u0026 utility module  \n\n---\n\n## 3. 🌐 Technologies Used\n\n- HTML5  \n- CSS3 (Flexbox \u0026 CSS Grid, Media Queries)  \n- JavaScript (ES2022 classes, modules)  \n- jQuery (for concise DOM handling \u0026 animations)  \n- Google Fonts: *Press Start 2P*  \n\n---\n\n## 4. 🎮 Controls\n\n| Action                     | Behaviour                                |\n|----------------------------|------------------------------------------|\n| **Press ENTER**            | Start or restart the game                |\n| **Click / Touch** on colour button | Play that button, record player input |\n\n---\n\n## 5. 📋 Code Overview\n\nThe JS code is organised into three logical modules:\n\n- **`index.js`**  \n  Entry point – instantiates `SimonGame` and calls `initGame()`\n\n- **`simon-game.js`**  \n  `SimonGame` class – manages game state, level progression, input handling\n\n- **`game-button.js`**  \n  `GameButton` class – wraps each button’s DOM reference, sound and animations\n\n- **`game-utils.js`**  \n  `GameUtils` static class – timing, DOM/text helpers, feedback display\n\n---\n\n## 6. 📐 JavaScript Function Overview\n\n| Function / Method                                      | Defined In          | Purpose                                                                 |\n|--------------------------------------------------------|---------------------|-------------------------------------------------------------------------|\n| `new SimonGame()`                                      | `simon-game.js`     | Instantiates the game and sets up initial state                         |\n| `SimonGame.initGame()`                                 | `simon-game.js`     | Entry point: registers all event listeners                              |\n| `#setUpInitialGameValues()`                            | `simon-game.js`     | Calls button and variable initialisers                                  |\n| `#initClassVariables()`                                | `simon-game.js`     | Sets `currentLevel`, sequences and lock flags                           |\n| `#initGameButtons()`                                   | `simon-game.js`     | Creates `GameButton` instances for each colour                          |\n| `#initEventListeners()`                                | `simon-game.js`     | Binds key, touch and click listeners                                    |\n| `#initKeyListener()`                                   | `simon-game.js`     | Listens for **Enter** key to start/restart                              |\n| `#initTouchListener()`                                 | `simon-game.js`     | Listens for **touchstart** events to start/restart                      |\n| `#initClickListener()`                                 | `simon-game.js`     | Attaches click handlers to every `.btn`                                  |\n| `#startGameIfHasNotBeenStarted()`                      | `simon-game.js`     | Clears pending timeout and calls `#nextSequence()` if at level 0         |\n| `#handlePlayerClick(btn)`                              | `simon-game.js`     | Processes a button press, locks input and records player sequence       |\n| `#compareSelections()`                                 | `simon-game.js`     | Compares player input to random sequence; triggers success or reset      |\n| `#nextSequence()`                                      | `simon-game.js`     | Increments level, updates heading and flashes next random button        |\n| `#selectRandomButton()`                                | `simon-game.js`     | Chooses a random `GameButton` and appends to `randomSequence`           |\n| `#resetGame()`                                         | `simon-game.js`     | Handles game-over feedback, resets state, schedules restart message     |\n| `#resetGameState()`                                    | `simon-game.js`     | Clears level and both sequences                                         |\n| `new GameButton(color)`                                | `game-button.js`    | Initialises button DOM reference, ID and audio                          |\n| `GameButton.setButtonColor(newColor)`                  | `game-button.js`    | Reinitialises the button with a new colour                              |\n| `GameButton.getButtonColor()`                          | `game-button.js`    | Returns the button’s colour                                             |\n| `GameButton.getDomReference()`                         | `game-button.js`    | Returns the jQuery element reference                                    |\n| `GameButton.getHtmlId()`                               | `game-button.js`    | Returns the element’s ID                                                |\n| `GameButton.getAudioSrc()`                             | `game-button.js`    | Returns the path to the audio file                                      |\n| `GameButton.playerButtonInteraction()`                 | `game-button.js`    | Triggers both animation and pressed-feedback                            |\n| `GameButton.buttonAnimation()`                         | `game-button.js`    | Plays sound and flash animation                                          |\n| `GameButton.playButtonSound()`                         | `game-button.js`    | Plays the configured audio                                              |\n| `GameButton.buttonActivationFlash()`                   | `game-button.js`    | Fades the button out/in to flash                                        |\n| `GameButton.pressedByPlayerAnimation()`                | `game-button.js`    | Applies temporary `pressed` class for visual feedback                   |\n| `GameUtils.randomNumber(multiplier)`                   | `game-utils.js`     | Returns a random integer from 0 to multiplier − 1                       |\n| `GameUtils.timeOut(fn, ms, ...args)`                   | `game-utils.js`     | Wrapper around `setTimeout`, returns the timeout ID                     |\n| `GameUtils.changeText(selector, text)`                 | `game-utils.js`     | Sets `.text()` content on the given selector                            |\n| `GameUtils.changeHtml(selector, html)`                 | `game-utils.js`     | Sets `.html()` content on the given selector                            |\n| `GameUtils.showFeedback(src, msg, cssClass)`           | `game-utils.js`     | Plays sound and displays styled message                                 |\n| `GameUtils.feedbackSound(src)`                         | `game-utils.js`     | Instantiates and plays an audio object                                  |\n| `GameUtils.feedbackText(text, cssClass)`               | `game-utils.js`     | Adds/removes a CSS class and updates heading                            |\n| `GameUtils.toggleClassDelayed(selector, cls, delay)`   | `game-utils.js`     | Adds a class, waits, then removes it                                    |\n\n\n---\n\n## 7. ©️ Author \u0026 Credits\n\n- **Initial basic HTML \u0026 CSS** provided by \u003ca \n          href=\"https://appbrewery.com/\" \n          title=\"Visit The App Brewery\" \n          target=\"_blank\" \n          rel=\"noopener noreferrer\"\u003e\n          The App Brewery\n        \u003c/a\u003e.  \n- **HTML \u0026 CSS enhancements** and **JavaScript implementation** by \u003ca \n          href=\"https://github.com/David-Voss\" \n          title=\"Visit David Voß’s GitHub profile\" \n          target=\"_blank\" \n          rel=\"noopener noreferrer\"\u003e\n          David Voß\n        \u003c/a\u003e. \n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-voss%2Fsimon-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavid-voss%2Fsimon-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavid-voss%2Fsimon-game/lists"}