L'IA comme outil de création de jeux web : enseigner aux écoliers
Les écoliers avaient déjà maîtrisé les bases du HTML et du CSS. Avant d'utiliser l'IA, ils devaient développer la compétence de lire le code des autres. La tâche : ouvrir un fichier avec des commentaires, modifier la valeur de background-color sur une ligne spécifiée, enregistrer et rafraîchir la page dans le navigateur. Cette approche relie rapidement les modifications de code aux résultats visuels, réduisant la peur des sources inconnues.
Ensuite, ils sont passés au prototypage sur papier. Ils ont choisi une mécanique de jeu de type Whac-A-Mole avec personnalisation : au lieu d'objets standards, des photos des élèves dans un état normal et avec les joues gonflées lorsqu'activées.
Logique du jeu et choix de la pile technologique
Éléments clés de la mécanique :
Google AdInline article slot
- Une grille de cellules (trous) de 3×3.
- Apparition aléatoire d'une image active toutes les 5 secondes.
- La vitesse augmente à chaque cycle.
- Cliquer sur une cellule active la ramène à la normale.
- Condition de défaite : les 9 cellules actives simultanément — l'entrée est bloquée pendant 5 secondes, clignotement, fenêtre modale pour redémarrer.
Pile technologique : HTML pur, CSS, JavaScript dans un seul fichier. Avantages pédagogiques :
- Aucune configuration d'environnement — seul un navigateur est nécessaire.
- Retour instantané avec F5.
- Portabilité totale : un fichier HTML fonctionne partout.
Pour le prototype, ils ont utilisé des images de chatons : base et réaction (générées par IA via prompt).
Création d'un prompt efficace
L'IA est perçue comme un outil d'exécution nécessitant une description détaillée. Avec les enfants, ils ont composé un prompt pour Gemini :
Google AdInline article slot
Détails :
- Rôle : développeur frontend expérimenté.
- Jeu : analogue à Whac-A-Mole avec photos (normales et joues gonflées).
- Style : fond clair, centré.
- Terrain : panneau blanc 3×3 avec coins arrondis et ombre.
- Cellules : 9 images avec effet de pression, adaptées aux mobiles.
- 18 fichiers : photo1_normal.jpg ... photo9_highlighted.jpg.
- Logique : minuteries, accélération, fin de jeu, modal avec flou.
- Exigences : fichier unique, JS moderne, commentaires, pas de surbrillance mobile.
Résultat : code de jeu prêt
L'IA a livré un prototype fonctionnel en quelques secondes. Après des ajustements minimes, la version finale était prête. Le code utilise des variables CSS, Flexbox/Grid, backdrop-filter, des transitions modernes et des media queries.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatons !</title>
<style>
/* Variables pour ajuster facilement les tailles et couleurs en un seul endroit */
:root {
--bg-color: #f0f2f5;
--grid-gap: 15px;
--cell-size: 180px;
--text-color: #333;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--bg-color);
font-family: 'Segoe UI', Tahoma, sans-serif;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.main-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.instructions {
text-align: center;
color: var(--text-color);
font-size: 1.8rem;
line-height: 1.4;
margin-bottom: 25px;
font-weight: 500;
}
.game-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: var(--grid-gap);
padding: 20px;
background: white;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
position: relative;
}
.game-container.disabled {
pointer-events: none;
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
overflow: hidden;
border-radius: 16px;
cursor: pointer;
transition: transform 0.1s ease;
background: #f9f9f9;
}
.cell:active {
transform: scale(0.96);
}
.cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.01);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
justify-content: center;
align-items: center;
z-index: 100;
}
.modal-content {
background: white;
padding: 50px;
border-radius: 30px;
text-align: center;
box-shadow: 0 15px 60px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.3);
}
.modal-content h2 {
margin: 0 0 30px 0;
font-size: 28px;
color: #222;
}
.modal-content button {
background: #222;
color: white;
border: none;
padding: 16px 50px;
font-size: 18px;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.modal-content button:hover {
background: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (max-width: 650px) {
:root {
--cell-size: 28vw;
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<div class="instructions">Cliquez sur les chatons aux joues gonflées !</div>
<div class="game-container" id="gameContainer">
<!-- 9 cellules seront générées par JS -->
</div>
</div>
<div id="modal">
<div class="modal-content">
<h2>😿 Tous les chatons ont les joues gonflées !</h2>
<p>Essayer à nouveau ?</p>
<button onclick="resetGame()">Oui !</button>
</div>
</div>
<script>
let gameActive = true;
let activeCell = null;
let intervalId = null;
let speed = 5000;
let highlightedCount = 0;
const cells = [];
const totalCells = 9;
const images = {
1: { normal: 'photo1_normal.jpg', highlighted: 'photo1_highlighted.jpg' },
2: { normal: 'photo2_normal.jpg', highlighted: 'photo2_highlighted.jpg' },
// ... jusqu'à 9
};
function initGame() {
const container = document.getElementById('gameContainer');
container.innerHTML = '';
cells.length = 0;
highlightedCount = 0;
for (let i = 1; i <= totalCells; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
const img = document.createElement('img');
img.src = images[i].normal;
img.alt = `Chaton ${i}`;
cell.appendChild(img);
cell.addEventListener('click', handleClick);
container.appendChild(cell);
cells.push(cell);
}
startGameLoop();
}
function startGameLoop() {
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (!gameActive || highlightedCount >= totalCells) return;
const availableCells = cells.filter(cell => !cell.classList.contains('highlighted'));
if (availableCells.length === 0) return;
const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
activateCell(randomCell);
}, speed);
}
function activateCell(cell) {
cell.classList.add('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].highlighted;
highlightedCount++;
if (highlightedCount >= totalCells) {
gameOver();
}
}
function handleClick(e) {
const cell = e.currentTarget;
if (!cell.classList.contains('highlighted') || !gameActive) return;
cell.classList.remove('highlighted');
const img = cell.querySelector('img');
img.src = images[parseInt(cell.dataset.index)].normal;
highlightedCount--;
}
function gameOver() {
gameActive = false;
clearInterval(intervalId);
const container = document.getElementById('gameContainer');
container.classList.add('disabled');
const blinkInterval = setInterval(() => {
cells.forEach(cell => {
const img = cell.querySelector('img');
const index = parseInt(cell.dataset.index);
img.src = cell.classList.contains('blinking') ?
images[index].normal : images[index].highlighted;
cell.classList.toggle('blinking');
});
}, 500);
setTimeout(() => {
clearInterval(blinkInterval);
document.getElementById('modal').style.display = 'flex';
}, 5000);
}
function resetGame() {
document.getElementById('modal').style.display = 'none';
document.getElementById('gameContainer').classList.remove('disabled');
speed = Math.max(1000, speed - 500);
gameActive = true;
initGame();
}
window.addEventListener('load', initGame);
</script>
</body>
</html>Points clés à retenir
- Les prompts détaillés accélèrent la génération : Spécifier le rôle, le style, la mécanique et les exigences de code donne un prototype fonctionnel en quelques secondes.
- Lire le code avant l'IA : Les compétences d'analyse de base abaissent la barrière à l'expérimentation.
- Prototypage sur papier : Visualiser la logique avant le codage simplifie la tâche pour l'IA.
- Fichier unique pour tout : Idéal pour l'apprentissage et la distribution.
- Réactivité et effets : CSS Grid, variables, backdrop-filter assurent une UX moderne.
— Editorial Team
Google AdInline article slot
Aucun commentaire pour le moment.