Scan to open on your phone
Point a camera at the QR code - it opens this exact paste, no app needed.
https://codepastes.com/zzgtcwh49ypx8kd3sans-titrePlain Text
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Premier Jeu Vidéo</title>
<style>
body {
margin: 0;
background: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: white;
font-family: sans-serif;
}
canvas {
border: 4px solid #fff;
background: #000;
}
</style>
</head>
<body>
<canvas id="jeuCanvas" width="400" height="500"></canvas>
<script>
const canvas = document.getElementById("jeuCanvas");
const ctx = canvas.getContext("2d");
// Propriétés du joueur (Carré bleu)
const joueur = {
x: 180,
y: 440,
taille: 40,
vitesse: 7,
couleur: "#00BCFF"
};
// Propriétés de l'ennemi (Bloc rouge)
const ennemi = {
x: Math.random() * (canvas.width - 40),
y: 0,
taille: 40,
vitesse: 4,
couleur: "#FF4136"
};
let score = 0;
let touches = {};
// Détection des touches du clavier
window.addEventListener("keydown", (e) => touches[e.code] = true);
window.addEventListener("keyup", (e) => touches[e.code] = false);
// Boucle principale du jeu
function mettreAJour() {
// Déplacement du joueur
if (touches["ArrowLeft"] && joueur.x > 0) {
joueur.x -= joueur.vitesse;
}
if (touches["ArrowRight"] && joueur.x < canvas.width - joueur.taille) {
joueur.x += joueur.vitesse;
}
// Déplacement de l'ennemi
ennemi.y += ennemi.vitesse;
// Si l'ennemi sort de l'écran, on réinitialise sa position et on augmente le score
if (ennemi.y > canvas.height) {
ennemi.y = 0;
ennemi.x = Math.random() * (canvas.width - ennemi.taille);
score++;
ennemi.vitesse += 0.3; // Le jeu accélère progressivement !
}
// Détection des collisions (Hitbox)
if (
joueur.x < ennemi.x + ennemi.taille &&
joueur.x + joueur.taille > ennemi.x &&
joueur.y < ennemi.y + ennemi.taille &&
joueur.y + joueur.taille > ennemi.y
) {
// Game Over : Réinitialisation
alert("Game Over ! Votre score : " + score);
score = 0;
ennemi.vitesse = 4;
ennemi.y = 0;
ennemi.x = Math.random() * (canvas.width - ennemi.taille);
joueur.x = 180;
}
dessiner();
requestAnimationFrame(mettreAJour);
}
// Affichage graphique
function dessiner() {
// Effacer l'écran précédent
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Dessiner le joueur
ctx.fillStyle = joueur.couleur;
ctx.fillRect(joueur.x, joueur.y, joueur.taille, joueur.taille);
// Dessiner l'ennemi
ctx.fillStyle = ennemi.couleur;
ctx.fillRect(ennemi.x, ennemi.y, ennemi.taille, ennemi.taille);
// Dessiner le score
ctx.fillStyle = "#FFF";
ctx.font = "20px sans-serif";
ctx.fillText("Score : " + score, 15, 30);
}
// Lancer le jeu
mettreAJour();
</script>
</body>
</html>
3,295 chars · codepastes.com