Soccer's game | AI game creator

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

No:52355

140

Soccer
Developer User21869｜Date and time 24/3/21 5:25:30
Build time 9.365 sec｜Game capacity 2.055KB｜

→ 　

0　

0　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soccer Game</title>
</head>

<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

<script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        let playerX = 200;
        let playerY = 350;
        let ballX = 200;
        let ballY = 200;
        let gameOver = false;
        
        function drawPlayer() {
            ctx.fillStyle = "blue";
            ctx.fillRect(playerX, playerY, 50, 50);
        }
        
        function drawBall() {
            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
            ctx.fill();
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBall();
            
            if (gameOver) {
                ctx.fillStyle = "black";
                ctx.font = "30px Arial";
                ctx.fillText("Game Over", 150, 200);
            } else {
                requestAnimationFrame(draw);
            }
        }
        
        function movePlayer(xPos) {
            playerX = xPos;
        }
        
        function moveBall() {
            if (ballY >= 400) {
                gameOver = true;
            }
            
            ballY += 1;
            
            if (ballY + 10 >= playerY && ballY <= playerY + 50 && ballX >= playerX && ballX <= playerX + 50) {
                ballY = playerY - 10;
            }
        }
        
        function handleTouchMove(e) {
            movePlayer(e.touches[0].clientX - 25);
        }
        
        canvas.addEventListener("touchmove", handleTouchMove);
        
        draw();
        
        setInterval(() => {
            moveBall();
        }, 10);
    </script>
</body>

</html>