Jeu
Simon Says
Javascript
Bootstrap 5
Concentration
Jeu Memoire
Interactif
Sequences
Html Css Js
Gaming
Snippet
Addictif
Jeu Simon Says interactif Bootstrap 5 avec séquences lumineuses et sonores. Mémorisez et reproduisez la séquence pour progresser dans ce jeu addictif et fun.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Game Simon Says Bootstrap5 2026 05050005 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
body {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.game-container {
background: rgba(255,255,255,0.95);
border-radius: 30px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.simon-board {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #2c3e50;
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.simon-btn {
aspect-ratio: 1 / 1;
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.1s ease;
opacity: 0.8;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.simon-btn:active {
transform: scale(0.95);
}
.simon-btn.active {
opacity: 1;
transform: scale(0.98);
box-shadow: 0 0 20px rgba(255,255,255,0.5);
}
.btn-rouge { background: #ff4444; }
.btn-vert { background: #44ff44; }
.btn-bleu { background: #4444ff; }
.btn-jaune { background: #ffff44; }
.btn-rouge.active { background: #ff8888; box-shadow: 0 0 20px #ff4444; }
.btn-vert.active { background: #88ff88; box-shadow: 0 0 20px #44ff44; }
.btn-bleu.active { background: #8888ff; box-shadow: 0 0 20px #4444ff; }
.btn-jaune.active { background: #ffff88; box-shadow: 0 0 20px #ffff44; }
.disabled-btn {
pointer-events: none;
opacity: 0.5;
}
.score-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 15px;
color: white;
text-align: center;
}
.level-badge {
background: #ffd700;
color: #333;
border-radius: 50px;
padding: 10px 20px;
font-weight: bold;
font-size: 20px;
}
@keyframes pulse-animation {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse {
animation: pulse-animation 0.3s ease-in-out;
}
@keyframes wrong-animation {
0%, 100% { background-color: #ff4444; }
50% { background-color: #ffffff; }
}
.wrong-flash {
animation: wrong-animation 0.3s ease-in-out;
}
.instruction {
background: #f0f0f0;
border-radius: 15px;
padding: 15px;
text-align: center;
}
.btn-play {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 12px 30px;
font-weight: bold;
color: white;
transition: all 0.3s ease;
}
.btn-play:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.sequence-indicator {
font-size: 14px;
font-family: monospace;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-7">
<!-- Titre -->
<div class="text-center mb-4">
<h1 class="text-white display-5 fw-bold">
<i class="bi bi-brain"></i> Simon Says
</h1>
<p class="text-white-50">Mémorise et reproduis la séquence !</p>
</div>
<!-- Zone de jeu -->
<div class="game-container">
<!-- Score et niveau -->
<div class="row g-3 mb-4">
<div class="col-6">
<div class="score-card">
<i class="bi bi-trophy fs-3"></i>
<h2 class="mb-0" id="score">0</h2>
<small>Score</small>
</div>
</div>
<div class="col-6">
<div class="score-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<i class="bi bi-star fs-3"></i>
<h2 class="mb-0" id="bestScore">0</h2>
<small>Record</small>
</div>
</div>
</div>
<!-- Niveau actuel -->
<div class="text-center mb-4">
<div class="level-badge d-inline-block">
<i class="bi bi-arrow-up-circle"></i> Niveau <span id="level">1</span>
</div>
</div>
<!-- Boutons Simon -->
<div class="simon-board">
<button id="rouge" class="simon-btn btn-rouge" data-sound="rouge"></button>
<button id="vert" class="simon-btn btn-vert" data-sound="vert"></button>
<button id="bleu" class="simon-btn btn-bleu" data-sound="bleu"></button>
<button id="jaune" class="simon-btn btn-jaune" data-sound="jaune"></button>
</div>
<!-- Séquence à mémoriser -->
<div class="instruction mt-4">
<i class="bi bi-eye"></i>
<strong>Regarde la séquence :</strong>
<div id="sequenceDisplay" class="sequence-indicator mt-2">⚫ ⚫ ⚫ ⚫</div>
</div>
<!-- Contrôles -->
<div class="text-center mt-4">
<button id="startBtn" class="btn-play">
<i class="bi bi-play-fill"></i> Démarrer le jeu
</button>
<button id="resetBtn" class="btn-play ms-2" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);">
<i class="bi bi-arrow-repeat"></i> Réinitialiser
</button>
</div>
<!-- Statistiques de concentration -->
<div class="row mt-4 g-2 text-center">
<div class="col-4">
<div class="border rounded p-2 bg-light">
<i class="bi bi-check-circle text-success"></i>
<h5 id="successCount">0</h5>
<small>Réussites</small>
</div>
</div>
<div class="col-4">
<div class="border rounded p-2 bg-light">
<i class="bi bi-emoji-smile"></i>
<h5 id="sequenceLength">0</h5>
<small>Séquence</small>
</div>
</div>
<div class="col-4">
<div class="border rounded p-2 bg-light">
<i class="bi bi-lightbulb"></i>
<h5 id="concentration">100</h5>
<small>Concentration %</small>
</div>
</div>
</div>
</div>
<!-- Conseils pour la concentration -->
<div class="alert alert-info mt-4">
<i class="bi bi-info-circle"></i>
<strong>Conseils de concentration :</strong>
<ul class="mb-0 mt-2">
<li>🧘 Respire profondément avant de commencer</li>
<li>👀 Regarde attentivement chaque couleur</li>
<li>🧠 Répète mentalement la séquence</li>
<li>🎯 Ne te précipite pas, prends ton temps</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// Variables du jeu
let sequence = [];
let playerSequence = [];
let level = 1;
let score = 0;
let bestScore = localStorage.getItem('simonBestScore') || 0;
let successCount = 0;
let isPlaying = false;
let isPlayerTurn = false;
let concentration = 100;
// Sons (utilisation d'oscillateurs pour les notes)
const sounds = {
rouge: { frequency: 261.63, note: 'Do' }, // Do
vert: { frequency: 329.63, note: 'Mi' }, // Mi
bleu: { frequency: 392.00, note: 'Sol' }, // Sol
jaune: { frequency: 523.25, note: 'Do' } // Do aigu
};
// Éléments HTML
const rougeBtn = document.getElementById('rouge');
const vertBtn = document.getElementById('vert');
const bleuBtn = document.getElementById('bleu');
const jauneBtn = document.getElementById('jaune');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const scoreElement = document.getElementById('score');
const bestScoreElement = document.getElementById('bestScore');
const levelElement = document.getElementById('level');
const successCountElement = document.getElementById('successCount');
const sequenceLengthElement = document.getElementById('sequenceLength');
const concentrationElement = document.getElementById('concentration');
const sequenceDisplay = document.getElementById('sequenceDisplay');
// Afficher le meilleur score
bestScoreElement.textContent = bestScore;
// Jouer un son
function playSound(color, duration = 300) {
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.value = sounds[color].frequency;
oscillator.type = 'sine';
gainNode.gain.value = 0.3;
oscillator.start();
setTimeout(() => {
oscillator.stop();
audioContext.close();
}, duration);
} catch (e) {
console.log('Son non disponible');
}
}
// Animer un bouton
function animateButton(buttonId) {
const button = document.getElementById(buttonId);
button.classList.add('active');
setTimeout(() => {
button.classList.remove('active');
}, 300);
}
// Jouer la séquence
async function playSequence() {
isPlayerTurn = false;
const buttons = ['rouge', 'vert', 'bleu', 'jaune'];
for (let i = 0; i < sequence.length; i++) {
await new Promise(resolve => {
setTimeout(() => {
const color = sequence[i];
animateButton(color);
playSound(color);
resolve();
}, i * 600);
});
}
// Mettre à jour l'affichage de la séquence
const sequenceSymbols = sequence.map(color => {
switch(color) {
case 'rouge': return '🔴';
case 'vert': return '🟢';
case 'bleu': return '🔵';
case 'jaune': return '🟡';
default: return '⚫';
}
});
sequenceDisplay.innerHTML = sequenceSymbols.join(' ') || '⚫ ⚫ ⚫ ⚫';
setTimeout(() => {
isPlayerTurn = true;
playerSequence = [];
sequenceLengthElement.textContent = sequence.length;
}, 500);
}
// Ajouter une nouvelle couleur à la séquence
function addToSequence() {
const colors = ['rouge', 'vert', 'bleu', 'jaune'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
sequence.push(randomColor);
}
// Vérifier la réponse du joueur
function checkPlayerMove(color) {
if (!isPlayerTurn || !isPlaying) return;
// Animation et son
animateButton(color);
playSound(color, 200);
// Ajouter à la séquence du joueur
playerSequence.push(color);
// Vérifier si la couleur est correcte
const currentIndex = playerSequence.length - 1;
if (playerSequence[currentIndex] !== sequence[currentIndex]) {
// Erreur
gameOver();
return;
}
// Vérifier si le joueur a fini la séquence
if (playerSequence.length === sequence.length) {
// Succès !
success();
}
}
// Succès - passer au niveau suivant
function success() {
isPlayerTurn = false;
successCount++;
score += sequence.length * 10;
level++;
concentration = Math.min(100, concentration + 5);
// Mettre à jour l'affichage
scoreElement.textContent = score;
levelElement.textContent = level;
successCountElement.textContent = successCount;
concentrationElement.textContent = concentration;
// Mettre à jour le meilleur score
if (score > bestScore) {
bestScore = score;
bestScoreElement.textContent = bestScore;
localStorage.setItem('simonBestScore', bestScore);
}
// Ajouter une nouvelle couleur
addToSequence();
// Jouer la nouvelle séquence
setTimeout(() => {
playSequence();
}, 1000);
}
// Game Over
function gameOver() {
isPlaying = false;
isPlayerTurn = false;
concentration = Math.max(0, concentration - 20);
concentrationElement.textContent = concentration;
// Animation d'erreur
document.body.classList.add('wrong-flash');
setTimeout(() => {
document.body.classList.remove('wrong-flash');
}, 300);
// Désactiver les boutons
const buttons = [rougeBtn, vertBtn, bleuBtn, jauneBtn];
buttons.forEach(btn => {
btn.style.opacity = '0.5';
btn.disabled = true;
});
// Afficher message
setTimeout(() => {
alert(`💀 Game Over ! 💀\n\nScore : ${score}\nNiveau atteint : ${level}\nSéquence réussie : ${successCount}\nConcentration : ${concentration}%\n\nClique sur "Démarrer" pour rejouer !`);
}, 100);
}
// Démarrer le jeu
function startGame() {
// Réinitialiser toutes les variables
sequence = [];
playerSequence = [];
level = 1;
score = 0;
successCount = 0;
concentration = 100;
isPlaying = true;
// Mettre à jour l'affichage
scoreElement.textContent = score;
levelElement.textContent = level;
successCountElement.textContent = successCount;
concentrationElement.textContent = concentration;
sequenceDisplay.innerHTML = '⚫ ⚫ ⚫ ⚫';
sequenceLengthElement.textContent = '0';
// Activer les boutons
const buttons = [rougeBtn, vertBtn, bleuBtn, jauneBtn];
buttons.forEach(btn => {
btn.style.opacity = '1';
btn.disabled = false;
});
// Première couleur
addToSequence();
// Jouer la séquence
setTimeout(() => {
playSequence();
}, 500);
}
// Réinitialiser complètement
function resetGame() {
if (isPlaying) {
isPlaying = false;
isPlayerTurn = false;
}
sequence = [];
playerSequence = [];
level = 1;
score = 0;
successCount = 0;
concentration = 100;
scoreElement.textContent = score;
levelElement.textContent = level;
successCountElement.textContent = successCount;
concentrationElement.textContent = concentration;
sequenceDisplay.innerHTML = '⚫ ⚫ ⚫ ⚫';
sequenceLengthElement.textContent = '0';
const buttons = [rougeBtn, vertBtn, bleuBtn, jauneBtn];
buttons.forEach(btn => {
btn.style.opacity = '0.5';
btn.disabled = true;
});
}
// Écouteurs d'événements
rougeBtn.addEventListener('click', () => checkPlayerMove('rouge'));
vertBtn.addEventListener('click', () => checkPlayerMove('vert'));
bleuBtn.addEventListener('click', () => checkPlayerMove('bleu'));
jauneBtn.addEventListener('click', () => checkPlayerMove('jaune'));
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
// Désactiver les boutons au départ
resetGame();
// Message de bienvenue
setTimeout(() => {
alert('🧠 Simon Says - Jeu de Concentration !\n\nComment jouer :\n1. Mémorise la séquence de couleurs\n2. Répète-la dans le même ordre\n3. Chaque niveau ajoute une couleur\n4. Concentre-toi et bat ton record !');
}, 500);
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Télécharger le fichier source