Can I download the Catch the Star source code for free?

Yes. Click the Download Project button on this page to download the full HTML, CSS, and JavaScript source code as a ZIP file for free. No sign-up or account required. Coodeverse provides 540+ free downloadable coding projects.

Catch the Star! | Coodeverse

Name: Catch the Star! – HTML Canvas Arcade Game
Availability: InStock
Author: Coodeverse

⭐ Full Source Code

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Catch the Star!</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="ui">
    Score: <span id="s">0</span> | Lives: ❤️❤️❤️ <span id="l">3</span>
  </div>
  <canvas id="c"></canvas>
  <div id="start">
    <h1>Catch the Star!</h1>
    <p style="font-size:24px">Mouse over canvas → basket follows!<br>
    Touch/drag → basket follows!<br>← → A/D keys too!</p>
    <button onclick="startGame()">PLAY ⭐</button>
  </div>
  <div id="over" style="display:none">
    <h1 id="title">Game Over!</h1>
    <p style="font-size:32px">Score: <span id="final">0</span></p>
    <button onclick="startGame()">Play Again</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

// style.css

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Arial;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
canvas {
  background: radial-gradient(#1a0033, #000);
  border-radius: 15px;
  box-shadow: 0 0 40px #ff0;
  cursor: crosshair;
}
#ui {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px #ff0;
}
#start, #over {
  position: absolute; inset: 0;
  background: rgba(0,0,30,0.95);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; text-align: center; z-index: 99;
}
#start h1, #over h1 {
  font-size: 60px; margin: 0;
  text-shadow: 0 0 30px #ff0;
}
button {
  padding: 15px 50px; font-size: 30px;
  background: #ff0; color: #000;
  border: none; border-radius: 20px;
  cursor: pointer; box-shadow: 0 0 30px #ff0;
}
button:hover, button:active { transform: scale(1.1); }

// script.js

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let w = 500, h = 700;
let score = 0, lives = 3, speed = 2;
let basketX = 200, controlX = 200;
let items = [];
let gameActive = false;
const keys = {};

function resize() {
  let cw = Math.min(window.innerWidth * 0.95, 500);
  let ch = Math.min(window.innerHeight * 0.85, 700);
  canvas.width = cw; canvas.height = ch;
  canvas.style.width = cw + 'px'; canvas.style.height = ch + 'px';
  w = cw; h = ch;
  if (gameActive) { controlX = w / 2 - 60; basketX = controlX; }
}
resize();
window.addEventListener('resize', resize);

window.addEventListener('keydown', e => { keys[e.code] = true; });
window.addEventListener('keyup',   e => { keys[e.code] = false; });

canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  const scaleX = w / rect.width;
  controlX = Math.max(0, Math.min(w - 120, (e.clientX - rect.left) * scaleX - 60));
});

function handleTouch(e) {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const scaleX = w / rect.width;
  controlX = Math.max(0, Math.min(w - 120, (e.touches[0].clientX - rect.left) * scaleX - 60));
}
canvas.addEventListener('touchstart', handleTouch, { passive: false });
canvas.addEventListener('touchmove',  handleTouch, { passive: false });

function startGame() {
  document.getElementById('start').style.display = 'none';
  document.getElementById('over').style.display  = 'none';
  gameActive = true;
  score = 0; lives = 3; speed = 2; items = [];
  controlX = w / 2 - 60; basketX = controlX;
  document.getElementById('s').textContent = 0;
  document.getElementById('l').textContent = 3;
  requestAnimationFrame(gameLoop);
}

function gameLoop() {
  if (!gameActive) return;
  ctx.clearRect(0, 0, w, h);

  if (keys['ArrowLeft']  || keys['KeyA']) controlX -= 10;
  if (keys['ArrowRight'] || keys['KeyD']) controlX += 10;
  controlX = Math.max(0, Math.min(w - 120, controlX));
  basketX = controlX;

  if (Math.random() < 0.035 + score * 0.00002) {
    items.push({
      x: 50 + Math.random() * (w - 100), y: -50,
      type: Math.random() < 0.75 ? 'star' : 'bomb',
      size: 28 + Math.random() * 16
    });
  }

  for (let i = items.length - 1; i >= 0; i--) {
    const item = items[i];
    item.y += speed;

    const caught = item.y > h - 130 && item.y < h - 70
                && item.x + item.size > basketX
                && item.x - item.size < basketX + 120;

    if (caught) {
      if (item.type === 'star') {
        score += 10; speed += 0.025;
        document.getElementById('s').textContent = score;
      } else {
        lives--;
        document.getElementById('l').textContent = lives;
        if (lives <= 0) endGame();
      }
      items.splice(i, 1); continue;
    }
    if (item.y > h + 50) { items.splice(i, 1); continue; }

    ctx.save();
    ctx.shadowBlur   = item.type === 'star' ? 25 : 18;
    ctx.shadowColor  = item.type === 'star' ? '#ff0' : '#f00';
    ctx.font         = `${item.size}px Arial`;
    ctx.textAlign    = 'center'; ctx.textBaseline = 'middle';
    ctx.fillStyle    = item.type === 'star' ? '#ff8' : '#f44';
    ctx.fillText(item.type === 'star' ? '⭐' : '💀', item.x, item.y);
    ctx.restore();
  }

  ctx.shadowColor = '#0f0'; ctx.shadowBlur = 20;
  ctx.fillStyle = '#0f4';
  ctx.fillRect(basketX, h - 100, 120, 35);
  ctx.fillStyle = '#0a3';
  ctx.fillRect(basketX + 12, h - 100, 96, 12);
  ctx.shadowBlur = 0;
  requestAnimationFrame(gameLoop);
}

function endGame() {
  gameActive = false;
  document.getElementById('final').textContent = score;
  document.getElementById('title').textContent =
    score > 500 ? '⭐ INCREDIBLE! ⭐' :
    score > 200 ? '⭐ GREAT! ⭐' : 'Game Over!';
  document.getElementById('over').style.display = 'flex';
}

window.addEventListener('keydown', e => {
  if (!gameActive && (e.code === 'Space' || e.code === 'Enter')) {
    e.preventDefault(); startGame();
  }
});

// game_faq

Catch the Star — FAQ

Everything about the game and its source code.

How do I play Catch the Star?

Click PLAY to start. Move the glowing basket using mouse (move over canvas), drag finger on touchscreen, or Arrow/A-D keyboard keys. Catch yellow stars ⭐ for +10 points each. Dodge skull bombs 💀 — each costs 1 life. You have 3 lives. Stars fall faster as your score rises. Game ends when all lives are gone.

What technologies is it built with?

Pure HTML5, CSS3, and vanilla JavaScript — zero external libraries or frameworks. Uses the HTML5 Canvas 2D API for all rendering, requestAnimationFrame for the game loop, and native browser event listeners for mouse, touch, and keyboard input. The canvas resizes responsively. Complete JavaScript is about 100 lines.

Can I download the source code for free?

Yes. Click Download Project at the top of this page. You get a ZIP with separate HTML, CSS, and JavaScript files ready to open in any browser. No account or sign-up required. Coodeverse provides 540+ free downloadable coding projects — all free, no account needed.

Is this a good JavaScript learning project?

Yes. Catch the Star is excellent for beginners and intermediate JavaScript developers. It teaches the HTML5 Canvas API, requestAnimationFrame game loops, mouse/touch/keyboard event handling, bounding-box collision detection, responsive canvas resizing, progressive difficulty, and game state management — all in clean readable code with no framework complexity.

Does Catch the Star work on mobile?

Yes. Fully responsive on all devices. On mobile and tablet, drag your finger to move the basket. On desktop, use mouse or Arrow/WASD keys. The canvas auto-resizes to fit any screen. Works in all modern browsers including Chrome, Firefox, Safari, and Edge.

What other free projects does Coodeverse offer?

Coodeverse offers 540+ free downloadable HTML/CSS/JavaScript projects including arcade games, animations (Cosmos Star Animation, Particle Fireworks), UI components (Holographic Login, Neon Toggle Switch), and more. All free, no account needed. Browse at coodeverse.com/projects.

Catch the Star!
HTML · CSS · JAVASCRIPT CANVAS

Catch the Star — FAQ

Learn JavaScript While
Building Real Projects

Catch the Star — FAQ

Learn JavaScript WhileBuilding Real Projects

Learn JavaScript While
Building Real Projects