Esquive Rapide
About this app
Jeu rapide d'esquive où le joueur doit éviter les obstacles pour obtenir un score élevé.
Esquive Rapide Game Over! 🎮 Rejouer
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esquive Rapide</title>
<meta name="description" content="Jeu rapide d'esquive où le joueur doit éviter les obstacles pour obtenir un score élevé.">
<meta name="keywords" content="jeu, esquive, rapide, obstacles, score, HTML5, JavaScript">
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top, #76b852, #8DC26F);
}
canvas {
border: 5px solid #333;
border-radius: 10px;
}
#gameOverScreen {
display: none;
position: absolute;
background-color: rgba(255,255,255,0.9);
border-radius: 10px;
padding: 20px;
text-align: center;
}
button {
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<div id="gameOverScreen">
<h2>Game Over! 🎮</h2>
<p id="finalScore"></p>
<button id="restartButton">Rejouer</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = { x: canvas.width / 2, y: canvas.height - 30, width: 30, height: 30, color: '#FFD700' };
const obstacles = [];
const obstacleFrequency = 1500; // milliseconds
let score = 0;
let gameInterval;
let obstacleInterval;
let isGameOver = false;
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function addObstacle() {
obstacles.push({
x: Math.random() * (canvas.width - 20),
y: -20,
width: 20,
height: 20,
color: '#FF0000',
speed: 3
});
}
function drawObstacles() {
obstacles.forEach(obstacle => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
function updateObstacles() {
for (let i = obstacles.length -1; i >= 0; i--) {
obstacles[i].y += obstacles[i].speed;
// Check for collision with player
if (player.x < obstacles[i].x + obstacles[i].width &&
player.x + player.width > obstacles[i].x &&
player.y < obstacles[i].y + obstacles[i].height &&
player.y + player.height > obstacles[i].y) {
gameOver();
}
// Remove off-screen obstacles
if (obstacles[i].y > canvas.height) {
obstacles.splice(i, 1);
score++;
}
}
}
function gameOver() {
clearInterval(gameInterval);
clearInterval(obstacleInterval);
document.getElementById('finalScore').textContent = `Score final: ${score}`;
document.getElementById('gameOverScreen').style.display = 'block';
isGameOver = true;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawObstacles();
updateObstacles();
ctx.fillStyle = 'white';
ctx.fillText(`Score: ${score}`, 10, 20);
}
function restartGame() {
score = 0;
obstacles.length = 0;
isGameOver = false;
document.getElementById('gameOverScreen').style.display = 'none';
gameInterval = setInterval(gameLoop, 20);
obstacleInterval = setInterval(addObstacle, obstacleFrequency);
}
document.getElementById('restartButton').addEventListener('click', restartGame);
// Move player with mouse
canvas.addEventListener('mousemove', function(event) {
if (!isGameOver) {
const rect = canvas.getBoundingClientRect();
player.x = event.clientX - rect.left - player.width / 2;
}
});
// Start the game
restartGame();
// Set font for score display
ctx.font = '16px Arial';
</script>
</body>
</html>
NEW APPS
These are apps made by the community!