fgouin2014/index.html

## index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RRS - HTML5 Game</title>
    <style>
        body {
            background-color: #333;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            color: #fff;
        }

        /* Style pour la marquise */
        #marqueeSection {
            background-color: #222;
            width: 100%;
            padding: 10px 0;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee {
            color: #fff;
            font-size: 20px;
            animation: marquee 15s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        /* Style pour le game screen */
        #gameScreenSection {
            position: relative;
            margin-top: 20px;
            width: 100%;
            max-width: 400px; /* Largeur maximale du game screen */
        }

        canvas {
            display: block;
            background-color: #000;
            border: 2px solid #fff;
            width: 100%;
            max-width: 100%;
        }

        /* Style pour le controls panel */
        #controlsPanelSection {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .button {
            width: 60px;
            height: 60px;
            border: none;
            border-radius: 50%;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            margin: 10px; /* Espacement entre les boutons */
            background-color: #333; /* Couleur de fond pour les boutons */
        }

        .button:active {
            opacity: 0.7; /* Opacité réduite lors du clic */
        }

        .button.red {
            background-color: #FF5733;
        }

        .button.blue {
            background-color: #3498DB;
        }

        .button.yellow {
            background-color: #F1C40F;
        }

        .button.green {
            background-color: #27AE60;
        }

        /* Style pour le start button */
        #startButtonSection {
            margin-top: 20px;
        }

        .start-button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .start-button:active {
            opacity: 0.7; /* Opacité réduite lors du clic */
        }
    </style>
</head>
<body>
    <div id="marqueeSection">
        <div class="marquee">RRS - HTML5 Game</div>
    </div>

    <div id="gameScreenSection">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
    </div>

    <div id="controlsPanelSection" class="controls-container">
        <button class="button red" onclick="buttonClicked(this)">A</button>
        <button class="button blue" onclick="buttonClicked(this)">B</button>
        <button class="button yellow" onclick="buttonClicked(this)">X</button>
        <button class="button green" onclick="buttonClicked(this)">Y</button>
    </div>

    <div id="startButtonSection">
        <div class="start-button" id="startButton" onclick="startGame()">Start</div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const buttons = ['A', 'B', 'X', 'Y'];
        let sequence = [];

        function drawSequence() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '30px Arial';
            ctx.fillStyle = '#fff';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            const buttonRadius = 40;
            const buttonSpacing = 100;
            const totalWidth = sequence.length * buttonSpacing - (buttonSpacing - buttonRadius * 2);

            const startX = (canvas.width - totalWidth) / 2 + buttonRadius;

            // Dessine chaque bouton de la séquence sur le canvas
            sequence.forEach((button, index) => {
                ctx.beginPath();
                ctx.fillStyle = getButtonColor(button); // Fonction pour obtenir la couleur du bouton
                ctx.arc(startX + index * buttonSpacing, canvas.height / 2, buttonRadius, 0, Math.PI * 2);
                ctx.fill();
                ctx.fillStyle = '#fff';
                ctx.fillText(button, startX + index * buttonSpacing, canvas.height / 2);

                // Ajoute le "+" s'il y a plus d'un bouton dans la séquence
                if (index < sequence.length - 1) {
                    ctx.fillText("+", startX + index * buttonSpacing + buttonRadius + 10, canvas.height / 2);
                }
            });
        }

        function getButtonColor(button) {
            switch (button) {
                case 'A':
                    return '#FF5733'; // Rouge
                case 'B':
                    return '#3498DB'; // Bleu
                case 'X':
                    return '#F1C40F'; // Jaune
                case 'Y':
                    return '#27AE60'; // Vert
                default:
                    return '#333'; // Couleur par défaut
            }
        }

        function buttonClicked(button) {
            // Ajoutez ici toute la logique souhaitée lorsque le bouton est cliqué
            console.log('Bouton cliqué:', button.textContent);
            // Exemple : Vous pouvez ajouter du code pour déclencher des actions ou des effets visuels ici
        }

        function startGame() {
            console.log('Jeu démarré !');
            document.getElementById('startButton').style.backgroundColor = '#45a049'; // Changement de couleur
            generateRandomSequence();
            setInterval(generateRandomSequence, 3000); // Change la séquence toutes les 3 secondes
        }

        function generateRandomSequence() {
            const sequenceLength = Math.floor(Math.random() * 4) + 1; // Longueur de séquence aléatoire entre 1 et 4
            sequence = Array.from({ length: sequenceLength }, () => buttons[Math.floor(Math.random() * buttons.length)]);
            drawSequence();
        }

        // Dessine la séquence initiale au chargement de la page
        drawSequence();

        // Réagir aux changements de taille de l'écran
        window.addEventListener('resize', drawSequence);
    </script>
</body>
</html>

## rrsv1-03.markdown

      
    Raw
  

              rrsv1-03.markdown
            
          
    RRSv1.03

A Pen by fgouin2014 on CodePen.
License.

  
## style.css
body {
    background-color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #fff;
}

/* Styles pour la marquise */
#marqueeSection {
    background-color: #222;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}

.marquee {
    color: #fff;
    font-size: 20px;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Styles pour l'écran de jeu */
#gameScreenSection {
    position: relative;
    margin-top: 20px;
    width: 100%;
    max-width: 400px; /* Largeur maximale du game screen */
}

canvas {
    display: block;
    background-color: #000;
    border: 2px solid #fff;
    width: 100%;
    max-width: 100%;
}

/* Styles pour le panneau de contrôles */
#controlsPanelSection {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.button {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    margin: 10px; /* Espacement entre les boutons */
    background-color: #333; /* Couleur de fond pour les boutons */
}

.button:active {
    opacity: 0.7; /* Opacité réduite lors du clic */
}

.button.red {
    background-color: #FF5733;
}

.button.blue {
    background-color: #3498DB;
}

.button.yellow {
    background-color: #F1C40F;
}

.button.green {
    background-color: #27AE60;
}

/* Styles pour le bouton de démarrage */
#startButtonSection {
    margin-top: 20px;
}

.start-button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.start-button:active {
    opacity: 0.7; /* Opacité réduite lors du clic */
}
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RRS - HTML5 Game</title>
	<style>
	body {
	background-color: #333;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	font-family: Arial, sans-serif;
	color: #fff;
	}

	/* Style pour la marquise */
	#marqueeSection {
	background-color: #222;
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	}

	.marquee {
	color: #fff;
	font-size: 20px;
	animation: marquee 15s linear infinite;
	}

	@keyframes marquee {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
	}

	/* Style pour le game screen */
	#gameScreenSection {
	position: relative;
	margin-top: 20px;
	width: 100%;
	max-width: 400px; /* Largeur maximale du game screen */
	}

	canvas {
	display: block;
	background-color: #000;
	border: 2px solid #fff;
	width: 100%;
	max-width: 100%;
	}

	/* Style pour le controls panel */
	#controlsPanelSection {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	}

	.button {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	margin: 10px; /* Espacement entre les boutons */
	background-color: #333; /* Couleur de fond pour les boutons */
	}

	.button:active {
	opacity: 0.7; /* Opacité réduite lors du clic */
	}

	.button.red {
	background-color: #FF5733;
	}

	.button.blue {
	background-color: #3498DB;
	}

	.button.yellow {
	background-color: #F1C40F;
	}

	.button.green {
	background-color: #27AE60;
	}

	/* Style pour le start button */
	#startButtonSection {
	margin-top: 20px;
	}

	.start-button {
	background-color: #4CAF50;
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}

	.start-button:active {
	opacity: 0.7; /* Opacité réduite lors du clic */
	}
	</style>
	</head>
	<body>
	<div id="marqueeSection">
	<div class="marquee">RRS - HTML5 Game</div>
	</div>

	<div id="gameScreenSection">
	<canvas id="gameCanvas" width="400" height="400"></canvas>
	</div>

	<div id="controlsPanelSection" class="controls-container">
	<button class="button red" onclick="buttonClicked(this)">A</button>
	<button class="button blue" onclick="buttonClicked(this)">B</button>
	<button class="button yellow" onclick="buttonClicked(this)">X</button>
	<button class="button green" onclick="buttonClicked(this)">Y</button>
	</div>

	<div id="startButtonSection">
	<div class="start-button" id="startButton" onclick="startGame()">Start</div>
	</div>

	<script>
	const canvas = document.getElementById('gameCanvas');
	const ctx = canvas.getContext('2d');
	const buttons = ['A', 'B', 'X', 'Y'];
	let sequence = [];

	function drawSequence() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.font = '30px Arial';
	ctx.fillStyle = '#fff';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';

	const buttonRadius = 40;
	const buttonSpacing = 100;
	const totalWidth = sequence.length * buttonSpacing - (buttonSpacing - buttonRadius * 2);

	const startX = (canvas.width - totalWidth) / 2 + buttonRadius;

	// Dessine chaque bouton de la séquence sur le canvas
	sequence.forEach((button, index) => {
	ctx.beginPath();
	ctx.fillStyle = getButtonColor(button); // Fonction pour obtenir la couleur du bouton
	ctx.arc(startX + index * buttonSpacing, canvas.height / 2, buttonRadius, 0, Math.PI * 2);
	ctx.fill();
	ctx.fillStyle = '#fff';
	ctx.fillText(button, startX + index * buttonSpacing, canvas.height / 2);

	// Ajoute le "+" s'il y a plus d'un bouton dans la séquence
	if (index < sequence.length - 1) {
	ctx.fillText("+", startX + index * buttonSpacing + buttonRadius + 10, canvas.height / 2);
	}
	});
	}

	function getButtonColor(button) {
	switch (button) {
	case 'A':
	return '#FF5733'; // Rouge
	case 'B':
	return '#3498DB'; // Bleu
	case 'X':
	return '#F1C40F'; // Jaune
	case 'Y':
	return '#27AE60'; // Vert
	default:
	return '#333'; // Couleur par défaut
	}
	}

	function buttonClicked(button) {
	// Ajoutez ici toute la logique souhaitée lorsque le bouton est cliqué
	console.log('Bouton cliqué:', button.textContent);
	// Exemple : Vous pouvez ajouter du code pour déclencher des actions ou des effets visuels ici
	}

	function startGame() {
	console.log('Jeu démarré !');
	document.getElementById('startButton').style.backgroundColor = '#45a049'; // Changement de couleur
	generateRandomSequence();
	setInterval(generateRandomSequence, 3000); // Change la séquence toutes les 3 secondes
	}

	function generateRandomSequence() {
	const sequenceLength = Math.floor(Math.random() * 4) + 1; // Longueur de séquence aléatoire entre 1 et 4
	sequence = Array.from({ length: sequenceLength }, () => buttons[Math.floor(Math.random() * buttons.length)]);
	drawSequence();
	}

	// Dessine la séquence initiale au chargement de la page
	drawSequence();

	// Réagir aux changements de taille de l'écran
	window.addEventListener('resize', drawSequence);
	</script>
	</body>
	</html>