Demon Gate: Unlock the Full Source Code for HTML5 Action Game

Demon Gate: Unlock the Full Source Code for HTML5 Action GameDemon Gate: Unlock the Full Source Code for HTML5 Action Game

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

AI　KAISEI GLOBAL

• 5h

https://kaleidoscope00803.gumroad.com/l/fenoa Just published Demon Gate — a production-ready HTML5 canvas action game I built for the browser.

Try it first: https://ship-project-kappa.vercel.app/demon-gate/ Get the full source: https://kaleidoscope00803.gumroad.com/l/fenoa

What’s inside the ZIP: → Complete game source (vanilla JS, no framework dependency) → 30 stages with progressive difficulty → Combat systems: combos, just-guard, elemental weapons, rank scoring → Lightweight enough to embed on any static host or client LP

I built this the same way I ship client work: playable demo first, clean handoff, documented customization paths.

Open to: • White-label / reskin for your brand • Feature adds (new enemies, stages, leaderboard) • Integration into Next.js or marketing sites

Reply or DM if you want a scoped quote + optional $200–400/mo retainer for updates & monitoring.

AI　KAISEI GLOBAL

• 4h

商品: kaleidoscope00803.gumroad.com/l/fenoa（$29・カスタムLP）

デモ: ship-project-kappa.vercel.app/demon-gate/

kaleidoscope00803.gumroad.com

Demon Gate — HTML5 Canvas Action Game Source (30 Stages)

Demon Gate — original feudal action browser game (NOT affiliated with any existing franchise).WHAT YOU GET (instant download ZIP)✓ Full HTML5 Canvas source — vanilla JavaScript, no framework lock-in✓ 30 playable stages with bosses, ranks, and soul/weapon progression✓ Procedural Web Audio — no royalty-bearing music files✓ Zero external image assets — deploy anywhere static files work✓ Commercial license for ONE project (see LICENSE.txt)✓ CUSTOMIZE.md — stages, enemies, controlsPERFECT FOR• Indie devs learning action combat systems• Agencies delivering a branded browser mini-game to clients• Portfolio / landing-page engagement hooks• Sellers who customize for clients (not redistribute raw source)TECHHTML + CSS + JS | Works on Vercel, Netlify, GitHub Pages | ~68KB ZIPLIVE DEMOhttps://ship-project-kappa.vercel.app/demon-gate/Full 30-stage browser demo (English UI; add ?lang=ja for Japanese).LICENSESingle commercial project. No redistribution of source as-is. Full terms in LICENSE.txt.Support: customization guide included. Custom development available — message seller.

Girtonian

pro

• Jun 19

Let’s all come together and save the Config City! @Shreya Shah and I built Config City, which is a mission-based game with AR integration where players become Figma Rangers, complete quick challenges, and unlock custom cubes that help save the config city that's in danger. There’s also a creative side to it — players can paint and customize their cubes either in the editor or directly in AR, using stickers, materials, shaders, colors, and other visual details. They can bring the cube and add it to the map and if you’re in San Francisco, you can actually discover some of these cubes on the streets. So don't forget to check those out.

We built this using Figma Design, FigJam, Figma Make, Figma Weave, Figma MCP, Claude Code, and Google's MediaPipe Library for AR. Tiny missions, collectible cubes, AR surprises, and one city to save. Checkout the submissions here: Community Link: https://www.figma.com/community/file/1649674666593503403/config-city Project Link: https://config-city.figma.site/

configmakeathon Figma

Girtonian

pro

• Jun 19

Our process! We had so much fun!!

Sameer Gaikwad

• Jun 19

Breathverse: Aqua Ring

A childhood toy, rebuilt at planetary scale.

Breathverse reimagines the nostalgic handheld water ring-toss game as a cosmic, microphone-controlled experience. Players select a left or right air jet, then exhale into their microphone to propel floating rings toward celestial targets. Each captured ring transforms into a glowing planetary orbit, gradually building a small solar system through breath.

The hidden objective was to make controlled breathing feel playful rather than instructional. Instead of presenting another meditation timer or wellness dashboard, Breathverse disguises a breath-led pause inside a familiar childhood interaction. Try it OUT: https://insert-name-29709768.figma.site

I used Figma Agent to translate visual references into the interface and establish the archival, sepia-toned cosmic world. I then used Figma Make to build the microphone detection, directional air jets, floating-ring physics, target capture, scoring, and responsive gameplay.

How it works

Allow microphone access.

Select the left or right air jet.

Exhale gently to propel the rings.

Switch sides to correct their trajectory.

Capture rings around celestial targets to form orbits.

Breathverse transforms a physical toy mechanic into an embodied digital experience, using breath not as a button, but as the actual force that brings the world to life. Figma Community: https://www.figma.com/community/file/1649689014975371579/breathverse

configmakeathon Figma

Lee Black

• Jun 19

Fun, but out of breath now haha :)

Mohammed Essaid MEZERREG

pro

• Jun 18

Bubble war is an online multiplayer typing game.

You fight your opponents by typing the words on top of them.

You collect perks the same way as well. You can activate perks using "/perk-name".

Don't rush, check the perk list because it may cause damage as well.

spend 4k of credits on failed ideas.

The tank war was great but the art was not good. I bought a subscription in third party products to handle the art for me and brought them to figma make through custom mcp (connectors) but they didn't work. The art is not good at all.

Disappointed on myself and on those products. I simplified the idea to bubbles.

Spent so much time preparing the master prompt and the assets in figma and planning through figma jam.

At the moment of truth I did another big mistake. I used Claude sonnet 4.6 and not Opus . I saw in a doc of figma make a tip to use the strongest model for the bootstrap prompt. But I didn't pay attention.

I hit a nother blocker after I found out that both Supabase, instantdb presence can't handle less then 100 ms of latency and refresh rate.

To be honest, I could've stopped here and submitted my entry. But I felt it will reduce the value of the game by half. Even though the challenge is aiming for working prototypes. But Nah! I wanted to go an extra mile.

I hooked the project to claude code through figma mcp and asked for a solution. It suggested some Saas services or a custom Phoenix server.

I am a developer myself, so I went with the server and boy it was hard. My heart popped up. By the end, it almost burst.

I can't believe I am submitting this for you to try.

Please don't break it. I can't afford to spend more 😂

The game from here: https://bubble-war.figma.site

Leave a feedback in the game so I can make it better. But for now, let's wait for the hackathon to wrap up then I will see how to update it. I am not touching it until the results of the hachathon come out.

configmakeathon Figma

Nia Nguyen

pro

• Jun 19

This is so creative! Don't forget to share this to Instagram, X, or LinkedIn with #ConfigMakeathon and @figma and drop the link in the comments here!

Back to feed

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Challenges

View all

promptandcircumstance

$10K10d left

Trending

Claude

Claude has entered the design space. How are you using Claude Design?

Contra University

Learn from expert creatives how to earn more using next-gen AI tools.

MagicPath

The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?

creativeaiflow

Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?

freelancerlife

Freelancer life is wins, pivots, and everything in between. What’s yours right now?

Girtonian

pro

• Jun 19

configmakeathon Figma

Girtonian

pro

• Jun 19

Our process! We had so much fun!!

Sameer Gaikwad

• Jun 19

Breathverse: Aqua Ring

A childhood toy, rebuilt at planetary scale.

How it works

Allow microphone access.

Select the left or right air jet.

Exhale gently to propel the rings.

Switch sides to correct their trajectory.

Capture rings around celestial targets to form orbits.

configmakeathon Figma

Lee Black

• Jun 19

Fun, but out of breath now haha :)

Mohammed Essaid MEZERREG

pro

• Jun 18

Bubble war is an online multiplayer typing game.

You fight your opponents by typing the words on top of them.

You collect perks the same way as well. You can activate perks using "/perk-name".

Don't rush, check the perk list because it may cause damage as well.

spend 4k of credits on failed ideas.

Disappointed on myself and on those products. I simplified the idea to bubbles.

Spent so much time preparing the master prompt and the assets in figma and planning through figma jam.

I hit a nother blocker after I found out that both Supabase, instantdb presence can't handle less then 100 ms of latency and refresh rate.

I hooked the project to claude code through figma mcp and asked for a solution. It suggested some Saas services or a custom Phoenix server.

I am a developer myself, so I went with the server and boy it was hard. My heart popped up. By the end, it almost burst.

I can't believe I am submitting this for you to try.

Please don't break it. I can't afford to spend more 😂

The game from here: https://bubble-war.figma.site

configmakeathon Figma

Nia Nguyen

pro

• Jun 19

This is so creative! Don't forget to share this to Instagram, X, or LinkedIn with #ConfigMakeathon and @figma and drop the link in the comments here!