Trap a cat 🐈 A web game bring me back to 2008
Trying to demo my first web game, trap a cat comes to my mind out of the blue. It was one of my favorite casual games. I love cat, I love how randomly they move, like the game’s main idea.
Published Nov 14, 2024
Trying to demo my first web game, trap a cat comes to my mind out of the blue. The game logic is simple, so I start by asking Q to build a structure.
With a simple prompt of Trap the cat, Q is super smart to figure out the basic game logic.
- The game is played on an n*n grid
- The cat starts in the center
- Players can click cells to block them
- The cat moves randomly among available adjacent cells
- The goal is to trap the cat before it reaches the edge of the grid
It even prompt me with suggestions to improve the gameplay.
Image not found
I picked 3, and the game is updated with a score system! Simple but makes it more complete.
Image not found
As you can see in this screenshot, the cat has been trapped in the black walls, but the game doesn’t end because it’s not fully trapped in one cell - 0 possible move. I don’t want my cat being that miserable in one cell. I want to give it more free space! So I ask Q to redefine the winning condition and show the winning message at the webpage.
Image not found
Instead of checking possible move counts, Q prompt me with a new way to check if the cat is trapped - Checking if the cat can reach the border using a flood-fill approach! Smart!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Add this new function to check if the cat can reach the border
function canReachBorder(startX, startY) {
// Create a visited array to keep track of checked cells
let visited = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(false));
// Queue for BFS (Breadth-First Search)
let queue = [{x: startX, y: startY}];
visited[startY][startX] = true;
while (queue.length > 0) {
let current = queue.shift();
// If we reached the border, return true
if (current.x === 0 || current.x === GRID_SIZE-1 ||
current.y === 0 || current.y === GRID_SIZE-1) {
return true;
}
// Check all adjacent cells
let possibleMoves = getPossibleMoves(current.x, current.y);
for (let move of possibleMoves) {
if (!visited[move.y][move.x]) {
visited[move.y][move.x] = true;
queue.push(move);
}
}
}
// If we've checked all reachable cells and haven't found the border
return false;
}Now my cat can breathe in the closed area. Thank god!
Image not found
Image not found
Finally, I want the interface to be prettier. Can Q help me with that??
Yes! Look that decent purple gray blur. It’s just amazingly modern. I hold my breath when my cat is trapped in this small purple world, safe and sound.
Image not found
Q really helps me to build this cute little web game in just 30 mins. I am surprised how it could handle my random requests in a clever and thoughtful way. Not only it helps me to solve the problem, but also prompts me with more additional ideas to keep boosting my creativity.
Even just for such a simple childhood game. It brings me back to 8 years old, a purple dream with an orange little cat. Now I do have my own real cat, cuddling it in my arms - it was like a little trap. When I use a towel to wrap him up to cut his nails, another trap. haha
Hope you all have fun digging back to childhood a bit. Q will help your vintage dream come true.
Image not found
Comments
Log in to comment