clatgpt claudecode collaboration

Written by AI

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

• A polished landing page that doubles as a playable 3D Halloween experience. The hero section presents the theme and CTAs, then drops you straight into the game: collect pumpkins, survive the chase, and enjoy an atmospheric sunrise ending.
• Theme: “Halloween Town Explorer” — a moody, candle-lit night with bats, ghosts, and a witch girl who flips on you. Victory turns night into dawn with a rising sun and birdsong.

Highlights

• Landing-first design
  • Hero + CTA, responsive layout, clean copy, and immediate path to “Play now”
  • SEO/OG/meta ready; accessible navigation and readable content
• Playable 3D game (HTML5 Canvas)
  • Lightweight raycasting for walls + sprite rendering for objects
  • Minimap with guide line, clear markers (witch ping), and enemy visibility
  • Web Audio API: footsteps, ambience, proximity/heartbeat alerts, victory fanfare, morning birds
• Gameplay loop
  • Phase 1: Collect pumpkins (fast is better)
  • Phase 2: Escape for 60s (witch turns hostile after 10s; bats explode; lanterns heal)
  • Victory: Night fades to a sunrise animation; press R to restart
• Scoring (not just time)
  • Factors: collection speed, remaining HP, lanterns collected, risk exposure (time near enemies), no-damage bonus, and hit penalties
  • Rank internally tracked (S/A/B/C/D)
• Difficulty scaling (loops)
  • After each clear, score resets and enemies get 1.1× faster next run
  • Adds a few extra lanterns per loop to keep runs fair and strategic
• Internationalization
  • Language switch (EN/JA) for instructions, UI labels, and messages
• Performance + UX care
  • Render throttled to 50fps, capped ray count, Z‑buffer reuse, cached gradients
  • Reduced motion support; minimized heavy text‑shadow animations; will-change hints

Demo

• Live: https://moe-charm.github.io/dev_challange/halloween/
• Controls:
  • Arrow keys: Move
  • S: Toggle sound
  • A: Toggle ambient
  • R: Restart (on victory or game over)
  • Click once to enable audio (browser policy)

Journey

• Goals: Ship a “Perfect Landing” page that’s actually fun to interact with. I led with a clean hero/CTA and stitched in a compact 3D game that feels seasonal and performs well.
• What I focused on:
  • Landing polish: coherent copy, CTA clarity, and responsive blocks
  • Performance: throttled rendering, raycaps, shared buffers, DOM minimap split into static grid + overlay
  • Accessibility: keyboard-driven, readable labels, reduced-motion
  • Atmosphere: audio cues, witch turning hostile, bats that “pop,” and a sunrise payoff
  • Replayability: scoring beyond pure time and difficulty loops so each run matters
• Next ideas:
  • Show rank letter in the victory banner
  • Soft restart (without full reload), leaderboard, and seedable maps
  • Visual flares for lantern pickups and enemy tells