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

No:25833

←

Prev Next

→

Goli football
Developer User12686｜Date and time 23/11/25 1:00:32
Build time 74.671 sec｜Game capacity 4.733KB｜

Script

Sure, here's a simple implementation of a football game in a single HTML file using JavaScript and pictograms:

Goli Football

This implementation creates a simple game where you control a player (represented by a blue rectangle) using touch controls. The objective is to move the player under the falling ball (represented by a black circle) to score points. The player can score by stopping the ball within the goal area (represented by a red rectangle), and loses points if the ball touches the top edge of the canvas. The current score is displayed at the top left corner of the canvas.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple implementation of a football game in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Goli Football</title>
    <style>
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Goli Football</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballRadius = 10;

playerX = canvas.width / 2 - 50;
            playerWidth = 100;
            playerHeight = 20;

goalX = canvas.width / 2 - 75;
            goalWidth = 150;
            goalHeight = 50;

score = 0;

// Add touch event listeners for mobile controls
            canvas.addEventListener("touchstart", handleTouchStart, false);
            canvas.addEventListener("touchmove", handleTouchMove, false);
            canvas.addEventListener("touchend", handleTouchEnd, false);

gameInterval = setInterval(updateGame, 20); // Run the game loop at 50 FPS
        }

function updateGame() {
            clearCanvas();
            drawBall();
            drawPlayer();
            drawGoal();
            checkCollision();
            updateScore();
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function drawBall() {
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "black";
            context.fill();
            context.closePath();
        }

function drawPlayer() {
            context.beginPath();
            context.rect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);
            context.fillStyle = "blue";
            context.fill();
            context.closePath();
        }

function drawGoal() {
            context.beginPath();
            context.rect(goalX, 0, goalWidth, goalHeight);
            context.fillStyle = "red";
            context.fill();
            context.closePath();
        }

function checkCollision() {
            if (ballY + ballRadius >= canvas.height - playerHeight && ballY + ballRadius <= canvas.height) {
                if (ballX >= playerX && ballX <= playerX + playerWidth) {
                    score++;
                    ballX = canvas.width / 2;
                    ballY = canvas.height / 2;
                }
            }

if (ballY - ballRadius <= goalHeight && ballY - ballRadius >= 0) {
                if (ballX >= goalX && ballX <= goalX + goalWidth) {
                    score--;
                    ballX = canvas.width / 2;
                    ballY = canvas.height / 2;
                }
            }
        }

function updateScore() {
            context.font = "20px Arial";
            context.fillStyle = "black";
            context.fillText("Score: " + score, 10, 20);
        }

function handleTouchStart(event) {
            if (event.touches && event.touches.length > 0) {
                var touch = event.touches[0];
                if (touch.clientX >= playerX && touch.clientX <= playerX + playerWidth) {
                    playerX = touch.clientX - playerWidth / 2;
                }
            }
        }

function handleTouchEnd(event) {
            // No action needed in this game
        }

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