Sprite Garden

Sunday, 19 October 2025

I’ve wanted for some time to build a canvas based JavaScript game after checking out things like the breakout game tutorial on MDN or reading and working through early Raspberry Pi project books, but I never felt like I built something I enjoyed. Iterating through the basics and gradually improving on this piece by piece with generative AI however, has brought this from being barely usable to something I’m having fun with.

So what is Sprite Garden? A 2D sandbox exploration and farming progressive web app where players can explore generated worlds within different biomes, dig for resources, or plant a variety crops to grow.

Procedural World Generation – Each world is unique, generated from a shareable seed
Multiple Biomes – Explore forests, deserts, tundras, and swamps, each with unique characteristics
Farming System – Plant and harvest different crop types with various growth cycles
Resource Mining – Dig for resources like coal, iron, and gold
Cave Systems – Discover underground caves filled with resources and challenges
Building – Use collected materials to place blocks and shape the world
Save & Load – Your progress can be saved on device or as a file to share

The project source is open to reading or contribution and has a foundation on the web platform making it highly modifiable. Drawing with tiles is as easy as using the built in block placement system with collected resources, or by using tools directly with a Map Editor under Settings. This can be made available with the Konami Code bookmarklet or by entering it manually: ↑↑↓↓←→←→ba (or swipe the directions and use tap/tap in place of ba on mobile).

Declarative Shadow DOM

Tuesday, 24 December 2024

The web platform continues to grow, and features continue to land as baseline. One that I have been anticipating being widely supported across the latest browsers has been declarative shadow DOM. In essence, it enables Web Components to be server-side rendered and shown on the client without JavaScript. Check out the example below, where shadow DOM is used both declaratively with HTML and imperatively with JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Declarative Shadow DOM</title>
  </head>
  <body>
    <style>
      p {
        color: blue;
        border: dashed 0.0625rem red;
        padding: 1rem;
      }
    </style>
    <x-element>
      <template shadowrootmode="open">
        <style>
          h1 {
            color: red;
            border: dotted 0.0625rem blue;
            padding: 1rem;
          }
        </style>
        <h1>Welcome to x-element!</h1>
        <slot></slot>
      </template>
      <p>Hello slot one!</p>
    </x-element>
    <x-element><p>Hello slot two!</p></x-element>
    <script type="module">
      const tagName = "x-element";
      if (!customElements.get(tagName)) {
        customElements.define(
          tagName,
          class extends HTMLElement {
            constructor() {
              super();

              if (!this.shadowRoot) {
                const shadow = this.attachShadow({ mode: "open" });
                const previousShadowRoot =
                  document.querySelector(tagName)?.shadowRoot;

                if (previousShadowRoot) {
                  shadow.innerHTML = previousShadowRoot.innerHTML;
                }
              }
            }
          }
        );
      }

      const xApp = document.createElement(tagName);
      const paragraph = document.createElement("p");

      paragraph.append("Hello slot three!");
      xApp.append(paragraph);

      document.body.append(xApp);
    </script>
  </body>
</html>

A place to render web applications

Friday, 29 December 2023

I’ve added a hobby project to my GitHub profile that has been given the title “Apps” as it is a progressive web app that aims to adhere to the App Shell model. The primary routes are prerendered as static HTML during the build process and are loaded lazily at runtime to ensure a smaller client-side JavaScript bundle. The source code is hosted on GitHub and comprises several components that operate within the Angular framework. Check it out at: https://kherrick.github.io/apps/