Browser-based Game with Claude

Published by

on

Introduction

If there’s a term of the past several months I’ve grown to hate, it is this one: vibe-coding. However, like any potential bias, I wanted to test to see if meaningful progress has indeed been made in AI-assisted or AI-directed development. To say that I was taken aback is a bit of an understatement. AI such as Claude (and I’d hazard to say, especially Claude) are quite powerful in development work.

An earlier project I worked on was with C++, and that was done working with both Copilot and my own knowledge of C++ to try and correct some of the mistakes. With Claude (Haiku 4.5, Sonnet 4.6, and rarely Opus 4.6), I found a way to develop a substantial MVP of a browser-based game with only minimal intervention.

Observations

A couple of tips that I learned along the way:

  • Start with Haiku to brainstorm ideas you already have a somewhat decent direction on. It’s even fairly useful for pseudocode or code snippets.
  • Work with Haiku to allow yourself to refine your idea, but don’t yet take it as a final source of truth. Let Haiku aggregate what you’ve discussed thus far into a markdown file and add it to a project.
  • Run the markdown file by Sonnet. Prompt Sonnet to review the markdown file for your current thoughts on what you are building, but to think carefully over areas that need to be strengthened or areas that could introduce risk or lack cohesion for the overall vision.
    • One thing I did notice is Haiku is especially poor at creatively naming things. As someone who enjoys creative writing, Haiku can be very cliche and stale. Sonnet can clean it up better.
  • From here, limit each chat to only a few revisions per file with Sonnet. Otherwise, you start eating up tokens a decent bit.
  • Note that you will have to revise as you go and bugs crop up very frequently. Things you are certain you fixed prior, all of a sudden, they crop again. It’s like Claude’s models conveniently forget. I’m sure this can be helped with better prompt design and keeping updated markdown files for the spec.
  • Another efficiency issue I noticed is Claude likes to generate one huge file many times. Somewhere along the way, I forced a breakout into separate HTML, CSS, JS and JSON files.

It also could not always understand when something broke that was, let’s say, “less visible” to it. Showing screenshots helped, but wasn’t foolproof, leading me to have to dig into the code and analyze the <div> element, the JavaScript, or the CSS. Thankfully, I know HTML and CSS, and I know just enough JavaScript to understand what’s going on.

Conclusion

AI-assisted development has incredible potential. Whether you are a junior or a senior developer, or even someone not as exposed to programming at all, there are massive opportunities for streamlining work. My assessment would be that companies who aren’t hiring junior developers are majorly missing the mark. We need incoming junior developers with this new world. We need a new era of developers and engineers that from the start (after college and at least a few hands-on projects from scratch) who will learn how to co-exist with AI, learn its strengths, and its weaknesses. These junior levels will be our beacon into the rest of the 21st century as we embrace more and more powerful tools to open the floodgates of innovation… but that’s only if we choose that path.

I still don’t think “vibe-coding” is appropriate for people without a development or engineering background. They simply lack the awareness as to how to navigate the landscape without making a mess of it… it is still too easy to make critical missteps which lead to a buggy, resource-hungry mess. Developers and engineers learn how to code efficiently. We learn what differentiates professional code from amateur.

But if anything, AI will allow more people to express themselves while also setting a higher bar for accountability. We shouldn’t just blame AI for our poor coding mistakes. That’s the lazy way out. Instead, embrace the power the tools are giving us, but recognize you–as a developer–still own the codebase.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.