Inspiration
A zero-day exploit lets a swarm of controlling hornet bugs nest on campus, and the city needs a hero. We love how a game as simple as Chrome's Dino can be instantly addictive, so we built our own for HackUTD's ZeroDay theme: a pixel-art endless runner starring our hero Poyo, set in a neon city under control by bugs.
What it does
PoyoDash! is a fast arcade runner that plays on your phone or laptop and tracks your score to add to the global leaderboard. Poyo runs automatically through a neon skyline. Two retro arcade-style buttons control the game: jump over glitches on the ground and duck under flying hornets. The longer you survive, the faster it gets.
- Title screen with a custom logo
- Character select with four runners to choose from
- Score and saved high score, a game-over screen, and instant restart
- Installs to your home screen and runs fullscreen like a real app
How we built it
- Game: plain HTML, CSS, and JavaScript on a canvas, with no frameworks. We wrote the physics, obstacle spawning, collision detection, and the increasing speed ourselves.
- Art: everything is hand-drawn pixel art, including Poyo's run, jump and crouch animations, each of the selectable characters run animations, the animated hornets and ground obstacles, a seamless scrolling city background, our logo, and the arcade buttons.
- Phone-first design: the layout fills the whole screen, stays clear of the notch, and uses touch controls placed in the ground strip so your thumbs never cover the action.
- Hosting: the game is deployed on GitHub Pages, so anyone can play it from a link.
- Backend: Spacetime
- AI help: we used Claude to help plan the project, debug, and tune the game.
Challenges we ran into
- Animation that felt right. Our first run cycle looked like Poyo was scurrying, and later he floated above the ground because of empty space in the sprite frames. We tied animation to its own timer and made the game measure each sprite's feet so characters stand on the ground.
- Fair collisions. Early on, Poyo died before touching anything. We shrank the hitboxes separately from the sprites and used a debug view to tune them until near misses felt fair.
- Making it feel like an app on iPhone. Fullscreen layout, the notch, and screen rotation all needed special handling.
- Changing our plan. We started out designing a physical mini arcade cabinet with a microcontroller sending button presses to the phone over Bluetooth. We learned that iOS blocks the usual browser approach to Bluetooth, and with two people and limited time, we cut the hardware to make sure the game itself was finished and polished.
Accomplishments that we're proud of
We struggled for a while trying to figure out the hardware and after hours of no success, we quickly picked ourselves back up and reframed the project. And in the end shipped a complete game with fully original art, from the first pixel to the title screen.
What we learned
- How to build a game loop, with physics, collisions, and sprite animation, from scratch
- How to make a web game behave like a native app on iPhone
- Pixel art workflow: sprite sheets, consistent frame sizes, and tiling backgrounds
- How to scope a project honestly and cut features to finish what matters
What's next for PoyoDash!
Other movements cycles for all four characters, more obstacle types, and maybe even an online leaderboard so we can really see whose fit to save the city. And finally, the original plan: a 3D-printed mini arcade cabinet with real arcade buttons that talk to the phone.
Built with
HTML5 Canvas, JavaScript, CSS, Piskel, GitHub Pages, Claude, Spacetime, Vercel
Built With
- css
- github
- html5
- javascript
- piskel
- spacetime
- vercel
