Skip to content

added simonsaysGAME #353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sumn2u merged 3 commits into from
Oct 18, 2025
Merged

added simonsaysGAME #353

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7579e0a
added simonsaysGAME
Kanavpreet-Singh Oct 17, 2025
a49b408
checked preview image
Kanavpreet-Singh Oct 17, 2025
31740a8
added source code in examples folder
Kanavpreet-Singh Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/simon-says-preview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions en/beginner-projects/simon-says.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# 🎮 Simon Says Game

![Simon Says Preview](../../assets/simon-says-preview.png)

## Description

A memory game where players repeat sequences of colored buttons. Each round adds a new color to the sequence, and the player must remember and repeat it correctly to advance levels.

## Features

- Start button to begin the game
- Colored buttons (Green, Red, Yellow, Blue) that flash
- Adds a new color each level
- Level tracking and Game Over message

## Concepts Practiced

- DOM manipulation
- Event listeners
- Async functions and Promises
- Game logic and sequence handling
- CSS animations and visual feedback

## Bonus Challenge

- Show the **score** after the game is over (score = number of levels completed).
- Add **sound effects** for each button click.
- Add **glowing animation** for each button to make the game more interactive.

## Live Demo

<div align="center">
Copy link

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The align attribute is obsolete in HTML5. Prefer a style-based approach, e.g., <div style="text-align:center"> or a CSS class.

Suggested change
<div align="center">
<div style="text-align:center;">

Copilot uses AI. Check for mistakes.
<iframe src="https://codesandbox.io/p/sandbox/frosty-nobel-849xrz"
style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
title="simon-says-game"
Copy link

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add loading="lazy" to the iframe to defer loading the demo until it scrolls into view, improving page load performance.

Suggested change
title="simon-says-game"
title="simon-says-game" loading="lazy"

Copilot uses AI. Check for mistakes.
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
Comment on lines +33 to +37
Copy link

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The iframe src points to a CodeSandbox editor URL (/p/sandbox/...) which is typically blocked from embedding; use the embed endpoint instead. Replace with https://codesandbox.io/embed/frosty-nobel-849xrz (optionally add query params like ?fontsize=14&hidenavigation=1&theme=light).

Copilot uses AI. Check for mistakes.
Comment on lines +36 to +37
Copy link

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The iframe permissions and sandbox flags are overly broad for a simple game embed; apply the principle of least privilege. Suggest narrowing to only what’s needed, e.g., allow="fullscreen" and sandbox="allow-scripts allow-same-origin".

Suggested change
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
allow="fullscreen"
sandbox="allow-scripts allow-same-origin"

Copilot uses AI. Check for mistakes.
></iframe>
Copy link

Copilot AI Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Provide a fallback link for users/browsers that block iframes. Add a link just below the iframe, e.g.,

<a href="https://codesandbox.io/s/frosty-nobel-849xrz\" target="_blank" rel="noopener noreferrer">Open live demo on CodeSandbox

.

Suggested change
></iframe>
></iframe>
<p><a href="https://codesandbox.io/s/frosty-nobel-849xrz" target="_blank" rel="noopener noreferrer">Open live demo on CodeSandbox</a></p>

Copilot uses AI. Check for mistakes.
</div>