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

No:24874

Can you help me with creating a game
Developer User11973｜Date and time 23/11/13 18:32:13
Build time 189.639 sec｜Game capacity 5.086KB｜

Script

Certainly! I'd be happy to help you create a game using HTML and JavaScript. Here's a simple example of a game that you can play on a smartphone. It's a memory matching game using pictograms:

Pictogram Memory Game

To use this game, save the code in a file with a .html extension (e.g., game.html) and open it in a web browser on your smartphone. You should see a grid of pictogram cards. The goal is to match all the pairs by flipping two cards at a time. If the cards match, they will stay flipped. If not, they will be flipped back. The game is won when all the cards are matched. Note: Make sure you have pictogram image files (named pictogram1.png, pictogram2.png, etc.) in the same folder as the HTML file, and update the `const pictograms` array with the appropriate URLs or filenames of the pictograms you want to use. Feel free to customize the game further, add more levels or features, or change the styling to suit your preferences. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Certainly! I'd be happy to help you create a game using HTML and JavaScript. Here's a simple example of a game that you can play on a smartphone. It's a memory matching game using pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Memory Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }

h1 {
            color: #333333;
            margin-top: 50px;
        }

#game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 50px;
        }

.card {
            width: 80px;
            height: 80px;
            background-color: #ffffff;
            margin: 10px;
            border-radius: 5px;
            cursor: pointer;
        }

.hidden {
            background-color: #dddddd;
        }

.matched {
            background-color: #33cc33;
        }
    </style>
</head>
<body>
    <h1>Pictogram Memory Game</h1>
    <div id="game-container"></div>

// Create an array containing pairs of pictogram URLs
        const cards = pictograms.concat(pictograms);

// Shuffle the cards randomly
        cards.sort(() => 0.5 - Math.random());

let flippedCards = [];
        let matchedCards = [];

// Function to handle card clicks
        function handleClick(cardIndex) {
            if (flippedCards.length < 2 && !flippedCards.includes(cardIndex) && !matchedCards.includes(cardIndex)) {
                flippedCards.push(cardIndex);
                updateCardDisplay(cardIndex);
                
                // Check if two cards are flipped
                if (flippedCards.length === 2) {
                    setTimeout(checkForMatch, 1000);
                }
            }
        }

// Function to update card display
        function updateCardDisplay(cardIndex) {
            const cardElement = document.getElementById(`card${cardIndex}`);
            cardElement.classList.add("hidden");
            cardElement.style.backgroundImage = `url(${cards[cardIndex]})`;
        }

// Function to check if flipped cards are a match
        function checkForMatch() {
            const [cardIndex1, cardIndex2] = flippedCards;
            const card1 = cards[cardIndex1];
            const card2 = cards[cardIndex2];

if (card1 === card2) {
                matchedCards.push(cardIndex1, cardIndex2);
                
                const cardElement1 = document.getElementById(`card${cardIndex1}`);
                cardElement1.classList.remove("hidden");
                cardElement1.classList.add("matched");

const cardElement2 = document.getElementById(`card${cardIndex2}`);
                cardElement2.classList.remove("hidden");
                cardElement2.classList.add("matched");
            } else {
                flipCardsBack(cardIndex1, cardIndex2);
            }

flippedCards = [];
        }

// Function to flip cards back if not a match
        function flipCardsBack(cardIndex1, cardIndex2) {
            const cardElement1 = document.getElementById(`card${cardIndex1}`);
            cardElement1.classList.remove("hidden");
            cardElement1.style.backgroundImage = "";

const cardElement2 = document.getElementById(`card${cardIndex2}`);
            cardElement2.classList.remove("hidden");
            cardElement2.style.backgroundImage = "";
        }

// Create card elements and add click event listeners
        const gameContainer = document.getElementById("game-container");
        for (let i = 0; i < cards.length; i++) {
            const card = document.createElement("div");
            card.id = `card${i}`;
            card.className = "card";
            card.addEventListener("click", () => handleClick(i));
            gameContainer.appendChild(card);
        }
    </script>
</body>
</html>
```

Note: Make sure you have pictogram image files (named pictogram1.png, pictogram2.png, etc.) in the same folder as the HTML file, and update the `const pictograms` array with the appropriate URLs or filenames of the pictograms you want to use.

Feel free to customize the game further, add more levels or features, or change the styling to suit your preferences. Enjoy!