Plants vs. Zombies Clone

Neil Haddley • June 16, 2026

Vibe coding a vanilla JS Plants vs. Zombies clone with Claude Code, complete with Playwright visual regression tests

AIJavaScriptclaude-codevibe-codinganthropicgame-developmentplaywright
← Back to Posts

I spent a lazy evening vibe coding a Plants vs. Zombies clone with Claude Code. The whole game lives in a single vanilla JavaScript file running on an HTML5 canvas — no frameworks, no build step — with sprites pulled from the UnityPlantsVsZombiesClone repo and the official Plants vs. Zombies wiki. I had Claude Code set up a Playwright-based visual regression test that screenshots the running game and compares it pixel-by-pixel against reference images, so I can keep adding plants and zombies without breaking the layout.

I recorded a demo video of the peashooter, sunflower, and wallnut fighting off zombies

I asked Claude Code to create a video demonstrating sunflower and walnut vs zombie and conehead gameplay, and checked the .gitignore conventions before recording the demo

I asked Claude Code to create a video demonstrating sunflower and walnut vs zombie and conehead gameplay, and checked the .gitignore conventions before recording the demo

I watched Claude Code work through the walnut and sunflower sprite assets while timing crackedness for the demo

I watched Claude Code work through the walnut and sunflower sprite assets while timing crackedness for the demo

I generated a visual regression test that compares the finished game screen against a reference Plants vs. Zombies image

I generated a visual regression test that compares the finished game screen against a reference Plants vs. Zombies image

I reviewed the compare-reference.js script Claude Code wrote to crop matching regions and compute pixel-difference SSIM scores

I reviewed the compare-reference.js script Claude Code wrote to crop matching regions and compute pixel-difference SSIM scores

References

UnityPlantsVsZombiesClone

Plants vs. Zombies/Gallery