Jeu Cloud Jumper en HTML Canvas et JavaScript

94 dt420736

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu Cloud Jumper en HTML Canvas et JavaScript

Recommandé

17 December 2025

Clone du jeu Geometry Dash (HTML, CSS, JavaScript)

5 October 2025

Extrait d'animation de chargement CSS

9 October 2026

Scène de pièce 3D interactive avec Three.js et WebGL

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Endless Cloud Jumper</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
  }
  body {
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
  }
  #game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 480px;
    max-height: 800px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-radius: 12px;
    overflow: hidden;
  }
  canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  #ui {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    font-weight: 700;
  }
  .score-box {
    font-size: 24px;
  }
  .high-score {
    font-size: 14px;
    opacity: 0.85;
  }
  #game-over-screen {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px;
  }
  #game-over-screen h1 {
    font-size: 38px;
    margin-bottom: 8px;
    color: #ffd166;
    text-shadow: 0 4px 10px rgba(255, 209, 102, 0.3);
  }
  #game-over-screen p {
    font-size: 18px;
    margin-bottom: 24px;
    opacity: 0.9;
  }
  .btn {
    background: linear-gradient(135deg, #06d6a0, #118ab2);
    border: none;
    padding: 14px 32px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(6, 214, 160, 0.4);
    transition: transform 0.1s, box-shadow 0.1s;
    pointer-events: auto;
  }
  .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(6, 214, 160, 0.6);
  }
  .btn:active {
    transform: scale(0.98);
  }
  #instructions {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
</style>
</head>
<body>

<div id="game-container">
  <canvas id="canvas" width="480" height="800"></canvas>
  <div id="ui">
    <div>
      <div class="score-box" id="score">0 m</div>
      <div class="high-score" id="high-score">Best: 0 m</div>
    </div>
  </div>
  <div id="instructions">Use Left/Right Arrows, A/D, or Touch Sides to Move</div>
  
  <div id="game-over-screen">
    <h1>Game Over</h1>
    <p>You fell from the skies!<br><br>Altitude: <span id="final-score" style="font-weight:bold; color:#06d6a0;">0 m</span></p>
    <button class="btn" id="restart-btn">Jump Again</button>
  </div>
</div>

const WIDTH = 480;
  const HEIGHT = 800;
  const GRAVITY = 0.42;
  const JUMP_POWER = -11.5;
  const SUPER_JUMP_POWER = -17;

// Sound Synth via Web Audio API
  const AudioContext = window.AudioContext || window.webkitAudioContext;
  let audioCtx = null;

function initAudio() {
    if (!audioCtx) audioCtx = new AudioContext();
    if (audioCtx.state === 'suspended') audioCtx.resume();
  }

let keys = { left: false, right: false };
  let cameraY = 0;
  let highestY = 0;
  let score = 0;
  let highScore = parseInt(localStorage.getItem('cloud_high_score') || '0', 10);
  highScoreEl.innerText = `Best: ${highScore} m`;

let isGameOver = false;
  let platforms = [];
  let particles = [];
  let stars = [];

// Generate background stars for high altitudes
  for (let i = 0; i < 70; i++) {
    stars.push({
      x: Math.random() * WIDTH,
      y: Math.random() * HEIGHT,
      size: Math.random() * 2 + 1,
      alpha: Math.random()
    });
  }

const player = {
    x: WIDTH / 2,
    y: HEIGHT - 150,
    w: 32,
    h: 32,
    vx: 0,
    vy: 0,
    speed: 6.5,
    facingLeft: false,
    squish: 1,

update() {
      if (keys.left) {
        this.vx = -this.speed;
        this.facingLeft = true;
      } else if (keys.right) {
        this.vx = this.speed;
        this.facingLeft = false;
      } else {
        this.vx *= 0.8;
      }

this.x += this.vx;
      this.vy += GRAVITY;
      this.y += this.vy;

// Wrap around horizontal edges
      if (this.x < -this.w) this.x = WIDTH;
      if (this.x > WIDTH) this.x = -this.w;

// Squish animation return to normal
      this.squish += (1 - this.squish) * 0.15;
    },

draw() {
      ctx.save();
      ctx.translate(this.x + this.w / 2, this.y + this.h / 2 - cameraY);
      ctx.scale(this.facingLeft ? -1 : 1, 1);
      ctx.scale(2 - this.squish, this.squish);

// Body (Cute fluffy creature)
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      ctx.arc(0, 0, 16, 0, Math.PI * 2);
      ctx.fill();

// Cheeks
      ctx.fillStyle = '#ffb4d6';
      ctx.beginPath();
      ctx.arc(-8, 3, 3, 0, Math.PI * 2);
      ctx.arc(8, 3, 3, 0, Math.PI * 2);
      ctx.fill();

// Eyes
      ctx.fillStyle = '#1e293b';
      ctx.beginPath();
      ctx.arc(4, -2, 2.5, 0, Math.PI * 2);
      ctx.arc(11, -2, 2.5, 0, Math.PI * 2);
      ctx.fill();

// Wings / ears
      ctx.fillStyle = '#e2e8f0';
      ctx.beginPath();
      ctx.ellipse(-14, 0, 4, 8, -0.2, 0, Math.PI * 2);
      ctx.fill();

ctx.restore();
    }
  };

class Platform {
    constructor(x, y, type = 'normal') {
      this.w = 80;
      this.h = 24;
      this.x = x;
      this.y = y;
      this.type = type; // 'normal', 'spring', 'cloud-vanish', 'moving'
      this.broken = false;
      this.moveSpeed = (Math.random() < 0.5 ? 1 : -1) * (1.2 + Math.random() * 1.5);
      this.anim = 0;
    }

update() {
      if (this.type === 'moving') {
        this.x += this.moveSpeed;
        if (this.x <= 0 || this.x + this.w >= WIDTH) {
          this.moveSpeed *= -1;
        }
      }
      this.anim += 0.05;
    }

draw() {
      const screenY = this.y - cameraY;
      if (screenY < -50 || screenY > HEIGHT + 50) return;

ctx.save();
      ctx.translate(this.x, screenY);

// Cloud puff appearance
      let mainColor = '#ffffff';
      let edgeColor = '#dbeafe';

if (this.type === 'spring') {
        mainColor = '#fef08a';
        edgeColor = '#facc15';
      } else if (this.type === 'cloud-vanish') {
        mainColor = '#fbcfe8';
        edgeColor = '#f472b6';
      } else if (this.type === 'moving') {
        mainColor = '#bae6fd';
        edgeColor = '#38bdf8';
      }

ctx.fillStyle = mainColor;
      ctx.strokeStyle = edgeColor;
      ctx.lineWidth = 3;

// Stylized Cloud Platform
      ctx.beginPath();
      ctx.roundRect(0, 6, this.w, this.h - 6, 12);
      ctx.fill();
      ctx.stroke();

// Fluffy tops
      ctx.beginPath();
      ctx.arc(18, 6, 14, Math.PI, Math.PI * 2);
      ctx.arc(this.w / 2, 2, 16, Math.PI, Math.PI * 2);
      ctx.arc(this.w - 18, 6, 14, Math.PI, Math.PI * 2);
      ctx.fillStyle = mainColor;
      ctx.fill();

// Spring cloud extra decoration
      if (this.type === 'spring') {
        ctx.fillStyle = '#eab308';
        ctx.beginPath();
        ctx.arc(this.w / 2, -2 + Math.sin(this.anim) * 2, 5, 0, Math.PI * 2);
        ctx.fill();
      }

ctx.restore();
    }
  }

function resetGame() {
    isGameOver = false;
    gameOverScreen.style.display = 'none';

player.x = WIDTH / 2 - 16;
    player.y = HEIGHT - 180;
    player.vx = 0;
    player.vy = JUMP_POWER;
    highestY = player.y;
    cameraY = 0;
    score = 0;
    scoreEl.innerText = '0 m';

platforms = [];
    particles = [];

// Base floor cloud
    platforms.push(new Platform(WIDTH / 2 - 40, HEIGHT - 100, 'normal'));

// Populate initial platforms upward
    let curY = HEIGHT - 160;
    while (curY > -HEIGHT) {
      generatePlatform(curY);
      curY -= Math.floor(Math.random() * 45 + 65);
    }
  }

function generatePlatform(y) {
    const x = Math.random() * (WIDTH - 90);
    const rand = Math.random();
    let type = 'normal';

if (rand < 0.15) type = 'spring';
    else if (rand < 0.35) type = 'moving';
    else if (rand < 0.50) type = 'cloud-vanish';

platforms.push(new Platform(x, y, type));
  }

function update() {
    if (isGameOver) return;

player.update();

// Camera smoothly tracks player altitude
    const targetCameraY = player.y - HEIGHT * 0.55;
    if (targetCameraY < cameraY) {
      cameraY += (targetCameraY - cameraY) * 0.1;
    }

// Altitude scoring
    if (player.y < highestY) {
      highestY = player.y;
      score = Math.floor((HEIGHT - 180 - highestY) / 10);
      scoreEl.innerText = `${score} m`;
    }

// Platform collisions (only when moving downwards)
    if (player.vy > 0) {
      platforms.forEach(plat => {
        if (
          player.x + player.w * 0.7 > plat.x &&
          player.x + player.w * 0.3 < plat.x + plat.w &&
          player.y + player.h >= plat.y &&
          player.y + player.h <= plat.y + 16
        ) {
          player.squish = 0.5;
          createPoof(player.x + player.w / 2, plat.y, 6);

if (plat.type === 'spring') {
            player.vy = SUPER_JUMP_POWER;
            playSound(587.33, 0.25, 'triangle'); // D5
          } else {
            player.vy = JUMP_POWER;
            playSound(440, 0.15, 'sine'); // A4
          }

if (plat.type === 'cloud-vanish') {
            plat.broken = true;
            createPoof(plat.x + plat.w / 2, plat.y + 10, 15, 'rgba(244,114,182,0.8)');
          }
        }
      });
    }

// Remove broken platforms
    platforms = platforms.filter(p => !p.broken);

// Update platforms & spawn endless stream ahead
    platforms.forEach(p => p.update());

let topPlatformY = Math.min(...platforms.map(p => p.y));
    while (topPlatformY > cameraY - 150) {
      topPlatformY -= Math.floor(Math.random() * 45 + 65);
      generatePlatform(topPlatformY);
    }

// Clean up platforms far below screen
    platforms = platforms.filter(p => p.y < cameraY + HEIGHT + 100);

// Update particles
    for (let i = particles.length - 1; i >= 0; i--) {
      let pt = particles[i];
      pt.x += pt.vx;
      pt.y += pt.vy;
      pt.alpha -= 0.03;
      if (pt.alpha <= 0) {
        particles.splice(i, 1);
      }
    }

// Game over condition: fallen below camera view
    if (player.y > cameraY + HEIGHT + 50) {
      triggerGameOver();
    }
  }

// Stars appear at higher altitudes
    if (altitudeRatio > 0.3) {
      const starAlpha = Math.min((altitudeRatio - 0.3) / 0.5, 1);
      ctx.fillStyle = `rgba(255, 255, 255, ${starAlpha})`;
      stars.forEach(star => {
        let sy = (star.y - cameraY * 0.15) % HEIGHT;
        if (sy < 0) sy += HEIGHT;
        ctx.beginPath();
        ctx.arc(star.x, sy, star.size, 0, Math.PI * 2);
        ctx.fill();
      });
    }
  }

function render() {
    drawSky();

// Draw Platforms
    platforms.forEach(p => p.draw());

// Draw Particles
    particles.forEach(p => {
      ctx.save();
      ctx.fillStyle = p.color;
      ctx.globalAlpha = Math.max(0, p.alpha);
      ctx.beginPath();
      ctx.arc(p.x, p.y - cameraY, p.size, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    });

// Draw Player
    player.draw();
  }

function loop() {
    update();
    render();
    requestAnimationFrame(loop);
  }

// Controls & Listeners
  window.addEventListener('keydown', e => {
    initAudio();
    if (e.code === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = true;
    if (e.code === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = true;
    if (isGameOver && (e.code === 'Space' || e.code === 'Enter')) resetGame();
  });

window.addEventListener('keyup', e => {
    if (e.code === 'ArrowLeft' || e.key === 'a' || e.key === 'A') keys.left = false;
    if (e.code === 'ArrowRight' || e.key === 'd' || e.key === 'D') keys.right = false;
  });

// Touch Support
  window.addEventListener('touchstart', (e) => {
    initAudio();
    const touchX = e.touches[0].clientX;
    const mid = window.innerWidth / 2;
    if (touchX < mid) {
      keys.left = true;
      keys.right = false;
    } else {
      keys.right = true;
      keys.left = false;
    }
  });

window.addEventListener('touchend', () => {
    keys.left = false;
    keys.right = false;
  });

restartBtn.addEventListener('click', () => {
    initAudio();
    resetGame();
  });

// Start game
  resetGame();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>

CSS