AI game creator

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

No:15788

←

Prev Next

→

Tracing pattern
Developer User6875｜Date and time 23/9/11 16:22:09
Build time 29.615 sec｜Game capacity 4.322KB｜

Script

Sure, here's an example of a game that involves tracing a pattern using pictograms. It's a simple game where the player needs to follow the given pattern by swiping their finger on the smartphone screen.

In this game, a pattern is defined using pictograms such as animals. The player needs to swipe their finger on the smartphone screen, following the pattern correctly. The pattern is shown one pictogram at a time, and the player needs to swipe to the right to move to the next pictogram. Once the player completes the pattern, an alert is shown congratulating them, and the game resets to allow for another round.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tracing Pattern Game</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f3f3;
        }
        
        #canvas {
            width: 300px;
            height: 300px;
            background-color: white;
            border: 1px solid black;
            touch-action: none;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>

// Variable to keep track of current index in the pattern
        let currentIndex = 0;

// Get the canvas element
        const canvas = document.getElementById('canvas');

// Set up touch event listeners to track finger movement
        canvas.addEventListener('touchstart', handleTouchStart, false);
        canvas.addEventListener('touchmove', handleTouchMove, false);
        canvas.addEventListener('touchend', handleTouchEnd, false);

// Variables to store touch position information
        let touchX, touchY;

function handleTouchStart(event) {
            // Get the initial touch position
            touchX = event.touches[0].clientX;
            touchY = event.touches[0].clientY;
        }

function handleTouchEnd() {
            // Check if the player completed the pattern
            if (currentIndex === pattern.length) {
                alert("You successfully traced the pattern!");
                resetGame();
            }
        }

function resetGame() {
            // Reset the current index and update the current pictogram
            currentIndex = 0;
            checkPatternComplete();
        }
        
        // Set up the current pictogram element
        const currentPictogram = document.createElement('div');
        currentPictogram.setAttribute('id', 'pictogram');
        currentPictogram.style.fontSize = '60px';
        currentPictogram.style.textAlign = 'center';
        canvas.appendChild(currentPictogram);
        
        // Initialize the game
        resetGame();
    </script>
</body>
</html>
```