A game where you tap to avoid obstacles as a ball's game

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

No:36836

←

Prev Next

→

A game where you tap to avoid obstacles as a ball
Developer User16880｜Date and time 24/1/18 18:00:04
Build time 16.881 sec｜Game capacity 4.418KB｜

Script

Sure, here's an example of a simple game where you can tap to control a ball and avoid obstacles. The game is implemented as a single HTML file and uses JavaScript for the game logic. It is designed to be played on a smartphone.

To play the game, you can copy the above code into a new HTML file (e.g., `game.html`) and open it in a web browser on your smartphone. When you tap the screen, the ball will move up, and your goal is to avoid the obstacles by tapping at the right moment. If the ball collides with an obstacle, the game will end, and you can restart by tapping the "Game Over" alert box. Please note that the styling and visual assets of the game can be improved based on your specific requirements and preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tap Ball Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        window.onload = function() {
            // Create the canvas and set its size
            var canvas = document.getElementById("gameCanvas");
            var context = canvas.getContext("2d");
            var width = 320;
            var height = 480;
            canvas.width = width;
            canvas.height = height;

// Ball object
            var ball = {
                x: 50,
                y: height / 2,
                radius: 10,
                speed: 3,
                color: "#000"
            };

// Obstacles
            var obstacles = [];
            var obstacleWidth = 20;
            var gapHeight = 100;
            var gapPosition = Math.floor(Math.random() * (height - gapHeight));
            obstacles.push({ x: width, y: 0, width: obstacleWidth, height: gapPosition });
            obstacles.push({ x: width, y: gapPosition + gapHeight, width: obstacleWidth, height: height - gapPosition - gapHeight });

// Game loop
            function gameLoop() {
                update();
                draw();
                requestAnimationFrame(gameLoop);
            }

// Update the game state
            function update() {
                // Move the ball
                ball.x += ball.speed;

// Check for collision with obstacles
                for (var i = 0; i < obstacles.length; i++) {
                    var obs = obstacles[i];
                    if (ball.x + ball.radius > obs.x && ball.x - ball.radius < obs.x + obs.width &&
                        (ball.y - ball.radius < obs.height || ball.y + ball.radius > obs.height + gapHeight)) {
                        gameOver();
                    }
                }

// Check if obstacle passed, then reposition it
                if (obstacles[0].x + obstacleWidth < 0) {
                    obstacles.shift();
                    gapPosition = Math.floor(Math.random() * (height - gapHeight));
                    obstacles.push({ x: width, y: 0, width: obstacleWidth, height: gapPosition });
                    obstacles.push({ x: width, y: gapPosition + gapHeight, width: obstacleWidth, height: height - gapPosition - gapHeight });
                }
            }

// Render the game
            function draw() {
                context.clearRect(0, 0, width, height);

// Draw the ball
                context.fillStyle = ball.color;
                context.beginPath();
                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                context.closePath();
                context.fill();

// Draw the obstacles
                context.fillStyle = "#00f";
                for (var i = 0; i < obstacles.length; i++) {
                    var obs = obstacles[i];
                    context.fillRect(obs.x, obs.y, obs.width, obs.height);
                }
            }

// Game over
            function gameOver() {
                alert("Game Over!");
                location.reload(); // Restart the game
            }

// Handle touch events
            canvas.addEventListener("touchstart", function(e) {
                e.preventDefault();
                ball.y -= 30;  // Move the ball up when tapped
            });

// Start the game
            gameLoop();
        };
    </script>
</body>
</html>
```

Please note that the styling and visual assets of the game can be improved based on your specific requirements and preferences.