Reverse Snake

A small static-site mini game where the player places food and a shortest-path AI controls the snake. The goal is to bait the AI into a position where its own body becomes the trap.

Run the Demo

npm start

Then open http://localhost:8080.

Embed on a Static Site

Copy the src directory to your static site and add:

<link rel="stylesheet" href="./src/styles/reverse-snake.css" />
<reverse-snake-game width="18" height="18" speed="130" show-path="true"></reverse-snake-game>
<script type="module" src="./src/reverse-snake-element.js"></script>

The embedded component shows only the three stats and the grid. Configure speed and path visibility through attributes:

<reverse-snake-game width="18" height="18" speed="140" show-path="false"></reverse-snake-game>

Install from npm

npm install reverse-snake-game

After publishing, import the element and stylesheet in your app entry:

import "reverse-snake-game/styles.css";
import "reverse-snake-game/element";

Then place the component in your HTML:

<reverse-snake-game width="18" height="18" speed="140"></reverse-snake-game>

You can also mount it manually:

<div id="reverse-snake"></div>

<script type="module">
  import { ReverseSnakeGame } from "reverse-snake-game";
  import "reverse-snake-game/styles.css";

  new ReverseSnakeGame("#reverse-snake", {
    width: 18,
    height: 18,
    speed: 130,
    showPath: true
  });
</script>

Design Notes

• Core game rules live in src/core and do not touch the DOM.
• Rendering and controls live in src/ui.
• src/reverse-snake-element.js exposes the Web Component entry point.
• The pathfinder uses BFS because every grid move has the same cost.
• Snake body cells are time-aware obstacles: a body segment is blocked only if it will still be there when the head arrives.
• After simulating a path to food, the AI checks whether the resulting snake can still reach safe open space. If not, it wanders and rechecks each tick.

Tests

npm test