AI game creator

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

No:15561

←

Prev Next

→

Soccer game
Developer User6744｜Date and time 23/9/9 22:22:43
Build time 25.949 sec｜Game capacity 2.708KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Soccer Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Pictograms for the game
        const ballImage = document.createElement('img');
        ballImage.src = 'path-to-ball-image.png';

const playerImage = document.createElement('img');
        playerImage.src = 'path-to-player-image.png';

// Game variables
        let canvas;
        let canvasContext;
        let ballX = 400;
        let ballY = 300;
        let ballSpeedX = 5;
        let ballSpeedY = 5;
        let playerX = 0;
        let playerY = 0;
        let playerSpeed = 10;

// Initialize the game
        window.onload = function() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Set up event listeners for player movement
            canvas.addEventListener('touchmove', updatePlayerPosition);

setInterval(updateAll, 1000/30); // Update the game every 1/30th of a second
        }

// Update the game objects and redraw the canvas
        function updateAll() {
            moveAll();
            drawAll();
        }

// Move the ball and player based on their speed
        function moveAll() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

// Reverse ball direction if it hits the canvas bounds
            if (ballX > canvas.width || ballX < 0) {
                ballSpeedX *= -1;
            }

if (ballY > canvas.height || ballY < 0) {
                ballSpeedY *= -1;
            }
        }

// Draw the game objects on the canvas
        function drawAll() {
            // Clear canvas
            colorRect(0, 0, canvas.width, canvas.height, 'black');

// Draw the ball
            drawImage(ballImage, ballX, ballY);

// Draw the player
            drawImage(playerImage, playerX, playerY);
        }

// Helper function to draw a colored rectangle
        function colorRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

// Helper function to draw an image on canvas
        function drawImage(image, x, y) {
            canvasContext.drawImage(image, x, y);
        }

// Update the player position based on touch movement
        function updatePlayerPosition(event) {
            let touch = event.touches[0];
            playerX = touch.pageX - canvas.offsetLeft;
            playerY = touch.pageY - canvas.offsetTop;
        }
    </script>
</body>
</html>