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

No:25166

81

Stop clock to 1mim 1sec 1
Developer User12262｜Date and time 23/11/18 18:42:50
Build time 147.356 sec｜Game capacity 6.202KB｜

Sure! Here's an example of a simple game implemented as a single HTML file, using JavaScript and enclosed within script tags. The game is called "PictoMatch" and it involves matching pictograms within a given time limit on a smartphone.

PictoMatch - Smartphone Game

To play the game, you can copy the above code and save it as an HTML file (e.g., `pictomatch.html`). Open the file in your web browser, and tap the "Start Game" button. You will then have 60 seconds to match all the pictograms. Tap on a pictogram to select it, and tap on another pictogram to check if they match. If they match, they will turn green. If they don't match, they will be unselected after a brief delay. If you match all the pictograms before the time runs out, you'll be notified that you've won. Otherwise, you'll be alerted when the time is up. Please note that this is a basic implementation and can be customized further based on your specific requirements. Feel free to modify the code to add more levels, interactions, or any other desired enhancements. Enjoy playing PictoMatch!

→ 　

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 simple game implemented as a single HTML file, using JavaScript and enclosed within script tags. The game is called "PictoMatch" and it involves matching pictograms within a given time limit on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PictoMatch - Smartphone Game</title>
</head>
<body>
    <script>
        // Array of pictograms
        const pictograms = [
            "🍎", "🍌", "🍒", "🍓", "🍆",
            "🍕", "🍔", "🍟", "🥪", "🌭",
            "🍩", "🍪", "🍦", "🍭", "🍫"
        ];

// Shuffle function to randomize pictograms
        function shuffle(array) {
            let currentIndex = array.length, temporaryValue, randomIndex;
            
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex--;

temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }

return array;
        }

// Shuffled and selected pictograms for a level
        const shuffledPictograms = shuffle(pictograms).slice(0, 8);
        
        // Game timer
        let seconds = 60;
        let timerInterval;
        
        // Start the game
        function startGame() {
            timerInterval = setInterval(countdown, 1000);
            renderPictograms();
        }

// Countdown function
        function countdown() {
            if (seconds > 0) {
                seconds--;
                updateTimer();
            } else {
                clearInterval(timerInterval);
                alert("Game over!");
            }
        }

// Update timer display
        function updateTimer() {
            document.getElementById("timer").textContent = formatTime(seconds);
        }

// Format time in MM:SS format
        function formatTime(time) {
            const minutes = Math.floor(time / 60);
            const seconds = time % 60;
            
            return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

// Render pictograms on the screen
        function renderPictograms() {
            const pictogramContainer = document.getElementById("pictograms");

shuffledPictograms.forEach(pictogram => {
                const pictogramElement = document.createElement("div");
                pictogramElement.classList.add("pictogram");
                pictogramElement.textContent = pictogram;
                pictogramContainer.appendChild(pictogramElement);
            });

pictogramContainer.addEventListener("click", handlePictogramClick);
        }

// Handle click event on pictograms
        function handlePictogramClick(event) {
            const clickedPictogram = event.target;

if (clickedPictogram.classList.contains("selected")) {
                clickedPictogram.classList.remove("selected");
            } else {
                const selectedPictograms = document.querySelectorAll(".pictogram.selected");
                
                if (selectedPictograms.length < 2) {
                    clickedPictogram.classList.add("selected");
                    
                    if (selectedPictograms.length === 1) {
                        const firstPictogram = selectedPictograms[0];
                        if (firstPictogram.textContent === clickedPictogram.textContent) {
                            firstPictogram.classList.add("matched");
                            clickedPictogram.classList.add("matched");
                        } else {
                            setTimeout(() => {
                                firstPictogram.classList.remove("selected");
                                clickedPictogram.classList.remove("selected");
                            }, 500);
                        }
                    }
                }
            }

checkWinCondition();
        }
        
        // Check if all pictograms are matched
        function checkWinCondition() {
            const matchedPictograms = document.querySelectorAll(".pictogram.matched");
            if (matchedPictograms.length === shuffledPictograms.length) {
                clearInterval(timerInterval);
                alert("Congratulations! You won!");
            }
        }
    </script>

<style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

h1 {
            color: #333;
        }

#timer {
            font-size: 24px;
            margin-bottom: 20px;
        }

.pictogram {
            display: inline-block;
            font-size: 48px;
            cursor: pointer;
            transition: transform 0.2s;
        }

.pictogram:hover {
            transform: scale(1.2);
        }

.pictogram.selected {
            background-color: yellow;
        }

.pictogram.matched {
            background-color: green;
            color: white;
        }
    </style>

<h1>PictoMatch - Smartphone Game</h1>
    <div id="timer"></div>
    <div id="pictograms"></div>

<button onclick="startGame()">Start Game</button>
</body>
</html>
```

To play the game, you can copy the above code and save it as an HTML file (e.g., `pictomatch.html`). Open the file in your web browser, and tap the "Start Game" button. You will then have 60 seconds to match all the pictograms. Tap on a pictogram to select it, and tap on another pictogram to check if they match. If they match, they will turn green. If they don't match, they will be unselected after a brief delay. If you match all the pictograms before the time runs out, you'll be notified that you've won. Otherwise, you'll be alerted when the time is up.

Please note that this is a basic implementation and can be customized further based on your specific requirements. Feel free to modify the code to add more levels, interactions, or any other desired enhancements. Enjoy playing PictoMatch!