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

No:12958

119

←

Prev Next

→

Frog
Developer User5659｜Date and time 23/8/25 13:20:24
Build time 26.638 sec｜Game capacity 3.982KB｜

Script

Sure, here's a simple Frog game implemented in a single HTML file using JavaScript and enclosed in script tags. This game is designed for smartphone operation and uses pictograms.

Frog Game

Tap on the screen to move the frog and catch flies!

🐸

This HTML file sets up a simple Frog game where the player's goal is to catch flies by tapping on the screen to move the frog. The game interface includes a title, instructions, and a game container where the frog and flies are displayed. The frog is represented by a frog pictogram (🐸) and the flies by a fly pictogram (🐜). The score is displayed dynamically as the player catches flies. When the player taps on the screen, the frog moves to the tapped position and checks for collision with the flies. If there is a collision, the score is incremented and the flies are reset to a new random position. The game can be started by tapping anywhere on the screen.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's a simple Frog game implemented in a single HTML file using JavaScript and enclosed in script tags. This game is designed for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Frog Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

#gameContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
        }

.frog {
            font-size: 48px;
        }

.clickable {
            cursor: pointer;
        }

.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Frog Game</h1>
  
    <p>Tap on the screen to move the frog and catch flies!</p>
  
    <div id="gameContainer">
        <span id="frog" class="frog">🐸</span>
        <span id="flies" class="hidden">🐛</span>
    </div>

var tapX = event.pageX - frog.offsetWidth / 2;
            var tapY = event.pageY - frog.offsetHeight / 2;

frog.style.left = tapX + 'px';
            frog.style.top = tapY + 'px';

// Check for collision with the flies
            if (isColliding(frog, flies)) {
                score++;
                updateScore();
                resetFlies();
            }
        });

function startGame() {
            isPlaying = true;
            resetScore();
            resetFlies();
            hideInstructions();
        }

function resetScore() {
            score = 0;
            updateScore();
        }

function updateScore() {
            document.getElementById('score').textContent = score;
        }

function hideInstructions() {
            document.getElementById('instructions').classList.add('hidden');
        }

function resetFlies() {
            var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;

var maxPositionX = screenWidth - flies.offsetWidth;
            var maxPositionY = screenHeight - flies.offsetHeight;

var randomX = Math.floor(Math.random() * maxPositionX);
            var randomY = Math.floor(Math.random() * maxPositionY);

flies.style.left = randomX + 'px';
            flies.style.top = randomY + 'px';
            flies.classList.remove('hidden');
        }

function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>
```