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

No:39260

40

I want to make a matching game for these words kit..ALL
Developer User17438｜Date and time 24/1/27 12:36:54
Build time 16.123 sec｜Game capacity 4.178KB｜

Sure! Here's an example of a matching game using JavaScript and pictograms for the words "kite", "uncle", "picture", "study", and "baby". The game will display the pictograms and you need to match them correctly. You can run this code in a single HTML file by enclosing it within the script tags.

Matching Game

This code will create a game board with cards represented by the "❔" symbol. Each card represents a pictogram associated with a word. Clicking on a card will reveal the corresponding pictogram. You need to match the correct pairs by uncovering two cards at a time. Once all pairs are matched, a victory message will be displayed. The pictograms used are as follows: - "kite" is represented by a kite (🪁) - "uncle" is represented by a person with a child (👨‍👦) - "picture" is represented by a picture frame (🖼️) - "study" is represented by a stack of books (📚) - "baby" is represented by a baby (👶) Feel free to add more styles or enhance the game as per your requirements.

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a matching game using JavaScript and pictograms for the words "kite", "uncle", "picture", "study", and "baby". The game will display the pictograms and you need to match them correctly. You can run this code in a single HTML file by enclosing it within the script tags.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Matching Game</title>
    <style>
        .card {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            text-align: center;
            font-size: 24px;
            line-height: 100px;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Matching Game</h1>

<div id="gameBoard"></div>

<script>
        var words = ["kite", "uncle", "picture", "study", "baby"];
        var cards = [];
        var selectedCards = [];
        var completed = 0;

function createGameBoard() {
            var gameBoard = document.getElementById("gameBoard");

for (var i = 0; i < words.length; i++) {
                var card = document.createElement("div");
                card.className = "card";
                card.textContent = "❔";
                card.addEventListener("click", revealCard.bind(null, i));
                gameBoard.appendChild(card);
                cards.push(card);
            }
        }

function revealCard(index) {
            var card = cards[index];

if (selectedCards.length >= 2 || selectedCards.includes(card) || card.textContent !== "❔") {
                return;
            }

card.textContent = getPictogram(words[index]);
            selectedCards.push(card);

if (selectedCards.length === 2) {
                setTimeout(checkMatchingPair, 1000);
            }
        }

function checkMatchingPair() {
            var card1 = selectedCards[0];
            var card2 = selectedCards[1];

if (card1.textContent === card2.textContent) {
                card1.removeEventListener("click", revealCard);
                card2.removeEventListener("click", revealCard);
                card1.style.backgroundColor = "lightgreen";
                card2.style.backgroundColor = "lightgreen";
                selectedCards = [];
                completed++;

if (completed === words.length / 2) {
                    setTimeout(showVictoryMessage, 500);
                }
            } else {
                card1.textContent = "❔";
                card2.textContent = "❔";
                selectedCards = [];
            }
        }

function showVictoryMessage() {
            alert("Congratulations! You've won the game!");
            cards.forEach(function(card) {
                card.style.backgroundColor = "lightblue";
            });
            completed = 0;
        }

function getPictogram(word) {
            switch (word) {
                case "kite":
                    return "🪁";
                case "uncle":
                    return "👨‍👦";
                case "picture":
                    return "🖼️";
                case "study":
                    return "📚";
                case "baby":
                    return "👶";
                default:
                    return "";
            }
        }

createGameBoard();
    </script>
</body>
</html>
```

This code will create a game board with cards represented by the "❔" symbol. Each card represents a pictogram associated with a word. Clicking on a card will reveal the corresponding pictogram. You need to match the correct pairs by uncovering two cards at a time. Once all pairs are matched, a victory message will be displayed.

The pictograms used are as follows:
- "kite" is represented by a kite (🪁)
- "uncle" is represented by a person with a child (👨‍👦)
- "picture" is represented by a picture frame (🖼️)
- "study" is represented by a stack of books (📚)
- "baby" is represented by a baby (👶)

Feel free to add more styles or enhance the game as per your requirements.