A circle with physics's game

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

No:7146

1397

←

Prev Next

→

A circle with physics
Developer User3943｜Date and time 23/7/5 21:11:03
Build time 11.366 sec｜Game capacity 2.15KB｜

Script

Sure! Here's an example of a simple game featuring a circle with physics implemented in a single HTML file:

This example creates a canvas element and defines a circle object with properties such as position, radius, color, and velocity. The `drawCircle` function is responsible for drawing the circle on the canvas, while the `updateCirclePosition` function updates its position based on the velocity and ensures it bounces off the edges of the canvas. The game loop continuously clears the canvas, draws the updated circle, and requests the next animation frame to create an animation effect.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game featuring a circle with physics implemented in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="game-canvas" width="400" height="400"></canvas>

// Circle properties
        var circle = {
            x: 200,
            y: 200,
            radius: 20,
            color: "blue",
            dx: 2, // Horizontal velocity
            dy: 2, // Vertical velocity
        };

function drawCircle() {
            context.beginPath();
            context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
            context.fillStyle = circle.color;
            context.fill();
            context.closePath();
        }

function updateCirclePosition() {
            circle.x += circle.dx;
            circle.y += circle.dy;

if (circle.x + circle.radius > canvas.width || circle.x - circle.radius < 0) {
                circle.dx *= -1;
            }

if (circle.y + circle.radius > canvas.height || circle.y - circle.radius < 0) {
                circle.dy *= -1;
            }
        }

function gameLoop() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            drawCircle();
            updateCirclePosition();

requestAnimationFrame(gameLoop);
        }

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