AI game creator

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

No:7769

1184

←

Prev Next

→

Retro Game
Developer User4079｜Date and time 23/7/9 20:23:16
Build time 8.087 sec｜Game capacity 1.969KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Retro Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game variables
        var canvas;
        var canvasContext;
        var ballX = 50;
        var ballY = 50;
        var ballSpeedX = 5;
        var ballSpeedY = 2;

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

// Set main game loop
            setInterval(moveEverything, 30);
        }

// Update and render game objects
        function moveEverything() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;

if (ballX < 0 || ballX > canvas.width) {
                ballSpeedX *= -1;
            }

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

drawEverything();
        }

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

// Draw the ball
            colorCircle(ballX, ballY, 10, 'white');
        }

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

// Helper function to draw a circle
        function colorCircle(centerX, centerY, radius, color) {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
            canvasContext.fill();
        }

// Start the game
        initialize();
    </script>
</body>
</html>