An Inventory & Crafting System in Javascript with Phaser

Install Visual Studio Code, download a version for your OS, then install the Live Server extension. Right-click a page in VS Code and open it with Live Server to preview.

Learn how to download and extract the survival game start zip, open the folder in Visual Studio Code, and run the game by opening index.html with Live Server in Chrome.

Create a dedicated inventory scene in Phaser, load the item sprite sheet, and render a scalable 8-column by 3-row grid of slots with margins and modulus wrapping.

Implement an interactive inventory in a Phaser game, enabling drag-and-drop between slots, toggle full inventory with the eye key, and robust refresh with slot destruction and depth handling.

Scroll through the inventory with the mouse wheel to select items, highlight the chosen slot, and update the held item sprite by mapping to frames and wrapping with modulus.

Explain and implement an observer pattern to keep the inventory and its user interface in sync with item pickups, using subscribe, unsubscribe, and broadcast mechanics in a Phaser game.

Create a base UI scene shared by inventory and crafting, set eight-pixel margin, implement scalable tile sizes, and build crafting slots with a crafting model that updates when inventory changes.

Build and arrange a crafting scene with multiple slots, items, and mats in an inventory system, including destroying slots on refresh and layout calculations.

Update items.js file to define crafting materials: pickaxe needs two wood and one stone, shovel needs one wood and two stone, and wood and stone cannot be crafted yet.

Develop a Phaser-based crafting scene that renders craft table items and mats, and tints sprites to reflect available and unavailable materials as you craft tools like the pickaxe and shovel.

Toggle the crafting menu with a key press; launch or stop the crafting scene based on its active state and disable inventory scrolling when the crafting menu is visible.

Craft a selected item from the inventory when canCraft is true, removing used materials, dropping items, and broadcasting inventory updates, as demonstrated by crafting a shovel.