Building My First Game in 2 Hours: Kitty Catcher 🐱➡️🐶

Hey IndieHackers! 👋

I wanted to share my journey of creating a small, fun game called Kitty Catcher using HTML, CSS, and JavaScript. It was a quick project — done in just 2 hours — but it came with its fair share of challenges. I figured that sharing these obstacles and how I overcame them might help someone else, especially if you're diving into game development or web projects.

Here’s a breakdown of the coding challenges I faced, along with how I solved them.

🐱 Challenge 1: Disappearing Emoji
The cat emoji kept randomly disappearing, and I couldn’t figure out why at first. After a bit of debugging, I realized it was because I wasn't properly updating the game board after each move. When moving the kitty, I wasn’t redrawing everything, causing the emoji to vanish.

Solution:
Make sure the game board is always re-rendered and updated after any movement or action. Explicitly place every object (like the cat and dog emojis) in the correct grid positions.

cells[kittyPosition.y * 10 + kittyPosition.x].textContent = '🐱';

💥 Challenge 2: Conflicting Object Positions
At one point, the dog and the walls could occupy the same grid cell, which caused the cat emoji to disappear when the objects collided. This was a bit tricky to track because multiple objects were trying to be in the same space.

Solution:
Before updating any object's position, ensure no other object already occupies that space. This way, no two objects (dog, cat, walls) overlap.

if (!walls.some(wall => wall.x === newX && wall.y === newY)) {
kittyPosition = { x: newX, y: newY };
}

🎵 Challenge 3: Background Music Not Playing
I wanted some soothing background music to enhance the gaming experience, but the browsers weren't cooperating. Autoplay for audio was being blocked.

Solution:
Browsers block autoplay unless there’s user interaction, so I moved the music playback into the “Start Game” button event. This way, when the player clicks the button to start the game, the audio begins playing.

backgroundMusic.play(); // Triggered after 'Start Game' is clicked

📱 Challenge 4: Swipe Gestures on Mobile
I wanted to make the game mobile-friendly with swipe controls. However, the swipe gestures sometimes didn’t trigger, and worse, text selection would happen when trying to move the kitty. 😅

Solution:
To fix this, I disabled text selection by adding user-select: none; in the CSS and properly handled touchstart and touchend events to ensure the swipe detection worked smoothly.

.cell {
user-select: none;
}

document.addEventListener('touchstart', (e) => {
touchstartX = e.changedTouches[0].screenX;
});

🚫 Challenge 5: Scrolling on Swipe Gestures
On mobile, every time I tried to swipe, the page would scroll instead of responding to the game’s swipe controls. This was frustrating because I wanted to avoid any accidental page movement.

Solution:
By using preventDefault() on the touchmove event, I was able to disable the page scrolling behavior and let the game capture the swipe gestures.

document.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });

Building Kitty Catcher was a great experience, and it reminded me how fun it can be to dive into a small project, even when you’re feeling stuck. Sometimes the best way to move forward is to just start with something small — you never know what you’ll learn along the way!

If you want to try the game or have questions about any of these issues, feel free to reach out. I’m always happy to share what I’ve learned or talk through any challenges you’re facing.

Thanks for reading, and happy coding! 🐱💻