Star Catching Game in JavaScript Canvas and CSS

21 Iamacone2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>iPad Fishing Game</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #1a73e8;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    #ui-layer {
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: none;
    }
    .hud-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 10px 18px;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
      font-weight: 700;
      color: #0f3c5c;
      font-size: 1.1rem;
    }
    #help-text {
      position: absolute;
      bottom: 24px;
      width: 100%;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      font-size: 1.1rem;
      font-weight: 600;
      text-shadow: 0 2px 4px rgba(0,0,0,0.4);
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
  </style>
</head>
<body>
  <div id="ui-layer">
    <div class="hud-card" id="score-display">Score: 0</div>
    <div class="hud-card" id="caught-display">Fish: 0</div>
  </div>
  <div id="help-text">Touch & Drag to move boat • Hold to drop hook!</div>

// Audio context for sound effects
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    let audioCtx = null;

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

const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      const now = audioCtx.currentTime;

if (type === 'catch') {
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(300, now);
        osc.frequency.exponentialRampToValueAtTime(700, now + 0.15);
        gain.gain.setValueAtTime(0.3, now);
        gain.gain.linearRampToValueAtTime(0.01, now + 0.2);
        osc.start(now);
        osc.stop(now + 0.2);
      } else if (type === 'score') {
        osc.type = 'sine';
        osc.frequency.setValueAtTime(520, now);
        osc.frequency.setValueAtTime(660, now + 0.08);
        osc.frequency.setValueAtTime(980, now + 0.16);
        gain.gain.setValueAtTime(0.3, now);
        gain.gain.linearRampToValueAtTime(0.01, now + 0.35);
        osc.start(now);
        osc.stop(now + 0.35);
      }
    }

let width = 0;
    let height = 0;
    let waterLevel = 0;

function resize() {
      const dpr = window.devicePixelRatio || 1;
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      ctx.scale(dpr, dpr);
      waterLevel = height * 0.25;
      if (boat.x === 0) boat.x = width / 2;
    }

let score = 0;
    let caughtCount = 0;
    let isTouching = false;
    let touchX = 0;

const boat = {
      x: 0,
      y: 0,
      width: 90,
      height: 30,
      speed: 0.1
    };

const hook = {
      x: 0,
      y: 0,
      targetY: 0,
      dropSpeed: 6,
      reelSpeed: 8,
      state: 'idle', // 'dropping', 'reeling', 'idle'
      caughtFish: null
    };

const floatingTexts = [];

class FloatingText {
      constructor(text, x, y, color = '#ffeb3b') {
        this.text = text;
        this.x = x;
        this.y = y;
        this.color = color;
        this.alpha = 1.0;
      }
      update() {
        this.y -= 1.5;
        this.alpha -= 0.02;
      }
      draw(c) {
        c.save();
        c.globalAlpha = Math.max(0, this.alpha);
        c.fillStyle = this.color;
        c.font = 'bold 24px -apple-system, sans-serif';
        c.textAlign = 'center';
        c.fillText(this.text, this.x, this.y);
        c.restore();
      }
    }

const fishTypes = [
      { name: 'Clownfish', color: '#ff7043', stripe: '#ffffff', size: 24, speed: 2.2, points: 10, depthMin: 0.3, depthMax: 0.5 },
      { name: 'Tang', color: '#29b6f6', stripe: '#ffee58', size: 30, speed: 1.8, points: 25, depthMin: 0.45, depthMax: 0.75 },
      { name: 'Golden Fish', color: '#ffd54f', stripe: '#ffb300', size: 40, speed: 3.2, points: 50, depthMin: 0.7, depthMax: 0.95 }
    ];

class Fish {
      constructor() {
        this.reset();
        this.x = Math.random() * width;
      }
      reset() {
        const type = fishTypes[Math.floor(Math.random() * fishTypes.length)];
        this.type = type;
        this.size = type.size;
        this.points = type.points;
        this.color = type.color;
        this.stripe = type.stripe;
        this.speed = (type.speed + (Math.random() * 0.8 - 0.4));
        this.direction = Math.random() < 0.5 ? 1 : -1;
        this.x = this.direction === 1 ? -60 : width + 60;
        
        const minY = waterLevel + (height - waterLevel) * type.depthMin;
        const maxY = waterLevel + (height - waterLevel) * type.depthMax;
        this.y = minY + Math.random() * (maxY - minY);
        
        this.tailWiggle = Math.random() * Math.PI;
        this.isCaught = false;
      }
      update() {
        if (this.isCaught) {
          this.x = hook.x;
          this.y = hook.y + 12;
          return;
        }

this.x += this.speed * this.direction;
        this.tailWiggle += 0.15;

if (this.direction === 1 && this.x > width + 70) {
          this.reset();
        } else if (this.direction === -1 && this.x < -70) {
          this.reset();
        }
      }
      draw(c) {
        c.save();
        c.translate(this.x, this.y);
        
        if (this.isCaught) {
          c.rotate(Math.PI / 2); // Hang vertically
        } else if (this.direction === -1) {
          c.scale(-1, 1);
        }

const wiggle = Math.sin(this.tailWiggle) * 4;

// Tail
        c.fillStyle = this.color;
        c.beginPath();
        c.moveTo(-this.size * 0.7, 0);
        c.lineTo(-this.size * 1.2, -this.size * 0.4 + wiggle);
        c.lineTo(-this.size * 1.2, this.size * 0.4 + wiggle);
        c.closePath();
        c.fill();

// Body
        c.beginPath();
        c.ellipse(0, 0, this.size * 0.8, this.size * 0.45, 0, 0, Math.PI * 2);
        c.fill();

// Decorative Stripe
        c.fillStyle = this.stripe;
        c.beginPath();
        c.ellipse(-this.size * 0.1, 0, this.size * 0.18, this.size * 0.44, 0, 0, Math.PI * 2);
        c.fill();

// Eye
        c.fillStyle = '#ffffff';
        c.beginPath();
        c.arc(this.size * 0.45, -this.size * 0.12, this.size * 0.12, 0, Math.PI * 2);
        c.fill();
        c.fillStyle = '#000000';
        c.beginPath();
        c.arc(this.size * 0.48, -this.size * 0.12, this.size * 0.06, 0, Math.PI * 2);
        c.fill();

c.restore();
      }
    }

// Bubbles background effect
    const bubbles = Array.from({ length: 25 }, () => ({
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight,
      r: 2 + Math.random() * 4,
      s: 0.5 + Math.random() * 1.5
    }));

const fishes = [];
    for (let i = 0; i < 9; i++) {
      fishes.push(new Fish());
    }

// Touch Handling (Optimized for iPad)
    function handleTouch(e) {
      e.preventDefault();
      const touch = e.touches[0];
      if (touch) {
        touchX = touch.clientX;
        isTouching = true;
        helpText.style.opacity = '0';
      }
    }

window.addEventListener('touchstart', (e) => {
      handleTouch(e);
      if (!audioCtx) audioCtx = new AudioContext();
    }, { passive: false });

window.addEventListener('touchmove', handleTouch, { passive: false });

window.addEventListener('touchend', (e) => {
      e.preventDefault();
      if (e.touches.length === 0) {
        isTouching = false;
      }
    }, { passive: false });

// Fallback Mouse events for testing on desktop
    window.addEventListener('mousedown', (e) => {
      touchX = e.clientX;
      isTouching = true;
      helpText.style.opacity = '0';
    });
    window.addEventListener('mousemove', (e) => {
      if (isTouching) touchX = e.clientX;
    });
    window.addEventListener('mouseup', () => { isTouching = false; });

function update() {
      boat.y = waterLevel;

// Smooth boat movement toward touch position
      if (isTouching) {
        boat.x += (touchX - boat.x) * boat.speed;
      }

// Keep boat inside screen boundaries
      boat.x = Math.max(boat.width / 2, Math.min(width - boat.width / 2, boat.x));

// Hook mechanics
      const rodTipX = boat.x + 35;
      const rodTipY = boat.y - 30;

if (isTouching && hook.state !== 'reeling') {
        hook.state = 'dropping';
        hook.targetY = height - 30;
      } else if (!isTouching && hook.state === 'dropping') {
        hook.state = 'reeling';
      }

if (hook.state === 'idle') {
        hook.x = rodTipX;
        hook.y = boat.y + 10;
      } else if (hook.state === 'dropping') {
        hook.x = rodTipX;
        hook.y += hook.dropSpeed;
        if (hook.y >= hook.targetY) {
          hook.state = 'reeling';
        }
      } else if (hook.state === 'reeling') {
        hook.x += (rodTipX - hook.x) * 0.15;
        hook.y -= hook.reelSpeed;

// Returned back to boat!
        if (hook.y <= boat.y + 10) {
          hook.y = boat.y + 10;
          hook.state = 'idle';

if (hook.caughtFish) {
            score += hook.caughtFish.points;
            caughtCount++;
            playSound('score');
            floatingTexts.push(new FloatingText(`+${hook.caughtFish.points}`, boat.x, boat.y - 45));
            scoreDisplay.textContent = `Score: ${score}`;
            caughtDisplay.textContent = `Fish: ${caughtCount}`;
            hook.caughtFish.reset();
            hook.caughtFish = null;
          }
        }
      }

// Fish update & collision checks
      fishes.forEach(fish => {
        fish.update();

// Check hook collision only if hook has no fish
        if (!hook.caughtFish && (hook.state === 'dropping' || hook.state === 'reeling')) {
          const dx = fish.x - hook.x;
          const dy = fish.y - hook.y;
          const dist = Math.sqrt(dx * dx + dy * dy);

if (dist < fish.size * 0.75) {
            fish.isCaught = true;
            hook.caughtFish = fish;
            hook.state = 'reeling';
            playSound('catch');
          }
        }
      });

// Update bubbles
      bubbles.forEach(b => {
        b.y -= b.s;
        if (b.y < waterLevel) {
          b.y = height + 10;
          b.x = Math.random() * width;
        }
      });

// Update Floating Texts
      for (let i = floatingTexts.length - 1; i >= 0; i--) {
        floatingTexts[i].update();
        if (floatingTexts[i].alpha <= 0) floatingTexts.splice(i, 1);
      }
    }

function draw() {
      ctx.clearRect(0, 0, width, height);

// Sky
      const skyGradient = ctx.createLinearGradient(0, 0, 0, waterLevel);
      skyGradient.addColorStop(0, '#74ebd5');
      skyGradient.addColorStop(1, '#acb6e5');
      ctx.fillStyle = skyGradient;
      ctx.fillRect(0, 0, width, waterLevel);

// Sun
      ctx.fillStyle = 'rgba(255, 235, 59, 0.85)';
      ctx.beginPath();
      ctx.arc(width - 70, 70, 36, 0, Math.PI * 2);
      ctx.fill();

// Water Deep Gradient
      const seaGradient = ctx.createLinearGradient(0, waterLevel, 0, height);
      seaGradient.addColorStop(0, '#0288d1');
      seaGradient.addColorStop(0.4, '#01579b');
      seaGradient.addColorStop(1, '#002f6c');
      ctx.fillStyle = seaGradient;
      ctx.fillRect(0, waterLevel, width, height - waterLevel);

// Bubbles
      ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
      bubbles.forEach(b => {
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
        ctx.fill();
      });

// Fishes
      fishes.forEach(fish => fish.draw(ctx));

// Fishing Rod & Fishing Line
      const rodTipX = boat.x + 35;
      const rodTipY = boat.y - 30;

// Draw Fishing line
      ctx.beginPath();
      ctx.moveTo(rodTipX, rodTipY);
      ctx.lineTo(hook.x, hook.y);
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1.8;
      ctx.stroke();

// Draw Hook
      ctx.save();
      ctx.translate(hook.x, hook.y);
      ctx.strokeStyle = '#cfd8dc';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(0, -6);
      ctx.lineTo(0, 4);
      ctx.arc(4, 4, 4, Math.PI, 0, true);
      ctx.stroke();
      ctx.restore();

// Draw Boat
      ctx.save();
      ctx.translate(boat.x, boat.y);

// Hull
      ctx.fillStyle = '#8d6e63';
      ctx.beginPath();
      ctx.moveTo(-boat.width / 2, -6);
      ctx.lineTo(boat.width / 2, -6);
      ctx.lineTo(boat.width / 2 - 14, 18);
      ctx.lineTo(-boat.width / 2 + 14, 18);
      ctx.closePath();
      ctx.fill();

// Boat Stripe
      ctx.fillStyle = '#d32f2f';
      ctx.fillRect(-boat.width / 2 + 6, 0, boat.width - 12, 5);

// Fisherman
      ctx.fillStyle = '#ffe0b2'; // face
      ctx.beginPath();
      ctx.arc(8, -26, 8, 0, Math.PI * 2);
      ctx.fill();

ctx.fillStyle = '#fbc02d'; // hat
      ctx.beginPath();
      ctx.arc(8, -28, 12, Math.PI, 0);
      ctx.fill();

ctx.fillStyle = '#1976d2'; // jacket
      ctx.fillRect(0, -18, 16, 14);

// Rod
      ctx.strokeStyle = '#5d4037';
      ctx.lineWidth = 3.5;
      ctx.beginPath();
      ctx.moveTo(6, -16);
      ctx.lineTo(35, -30);
      ctx.stroke();

ctx.restore();

// Floating Score Texts
      floatingTexts.forEach(ft => ft.draw(ctx));

// Subtle Water Surface Ripple
      ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
      ctx.fillRect(0, waterLevel - 2, width, 4);
    }

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

window.addEventListener('resize', resize);
    window.addEventListener('orientationchange', () => setTimeout(resize, 100));

// Start game
    resize();
    touchX = width / 2;
    boat.x = width / 2;
    requestAnimationFrame(loop);
  </script>
</body>
</html>

CSS

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var player = { x: 180, w: 60 };
var stars = [];
var score = 0;

// Move with the mouse
canvas.addEventListener("mousemove", function (e) {
  player.x = e.offsetX - player.w / 2;
});

// Move with arrow keys
document.addEventListener("keydown", function (e) {
  if (e.key === "ArrowLeft") player.x -= 25;
  if (e.key === "ArrowRight") player.x += 25;
});

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

// Add a new star sometimes
  if (Math.random() < 0.03) stars.push({ x: Math.random() * 380, y: 0 });

ctx.font = "22px sans-serif";
  stars.forEach(function (s) {
    s.y += 3;
    ctx.fillText("⭐", s.x, s.y);
    // Caught it?
    if (s.y > 460 && s.x > player.x - 10 && s.x < player.x + player.w) {
      s.y = 999;
      score++;
      document.getElementById("score").textContent = "Score: " + score;
    }
  });
  stars = stars.filter(function (s) { return s.y < 520; });

// Draw the player
  ctx.fillStyle = "#10b3a4";
  ctx.fillRect(player.x, 470, player.w, 14);

requestAnimationFrame(loop);
}
loop();

Star Catching Game in JavaScript Canvas and CSS

Recommended