AI game creator

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

No:17620

←

Prev Next

→

Ball catcher
Developer User7748｜Date and time 23/9/24 4:13:26
Build time 29.051 sec｜Game capacity 3.784KB｜

Script

Sure! Here's a simple game called "Ball Catcher" implemented as a single HTML file with JavaScript. The game assumes smartphone operation and uses pictograms for visual elements.

To make the game work, save the pictograms for the player and ball as `emozi_all/game.png` and `emozi_all/ball.png`, respectively, in the same directory as the HTML file. You can replace these pictograms with your own or use different visual elements. The game involves catching falling balls by moving the player left and right using touch controls. Each time a ball is caught, the score increases. However, if a ball reaches the bottom without being caught, the game ends and the score resets.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure! Here's a simple game called "Ball Catcher" implemented as a single HTML file with JavaScript. The game assumes smartphone operation and uses pictograms for visual elements.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Ball Catcher</title>
    <style>
        #game-board {
            position: relative;
            width: 200px;
            height: 400px;
            border: 2px solid black;
            margin: 0 auto;
            overflow: hidden;
        }
        #player {
            position: absolute;
            bottom: 0;
            width: 40px;
            height: 40px;
            background: url('player.png') center / contain no-repeat;
        }
        #ball {
            position: absolute;
            top: 0;
            width: 40px;
            height: 40px;
            background: url('ball.png') center / contain no-repeat;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player"></div>
        <div id="ball"></div>
    </div>

let score = 0;

// Set player initial position
            let playerX = (gameBoard.offsetWidth - player.offsetWidth) / 2;
            player.style.left = playerX + 'px';

// Function to move the player
            function movePlayer(event) {
                const maxWidth = gameBoard.offsetWidth - player.offsetWidth;
                const touch = event.touches[0];
                playerX = Math.min(Math.max(touch.clientX, 0), maxWidth);
                player.style.left = playerX + 'px';
            }

// Listen to touch events to move the player
            gameBoard.addEventListener("touchmove", movePlayer);

// Set initial ball position
            let ballY = 0;
            let ballX = Math.random() * (gameBoard.offsetWidth - ball.offsetWidth);
            ball.style.left = ballX + 'px';

// Function to update ball position and check collision
            function updateBall() {
                ballY += 2;
                ball.style.top = ballY + 'px';

if (ballY + ball.offsetHeight > player.offsetTop) {
                    if (ballX >= player.offsetLeft && ballX <= player.offsetLeft + player.offsetWidth) {
                        // Ball caught
                        score++;
                        ballY = 0;
                        ballX = Math.random() * (gameBoard.offsetWidth - ball.offsetWidth);
                        ball.style.left = ballX + 'px';
                    } else {
                        // Ball missed
                        alert('Game Over! Score: ' + score);
                        score = 0;
                        ballY = 0;
                        ballX = Math.random() * (gameBoard.offsetWidth - ball.offsetWidth);
                        ball.style.left = ballX + 'px';
                    }
                }

requestAnimationFrame(updateBall);
            }

// Start game loop
            updateBall();
        });
    </script>
</body>
</html>
```

To make the game work, save the pictograms for the player and ball as `player.png` and `ball.png`, respectively, in the same directory as the HTML file. You can replace these pictograms with your own or use different visual elements.

The game involves catching falling balls by moving the player left and right using touch controls. Each time a ball is caught, the score increases. However, if a ball reaches the bottom without being caught, the game ends and the score resets.