Minecraft – Crafting Table

For this blog post we have recreated the crafting table in Minecraft using HTML, CSS and JavaScript.

This crafting table enables you to pick up items from your inventory to recreate some of the key recipes to craft new items and add these new items to your inventory.

Our version of the inventory is simplified as it does not record the quantity of items you have left. For each item listed in your inventory it is assumed that you have an infinite supply.

The purpose of this challenge is for you to investigate and reverse engineer how this code works.

First you may want to try this code with a few recipes:

HTML, CSS and JavaScript Code

See the Pen Minecraft Crafting by 101 Computing (@101Computing) on CodePen.

Your Task

You can then adapt this code to add a few more recipes such as the recipe to craft a compass:

And the recipe to craft a clock:

Note that you will find here a full list of Minecraft items.

For more crafting recipes, check this page.

Extra Challenge

The next step would be to tweak this code further to display and update the quantities available for each item in the inventory. These quantities should be reduced when items are used to craft new items, and increased when newly crafted items are added to the inventory.