M-binary
Tu t’ennuies pendant une réunion Zoom soporifique ? Tu veux prouver à tes potes que tu sais coder un jeu sans Unity ni Unreal Engine ? Oublie les gros moteurs AAA : avec un peu de JavaScript, un <canvas> et deux neurones, tu peux coder ton propre mini-jeu jouable au clavier et au tactile. Oui, même sur ton vieux smartphone qui rame plus qu’un PC sous Windows 95.
🚀 Le concept : “Attrape la banane !”
Imagine Pac-Man, mais sans les fantômes flippants. Ici, ton perso est un petit carré cyan qui doit courir après une banane jaune. Chaque fois que tu la touches, tu gagnes un point et la banane réapparaît ailleurs. Simple, efficace, et assez addictif pour flinguer ta pause café.
Et la cerise sur le gâteau 🍒 : ça marche au clavier et avec des boutons tactiles intégrés à l’écran. Oui, tu peux te la jouer gamer mobile sur ton site web !
Comment ça marche (promis, c’est simple)
/Le terrain de jeu/ : un <canvas> noir bien sombre, digne d’une console rétro.
/Le héros/ : un carré cyan (parce qu’on n’avait pas de budget pour Mario).
/L’ennemi/objectif/ : une banane jaune, générée aléatoirement.
/Les contrôles/ :
Clavier : flèches directionnelles.
Tactile : un mini-pad façon Game Boy avec ↑ ↓ ← →.
/La logique :/
Tu bouges ton carré → il chasse la banane.
Tu touches la banane → +1 au score, nouvelle banane pop.
Tu continues jusqu’à exploser le compteur… ou tes nerfs.
🧑💻 Le code, façon fast-food
Voici la recette magique :
/HTML/ : le canvas + des boutons tactiles.
/CSS/ : un style sombre qui sent le cyberpunk.
/JS/ : une boucle infinie (requestAnimationFrame) qui anime ton carré, déplace la banane et gère les collisions.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mini Jeu JS Tactile</title>
<style>
body { background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
canvas { background: #222; display: block; margin-bottom: 10px; width: 80%;}
.controls { display: grid; grid-template-columns: repeat(3, 60px); gap: 10px; }
button { width: 60px; height: 60px; font-size: 20px; border: none; border-radius: 10px; background: #555; color: white; }
button:active { background: #888; }
</style>
</head>
<body>
<canvas id="game" width="500" height="400"></canvas>
<div class="controls">
<div></div>
<button id="up">↑</button>
<div></div>
<button id="left">←</button>
<div></div>
<button id="right">→</button>
<div></div>
<button id="down">↓</button>
<div></div>
</div>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let player = { x: 50, y: 50, size: 20, speed: 5 };
let banana = { x: 200, y: 150, size: 15 };
let score = 0;
let keys = {};
// Déplacements via clavier
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);
// Déplacements via tactile
document.getElementById("up").addEventListener("touchstart", () => keys["ArrowUp"] = true);
document.getElementById("up").addEventListener("touchend", () => keys["ArrowUp"] = false);
document.getElementById("down").addEventListener("touchstart", () => keys["ArrowDown"] = true);
document.getElementById("down").addEventListener("touchend", () => keys["ArrowDown"] = false);
document.getElementById("left").addEventListener("touchstart", () => keys["ArrowLeft"] = true);
document.getElementById("left").addEventListener("touchend", () => keys["ArrowLeft"] = false);
document.getElementById("right").addEventListener("touchstart", () => keys["ArrowRight"] = true);
document.getElementById("right").addEventListener("touchend", () => keys["ArrowRight"] = false);
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Déplacement joueur
if (keys["ArrowUp"]) player.y -= player.speed;
if (keys["ArrowDown"]) player.y += player.speed;
if (keys["ArrowLeft"]) player.x -= player.speed;
if (keys["ArrowRight"]) player.x += player.speed;
// Limites du canvas
if (player.x < 0) player.x = 0;
if (player.y < 0) player.y = 0;
if (player.x + player.size > canvas.width) player.x = canvas.width - player.size;
if (player.y + player.size > canvas.height) player.y = canvas.height - player.size;
// Dessin joueur
ctx.fillStyle = "cyan";
ctx.fillRect(player.x, player.y, player.size, player.size);
// Dessin banane
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(banana.x, banana.y, banana.size, 0, Math.PI 2);
ctx.fill();
// Collision
if (Math.abs(player.x - banana.x) < (player.size + banana.size)/2 &&
Math.abs(player.y - banana.y) < (player.size + banana.size)/2) {
score++;
banana.x = Math.random() (canvas.width - banana.size2) + banana.size;
banana.y = Math.random() (canvas.height - banana.size2) + banana.size;
}
// Score
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 10, 25);
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>
🤓 Pourquoi c’est cool
Tu apprends les bases du /canvas/ en JS.
Tu crées ton premier vrai /jeu web jouable/ (et responsive !).
Tu peux l’intégrer sur ton site perso et frimer devant tes potes devs.
Tu peux même le détourner : change la banane par un donut, un creeper de Minecraft, ou… un bug Jira 🐛.
Conclusion
Tu vois, pas besoin d’être un dev full-stack ninja pour coder un jeu. Avec 50 lignes de JavaScript, tu peux fabriquer un mini divertissement geek qui tourne partout, du PC au smartphone.
Alors, qu’attends-tu ? Copie-colle le code, modifie-le à ta sauce, et balance ton jeu sur ton site. Tes visiteurs vont kiffer. Et si quelqu’un dit “ouais mais c’est trop basique”, rappelle-lui que /Flappy Bird aussi était basique… et son créateur est devenu millionnaire 💸.