DEV Community

Precious Grace Deborah S. Manucom
Precious Grace Deborah S. Manucom

Posted on

✦ Solstice Valley — An Adventure of Light & Shadow

#devchallenge #gamechallenge #gamedev

June Solstice Game Jam Submission

This is a submission for the June Solstice Game Jam 2026.

What I Built

Solstice Valley is a browser-based pixel-art action RPG built entirely inside a single HTML file using HTML5 Canvas and vanilla JavaScript.

The game takes place in a valley where the balance between day and night has been disrupted. Players explore the world, interact with villagers, complete quests, collect Sun and Moon Fragments, battle shadow creatures, and ultimately defeat the ancient Shadow Boss to restore harmony.

Play it here: https://debb1ie.github.io/Soltice-Valley-Drop/

The core theme of the game revolves around light and shadow, reflected through a dynamic day/night cycle that continuously transforms the environment. During the day, the valley feels vibrant and safe. At night, stars emerge, lanterns glow, shadows deepen, and hidden dangers become more prominent.

My goal was to create a complete RPG experience while embracing an additional challenge: building everything in a single self-contained HTML file with zero dependencies.

Key Features

  • Dynamic 60-second day/night cycle
  • Responsive controls for desktop, tablet, and mobile
  • Quest-driven progression system
  • Multiple NPCs with evolving dialogue
  • Combo-based combat mechanics
  • Dash system with invincibility frames
  • Shadow Wisp enemies and a multi-phase boss fight
  • Leveling, XP, and item drops
  • Particle effects and screen shake
  • Fully playable offline

Video Demo

(Add your gameplay video here)

Recommended footage:

  • Intro showing the day/night transition
  • Quest progression with Elder Mira
  • Collecting Sun and Moon Fragments
  • Combat against Shadow Wisps
  • Boss battle Phase 1 and Phase 2
  • Victory sequence and fireworks finale

Code

The entire project is contained in a single HTML file.

Repository:

https://github.com/yourusername/solstice-valley

Tech Stack

  • HTML5 Canvas
  • Vanilla JavaScript
  • CSS
  • No frameworks
  • No build tools
  • No external libraries

Project structure:

solstice-valley/
└── index.html
Enter fullscreen mode Exit fullscreen mode

How I Built It


The game uses a custom-built engine powered by a single HTML5 Canvas element.

Core Architecture 

requestAnimationFrame()
├── update(dt)
│   ├── Player movement
│   ├── Collision detection
│   ├── Quest progression
│   ├── Enemy AI
│   ├── Boss logic
│   ├── Fragment collection
│   └── Particle updates
└── drawGame(t)
    ├── Day/night sky rendering
    ├── Tile map rendering
    ├── Character sprites
    ├── Effects and particles
    └── UI and overlays
Enter fullscreen mode Exit fullscreen mode

Interesting Design Decisions

Single-File Architecture

I wanted the game to be instantly shareable and easy to inspect. Anyone can open the file in a browser and immediately play, modify, or learn from it without installing dependencies.

Fixed Internal Resolution


The game renders at a logical resolution of 480×320 and scales up using CSS. This preserves crisp pixel-art visuals while remaining responsive across different screen sizes.

Dynamic Day/Night System


One of the most important features was the day/night cycle. The sky transitions through dawn, noon, dusk, and midnight while dynamically rendering:

  • Sun and moon movement
  • Color-shifting skies
  • Star fields
  • Night fog
  • Lantern glow effects

This mechanic directly supports the jam theme by constantly shifting the balance between light and darkness.

Responsive Controls

Touch devices automatically switch to an on-screen D-pad and action buttons using JavaScript touch detection, allowing the same codebase to work seamlessly across desktop and mobile devices.

Lightweight World Design


The world is represented as a simple 2D tile array. This made it easy to build the map while keeping the code readable and easy to modify.

Challenges

One of the biggest challenges was fitting a complete RPG experience into a single file while still maintaining:

  • Readable code structure
  • Responsive gameplay
  • Quest progression
  • Combat mechanics
  • Enemy AI
  • Visual effects

Balancing simplicity with feature depth required careful organization and constant iteration.

What I'm Most Proud Of

The feature I'm most proud of is the dynamic day/night cycle.

Rather than acting as a simple visual filter, it changes the atmosphere of the world throughout gameplay and reinforces the game's central theme of restoring balance between light and shadow.

I'm also proud that the entire game runs from a single HTML file without sacrificing features like combat, quests, particle effects, leveling, boss phases, and mobile support.

Future Improvements

Planned additions include:

  • Sound effects and chiptune soundtrack
  • Save/load functionality using localStorage
  • Additional map areas
  • Inventory and equipment systems
  • More boss encounters
  • Multiplayer co-op support
  • Mobile haptic feedback

Prize Category

Best Overall Game

Solstice Valley combines exploration, questing, combat, progression systems, responsive controls, and a dynamic world into a complete browser-based RPG experience.

Best Theme Interpretation

The game's central mechanic is the balance between light and shadow. The day/night cycle is woven directly into the gameplay, atmosphere, story, and visual presentation.

Thank you for playing Solstice Valley.

"The valley shines bright once more."

Top comments (0)