Cloud Jumper Game in HTML Canvas and JavaScript

97 dt420736

Remix Open In Editor Fullscreen Discuss Publish Your Code

Cloud Jumper Game in HTML Canvas and JavaScript

<!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

Cloud Jumper Game in HTML Canvas and JavaScript

Recommended