Un petit jeu pour vous

Html
<div id="game">
<div id="player"></div>
</div>
<div id="score">Score: 0 | Niveau: 1</div>

Css
body {
margin: 0;
overflow: hidden;
background: #1e1e2f;
font-family: sans-serif;
color: white;
}
#game {
position: relative;
width: 100vw;
height: 100vh;
}
#player {
position: absolute;
bottom: 50px;
left: 50%;
width: 50px;
height: 50px;
border-radius: 10px;
transform: translateX(-50%);
background: cyan;
}
.obstacle {
position: absolute;
width: 50px;
height: 50px;
border-radius: 5px;
}
#score {
position: fixed;
top: 10px;
left: 10px;
font-size: 24px;
}

Js
const player = document.getElementById('player');
const game = document.getElementById('game');
const scoreEl = document.getElementById('score');

let playerX = window.innerWidth/2 - 25;
let obstacles = [];
let score = 0;
let level = 1;
let speed = 2;
let touchX = null;

// Skins débloqués et leur niveau requis
const skins = [
{ level: 1, color: 'cyan' },
{ level: 5, color: 'red' },
{ level: 10, color: 'green' },
{ level: 15, color: 'purple' },
{ level: 20, color: 'linear-gradient(90deg, red, orange, yellow, green, blue, violet)' }
];

// Déplacement tactile
document.addEventListener('touchmove', (e) => {
touchX = e.touches[0].clientX;
});

// Création d'obstacles
function createObstacle() {
const obs = document.createElement('div');
obs.classList.add('obstacle');
obs.style.left = Math.random() * (window.innerWidth - 50) + 'px';
obs.style.top = '-50px';
// Couleur aléatoire
const colors = ['red','orange','yellow','magenta','pink'];
obs.style.background = colors[Math.floor(Math.random()*colors.length)];
game.appendChild(obs);
obstacles.push(obs);
}

// Mise à jour obstacles
function updateObstacles() {
for (let i = obstacles.length -1; i >= 0; i--) {
let obs = obstacles[i];
let y = parseInt(obs.style.top);
y += speed;
obs.style.top = y + 'px';

// Collision
const obsRect = obs.getBoundingClientRect();
const playerRect = player.getBoundingClientRect();
if (!(playerRect.right < obsRect.left ||
playerRect.left > obsRect.right ||
playerRect.bottom < obsRect.top ||
playerRect.top > obsRect.bottom)) {
alert(`Game Over ! Score: ${score} | Niveau: ${level}`);
location.reload();
}

// Obstacle passé ?
if (y > window.innerHeight) {
obstacles.splice(i,1);
obs.remove();
score++;

// Passage niveau tous les 10 points
if (score % 10 === 0) {
level++;
speed += 0.5;
document.body.style.background = `hsl(${Math.random()*360}, 50%, 15%)`;
}
scoreEl.innerText = `Score: ${score} | Niveau: ${level}`;
}
}
}

// Déplacer le joueur et changer skin selon niveau
function updatePlayer() {
if (touchX !== null) {
playerX = touchX - 25;
if (playerX < 0) playerX = 0;
if (playerX > window.innerWidth - 50) playerX = window.innerWidth - 50;
}
player.style.left = playerX + 'px';

// Changer skin selon niveau
let currentSkin = skins[0].color;
for (let i = skins.length -1; i >= 0; i--) {
if (level >= skins[i].level) {
currentSkin = skins[i].color;
break;
}
}
player.style.background = currentSkin;
}

// Boucle de jeu
function gameLoop() {
// Plus d’obstacles à niveaux élevés
let chance = 0.01 + level*0.005;
if (Math.random() < chance) createObstacle();

updateObstacles();
updatePlayer();
requestAnimationFrame(gameLoop);
}

gameLoop();