A game like Minecraft but you guess how to craft items's game

Click here for free DL of the app version that can save data.

No:8202

6053

←

Prev Next

→

A game like Minecraft but you guess how to craft i..ALL
Developer anonymous｜Date and time 70/1/1 10:40:44
Build time unknown sec｜Game capacity 6.044KB｜

Script

Drag items from the left panel onto the crafting table to guess the recipe.

This is a simple crafting guess game implemented as a single HTML file. It consists of a crafting table, where the user can drag and drop items from the left panel onto the table to guess the recipe. The game has a check button that, when clicked, checks if the selected items match the recipe. If the items match, a success message is displayed, indicating that the item has been crafted. Otherwise, an error message is displayed, indicating that the recipe is incorrect. The game is designed to be played on a smartphone, allowing users to interact with the crafting table by dragging and dropping items using touch gestures. The game uses pictograms represented by different colored slots to represent items.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Crafting Guess Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        #container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #crafting-table {
            margin-bottom: 20px;
        }
        .slot {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            vertical-align: middle;
        }
        .empty {
            background-color: #f2f2f2;
        }
        .item {
            background-color: #8c8c8c;
        }
        .instruction {
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 18px;
        }
        #result {
            font-size: 24px;
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="crafting-table">
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
            <div class="slot empty"></div>
        </div>
        <div class="instruction">Drag items from the left panel onto the crafting table to guess the recipe.</div>
        <div>
            <div class="slot item"></div>
            <div class="slot item"></div>
            <div class="slot item"></div>
            <div class="slot item"></div>
        </div>
        <button id="checkBtn">Check</button>
        <div id="result"></div>
    </div>

let selectedSlots = [];

craftingTableSlots.forEach(function(slot) {
                slot.addEventListener('dragenter', handleDragEnter);
                slot.addEventListener('dragover', handleDragOver);
                slot.addEventListener('dragleave', handleDragLeave);
                slot.addEventListener('drop', handleDrop);
            });

itemSlots.forEach(function(slot) {
                slot.addEventListener('dragstart', handleDragStart);
                slot.addEventListener('dragend', handleDragEnd);
            });

checkButton.addEventListener('click', checkRecipe);

function handleDragStart(e) {
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', e.target.classList);
            }

function handleDragEnter(e) {
                e.preventDefault();
                this.classList.add('drag-over');
            }

function handleDragOver(e) {
                e.preventDefault();
            }

function handleDragLeave() {
                this.classList.remove('drag-over');
            }

function handleDrop(e) {
                e.preventDefault();
                this.classList.remove('drag-over');
                const itemClass = e.dataTransfer.getData('text/plain');
                if (this.classList.contains('empty')) {
                    this.classList.remove('empty');
                    this.classList.add(...itemClass);
                    selectedSlots.push(this);
                }
            }

function handleDragEnd() {
                this.classList.remove('drag-over');
            }

function checkRecipe() {
                const recipeItems = Array.from(itemSlots).map(function(slot) {
                    return Array.from(slot.classList).filter(function(className) {
                        return className !== 'slot' && className !== 'item';
                    });
                });

const selectedItems = selectedSlots.map(function(slot) {
                    return Array.from(slot.classList).filter(function(className) {
                        return className !== 'slot' && className !== 'empty';
                    });
                });

if (selectedItems.length === recipeItems.length &&
                    selectedItems.every(function(item) {
                        return recipeItems.some(function(recipeItem) {
                            return JSON.stringify(item) === JSON.stringify(recipeItem);
                        });
                    })) {
                    resultDisplay.textContent = 'Congratulations! You crafted the item!';
                } else {
                    resultDisplay.textContent = 'Oops! Incorrect recipe. Try again!';
                }
            }
        });
    </script>
</body>
</html>
```

This is a simple crafting guess game implemented as a single HTML file. It consists of a crafting table, where the user can drag and drop items from the left panel onto the table to guess the recipe.

The game has a check button that, when clicked, checks if the selected items match the recipe. If the items match, a success message is displayed, indicating that the item has been crafted. Otherwise, an error message is displayed, indicating that the recipe is incorrect.

The game is designed to be played on a smartphone, allowing users to interact with the crafting table by dragging and dropping items using touch gestures. The game uses pictograms represented by different colored slots to represent items.