Here is free Simon Says memory game source code built with HTML, CSS and JavaScript. Learn how to create, customize and play a colourful browser memory game.
Have you ever tried to remember a sequence of colours or sounds and repeat it without making a mistake? That is the idea behind Simon Says, a simple memory game that becomes more challenging as you continue playing.
What Is a Simon Says Memory Game Coding?
In this tutorial, we will build a Simon Says-style memory game using HTML, CSS, and JavaScript. The game displays a sequence of colourful buttons, and your job is to repeat that sequence in the correct order. Each successful round adds another step, making the challenge a little harder.
You do not need a game engine or any external libraries. The complete project is included in one HTML file, so you can run it in your browser, learn how it works, and customize it for your own website.
A Simon Says memory game tests how well you can remember and repeat a sequence. The game starts with one coloured button. After you press Start, the button lights up, and you must click the same button.
If you get it right, the game adds another colour to the sequence. You then repeat the entire sequence from the beginning. The longer the sequence becomes, the more carefully you need to pay attention.
This makes the game a useful beginner project for learning JavaScript. It combines random choices, arrays, click events, timing, and simple game logic.
Features of This Memory Game Code
This version includes several features that make it playable and easy to understand:
- Four colourful game buttons.
- Randomly generated colour sequences.
- Automatic playback of each new sequence.
- Click and tap controls for desktop and mobile users.
- Level tracking as the sequence grows.
- A score display based on completed rounds.
- Feedback when a player makes a mistake.
- Start and restart functionality.
- Responsive design for different screen sizes.
- No external libraries or image files required.
The design uses CSS colours and simple animations, so the game is lightweight and easy to customize.
Free Simon Says Game Source Code HTML, CSS and JavaScript Code
The following code contains the complete game in a single HTML file. Create a file named index.html, paste the code into it, and open it in a modern browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simon Says Memory Game</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
padding: 24px 14px;
background: #101827;
color: #f8fafc;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.game {
width: 100%;
max-width: 440px;
text-align: center;
}
h1 {
margin: 0 0 10px;
font-size: clamp(30px, 8vw, 44px);
color: #ffffff;
}
.intro {
max-width: 390px;
margin: 0 auto 22px;
color: #cbd5e1;
font-size: 15px;
line-height: 1.6;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.stat {
padding: 12px;
border: 1px solid #334155;
border-radius: 10px;
background: #1e293b;
}
.stat span {
display: block;
margin-bottom: 5px;
color: #94a3b8;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.stat strong {
font-size: 26px;
color: #ffffff;
}
.board {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 340px;
margin: 0 auto;
}
.pad {
width: 100%;
aspect-ratio: 1;
border: 4px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
cursor: pointer;
opacity: 0.72;
transition:
opacity 0.12s ease,
transform 0.12s ease,
filter 0.12s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.pad:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 4px;
}
.pad:disabled {
cursor: default;
}
.green {
background: #22c55e;
}
.red {
background: #ef4444;
}
.yellow {
background: #facc15;
}
.blue {
background: #3b82f6;
}
.pad.lit {
opacity: 1;
filter: brightness(1.4);
transform: scale(0.96);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}
.controls {
margin-top: 24px;
}
.start-button {
width: 100%;
max-width: 340px;
padding: 14px 18px;
border: none;
border-radius: 9px;
background: #8b5cf6;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.start-button:hover {
background: #7c3aed;
}
.start-button:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
.message {
min-height: 44px;
margin: 16px 0 0;
color: #cbd5e1;
font-size: 14px;
line-height: 1.6;
}
.instructions {
margin-top: 22px;
padding: 16px;
border-radius: 10px;
background: #1e293b;
color: #cbd5e1;
text-align: left;
font-size: 14px;
line-height: 1.7;
}
.instructions h2 {
margin: 0 0 8px;
color: white;
font-size: 18px;
}
.instructions p {
margin: 0;
}
@media (max-width: 360px) {
.board {
gap: 8px;
}
.pad {
border-radius: 16px;
}
}
</style>
</head>
<body>
<main class="game">
<h1>Simon Says</h1>
<p class="intro">
Watch the lights, remember the sequence, and repeat it
in the same order. How far can your memory take you?
</p>
<div class="stats">
<div class="stat">
<span>Level</span>
<strong id="level">0</strong>
</div>
<div class="stat">
<span>Best Level</span>
<strong id="best">0</strong>
</div>
</div>
<div class="board" id="board">
<button
class="pad green"
data-index="0"
aria-label="Green button"
disabled
></button>
<button
class="pad red"
data-index="1"
aria-label="Red button"
disabled
></button>
<button
class="pad yellow"
data-index="2"
aria-label="Yellow button"
disabled
></button>
<button
class="pad blue"
data-index="3"
aria-label="Blue button"
disabled
></button>
</div>
<div class="controls">
<button class="start-button" id="startButton">
Start Game
</button>
<p class="message" id="message" aria-live="polite">
Press Start Game to begin your memory challenge.
</p>
</div>
<section class="instructions">
<h2>How to Play</h2>
<p>
Press Start Game and watch the coloured buttons light up.
Repeat the sequence by clicking the same buttons in the
same order. Every successful round adds another step.
One incorrect click ends the round.
</p>
</section>
</main>
<script>
const pads = Array.from(
document.querySelectorAll(".pad")
);
const levelDisplay = document.getElementById("level");
const bestDisplay = document.getElementById("best");
const message = document.getElementById("message");
const startButton = document.getElementById("startButton");
const FLASH_TIME = 450;
const GAP_TIME = 180;
let sequence = [];
let playerStep = 0;
let level = 0;
let bestLevel = loadBest();
let acceptingInput = false;
let gameActive = false;
let playbackToken = 0;
bestDisplay.textContent = bestLevel;
function loadBest() {
try {
return Number(
localStorage.getItem("simon-best-level")
) || 0;
} catch (error) {
return 0;
}
}
function saveBest() {
try {
localStorage.setItem(
"simon-best-level",
String(bestLevel)
);
} catch (error) {
// The game can still run if storage is unavailable.
}
}
function setPadsEnabled(enabled) {
pads.forEach(pad => {
pad.disabled = !enabled;
});
}
function wait(milliseconds) {
return new Promise(resolve => {
setTimeout(resolve, milliseconds);
});
}
async function flashPad(index, token) {
if (token !== playbackToken) return;
const pad = pads[index];
pad.classList.add("lit");
await wait(FLASH_TIME);
if (token !== playbackToken) {
pad.classList.remove("lit");
return;
}
pad.classList.remove("lit");
await wait(GAP_TIME);
}
async function playSequence() {
const token = ++playbackToken;
acceptingInput = false;
setPadsEnabled(false);
message.textContent = "Watch the sequence carefully...";
await wait(500);
for (const index of sequence) {
if (token !== playbackToken || !gameActive) {
return;
}
await flashPad(index, token);
}
if (token !== playbackToken || !gameActive) {
return;
}
playerStep = 0;
acceptingInput = true;
setPadsEnabled(true);
message.textContent = "Your turn! Repeat the sequence.";
}
function startRound() {
if (!gameActive) return;
level++;
levelDisplay.textContent = level;
sequence.push(
Math.floor(Math.random() * pads.length)
);
playSequence();
}
function handlePadClick(event) {
if (!gameActive || !acceptingInput) {
return;
}
const index = Number(event.currentTarget.dataset.index);
// Give immediate visual feedback for the player's click.
const pad = pads[index];
pad.classList.add("lit");
setTimeout(() => {
pad.classList.remove("lit");
}, 130);
if (index !== sequence[playerStep]) {
endGame();
return;
}
playerStep++;
if (playerStep === sequence.length) {
acceptingInput = false;
setPadsEnabled(false);
message.textContent = "Correct! Get ready for the next level.";
setTimeout(() => {
if (gameActive) {
startRound();
}
}, 650);
}
}
function startGame() {
// Invalidate any previous playback before starting again.
playbackToken++;
sequence = [];
playerStep = 0;
level = 0;
gameActive = true;
acceptingInput = false;
levelDisplay.textContent = "0";
startButton.textContent = "Restart Game";
message.textContent = "Get ready...";
pads.forEach(pad => {
pad.classList.remove("lit");
});
setPadsEnabled(false);
startRound();
}
function endGame() {
gameActive = false;
acceptingInput = false;
playbackToken++;
setPadsEnabled(false);
pads.forEach(pad => {
pad.classList.remove("lit");
});
if (level > bestLevel) {
bestLevel = level;
bestDisplay.textContent = bestLevel;
saveBest();
}
message.textContent =
`Game over! You reached level ${level}. ` +
"Try again and beat your best score.";
startButton.textContent = "Play Again";
}
pads.forEach(pad => {
pad.addEventListener("click", handlePadClick);
});
startButton.addEventListener("click", startGame);
</script>
</body>
</html>
How to Run the Game Source Code
You can test the game on your computer without installing any special software.
- Copy the complete source code above.
- Open Notepad, Visual Studio Code, or another text editor.
- Create a new file called
index.html. - Paste the code into the file and save it.
- Open the saved file in Chrome, Firefox, Edge, or another modern browser.
- Press Start Game and watch the coloured buttons carefully.
- Click the buttons in the same order to move to the next level.
The game runs locally in your browser, so you do not need an internet connection after saving the file.
How Does the Game Code Work?
The main game logic is handled by JavaScript. A few functions work together to create the sequence, display it, and check the player’s response.
1. Creating a Random Sequence
The sequence array stores the order in which the coloured buttons should light up.
At the beginning of each round, JavaScript adds a randomly selected button index to the array. As the player advances, the sequence becomes longer.
2. Showing the Colours
The playSequence() function displays each button in order. The flashPad() function briefly highlights a button and then turns off its highlight.
A short delay between flashes gives the player time to recognize each step.
3. Checking the Player’s Input
When a player clicks a button, the handlePadClick() function compares that button with the expected item in the sequence.
If the selection is correct, the game moves to the next step. If it is incorrect, the round ends and the final level is displayed.
4. Increasing the Difficulty
Every successful round adds one new button to the sequence. This means the player must remember all previous steps as well as the new one.
The game does not need increasingly complicated graphics to become more challenging. The growing sequence is enough to test the player’s memory.
5. Saving the Best Level
The game uses browser local storage to save the highest level reached. When the player returns using the same browser and site storage, the best level can still be displayed.
This score is stored on the player’s device rather than in an online account. Clearing browser data may remove it.
How to Customize the Game
Once the basic version works, you can make changes to the design and gameplay.
Change the Button Colours
Find the colour classes in the CSS:
.green {
background: #22c55e;
}
.red {
background: #ef4444;
}
.yellow {
background: #facc15;
}
.blue {
background: #3b82f6;
}
Replace these colour values with your preferred colours. You can use a darker palette, neon colours, or colours that match your website’s branding.
Make the Sequence Play Faster
Find these settings in the JavaScript:
const FLASH_TIME = 450;
const GAP_TIME = 180;
The values are measured in milliseconds. Reducing them makes the sequence play faster, while increasing them gives players more time to remember each colour.
If you make the game too fast, it may become frustrating for beginners.
Change the Button Shape
Look for the .pad class in the CSS:
.pad {
border-radius: 22px;
}
Reduce the border radius for square buttons or increase it for a more rounded design.
You can also adjust the gap between buttons and the border thickness.
Add Sound Effects
You could add a different sound for each colour. Browser audio usually needs to be initiated after a user interaction, so start audio playback after the player presses Start Game.
Keep the sounds short and clear so that they help the player remember the sequence rather than distract them.
Add More Colours
For a more advanced version, you could add additional buttons and update the random selection logic. However, you would also need to adjust the board layout and make sure the new colours are easy to distinguish.
A good improvement is to offer a difficulty selector with different sequence speeds.
Can You Add This Game to WordPress?
Yes. You can publish the game on a WordPress website using a method that supports its HTML, CSS, and JavaScript.
For example, you can:
- Create a dedicated page for the memory game.
- Upload the game files to your hosting account.
- Use a custom page template or a suitable game-embedding method.
- Add instructions and an explanation around the playable game.
- Test the layout on mobile phones and desktop computers.
Avoid pasting the complete HTML document into a normal Paragraph block. Some WordPress setups also restrict JavaScript in the Custom HTML block, so use an appropriate integration method.
For a website with many games, keeping the code in separate files can make future updates easier.
Is This a Good JavaScript Project for Beginners?
Yes. A Simon Says-style game is a useful project for practising the basics of interactive web development.
You can learn about arrays, random numbers, asynchronous functions, event listeners, timers, and updating page elements with JavaScript.
These same concepts can be used in quizzes, reaction games, matching games, and other browser-based projects.
Start with the simple version first. Once you understand the sequence logic, try adding sound effects, difficulty levels, or a more advanced score system.
Important Points
1. Is this Simon Says game source code free?
Yes. You can copy and modify the code in this tutorial for learning and your own projects. If you add third-party code, images, or sounds, check their licences before distributing your version.
2. Does the game require an internet connection?
No. The game uses built-in HTML, CSS, and JavaScript and can run locally in a modern browser.
3. Can I play the game on a mobile phone?
Yes. The buttons are designed for touch interaction, and the layout adjusts to smaller screens.
4. Does the game save my best score?
Yes. It attempts to save your best level in browser local storage. The score may be lost if browser data is cleared or storage is unavailable.
5. Can I add sound effects?
Yes. You can add audio for each colour and play the appropriate sound when a button lights up. Test audio on mobile browsers as well as desktop browsers.
6. Can I add this game to my website?
Yes. You can host it as a standalone HTML page or integrate it using a suitable website template. If you use WordPress, choose a method that permits the JavaScript required by the game.
More Basic Ideas
A Simon Says memory game is a fun way to learn how HTML, CSS, and JavaScript work together. It starts with a simple idea but introduces important programming concepts such as sequence management, user input, timing, and score tracking. Free 2048 Game Source Code in HTML, CSS & JavaScript
Use the source code in this tutorial as a starting point. Change the colours, adjust the speed, or add sound effects to create a version that feels different from the original.
Explore more free HTML5 game source code and tutorials on our website to find your next project.