Improving Item Collection in a JavaScript Game

Let’s make our collision detection pixel-accurate.

Image by pch.vector on freepik

Over the past few months, I have been gradually building a JavaScript dungeon crawler that features a player moves through an auto-generated maze of caverns. While contending with enemies, the player can collect health potions and weapons — and with danger afoot, the player must grab them fast.

Helping the player grab an item as quickly as possible depends on effective collision detection. In an early version, the player had to be right on top of an item before collecting it.

After improving the code, I finally got the game to the point where the player could collect an item simply by touching a small part of it.