Tap on the shapes!'s game | AI game creator

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

No:7917

311

Tap on the shapes!
Developer User4098｜Date and time 23/7/10 23:25:51
Build time 11.507 sec｜Game capacity 3.485KB｜

Sure! Here's a simple game that you can play on a smartphone using pictograms. The game involves tapping on randomly appearing shapes to score points within a given time limit. Please note that due to the limitations of this text-based format, I will provide a code snippet instead of a single HTML page. You can copy the code and save it as an HTML file to run it as a game.

To play the game, copy the above code and save it as an HTML file (e.g., "tap_shapes_game.html"). Open the HTML file in a web browser on your smartphone. You should see a game area with randomly appearing shapes (represented by a red dot pictogram). Tap on the shapes to score points within 60 seconds. The game will keep track of your score and display a "Game Over" message with the final score once the time runs out. You can start a new game by tapping "OK" in the alert dialog. Note: The code above uses the "translate" CSS property to position the shapes randomly within the game area. If pictograms are not visible, you may need to replace the "textContent" of the shape element with appropriate Unicode symbols or emojis that your browser supports.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's a simple game that you can play on a smartphone using pictograms. The game involves tapping on randomly appearing shapes to score points within a given time limit.

Please note that due to the limitations of this text-based format, I will provide a code snippet instead of a single HTML page. You can copy the code and save it as an HTML file to run it as a game.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tap Shapes Game</title>
    <style>
        #game-area {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 400px;
            width: 400px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: red;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game-area"></div>

<script>
        var gameArea = document.getElementById('game-area');
        var score = 0;
        var timeLeft = 120;
        var timerId;

function startGame() {
            score = 0;
            timeLeft = 60;
            gameArea.innerHTML = '';
            timerId = setInterval(updateTime, 1000);
            generateShape();
        }

function generateShape() {
            var shape = document.createElement('div');
            shape.classList.add('shape');
            shape.textContent = '⚫️';
            var maxX = gameArea.clientWidth - 150;
            var maxY = gameArea.clientHeight - 150;
            var posX = Math.random() * maxX;
            var posY = Math.random() * maxY;
            shape.style.transform = `translate(${posX}px, ${posY}px)`;
            shape.addEventListener('click', onShapeClick);
            gameArea.appendChild(shape);
        }

function onShapeClick() {
            this.removeEventListener('click', onShapeClick);
            gameArea.removeChild(this);
            score++;
        }

function updateTime() {
            timeLeft--;
            if (timeLeft < 0) {
                clearInterval(timerId);
                alert('Game Over! Your Score: ' + score);
                startGame();
            }
        }

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

To play the game, copy the above code and save it as an HTML file (e.g., "tap_shapes_game.html"). Open the HTML file in a web browser on your smartphone. You should see a game area with randomly appearing shapes (represented by a red dot pictogram). Tap on the shapes to score points within 60 seconds. The game will keep track of your score and display a "Game Over" message with the final score once the time runs out. You can start a new game by tapping "OK" in the alert dialog.

Note: The code above uses the "translate" CSS property to position the shapes randomly within the game area. If pictograms are not visible, you may need to replace the "textContent" of the shape element with appropriate Unicode symbols or emojis that your browser supports.