DEV Community

CharmPic
CharmPic

Posted on

Halloween Town Explorer — A Perfect Landing with a Playable 3D Pumpkin Hunt

#frontendchallenge #devchallenge #javascript #webdev

Frontend Challenge Perfect Landing Submission 🦇🎃

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

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

Top comments (0)