Circle vs square ( multiplayer mode)'s game

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

No:31578

←

Prev Next

→

Circle vs square ( multiplayer mode)
Developer User6472｜Date and time 23/12/27 15:34:16
Build time 34.338 sec｜Game capacity 4.619KB｜

Script

Sure! Here's a simple game called "Circle vs Square" implemented as a single HTML file using JavaScript. It supports multiplayer mode for smartphone operation and uses pictograms.

To play the game, copy the above code and save it as a `.html` file. Open the file in a web browser on your smartphone, and you should be able to control the circle using the up and down arrow keys, and the square using the "W" and "S" keys. The goal is to avoid colliding the circle with the square for as long as possible. If a collision occurs, a game over message will be displayed, and the game will reset.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game called "Circle vs Square" implemented as a single HTML file using JavaScript. It supports multiplayer mode for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Circle vs Square</title>
    <style>
        canvas {
            border: 2px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    <script>
        // Game variables
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");
        var circle = { x: 50, y: 150, radius: 20, speed: 5, direction: 1 };
        var square = { x: 250, y: 150, size: 40, speed: 5, direction: -1 };
        var keys = {};

// Event listeners for key presses
        window.addEventListener("keydown", function (event) {
            keys[event.keyCode] = true;
        });

window.addEventListener("keyup", function (event) {
            delete keys[event.keyCode];
        });

// Game loop
        function gameLoop() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Move circle based on key presses
            if (keys[38] && circle.y - circle.radius - circle.speed >= 0) {
                circle.y -= circle.speed;
            }
            if (keys[40] && circle.y + circle.radius + circle.speed <= canvas.height) {
                circle.y += circle.speed;
            }

// Move square based on key presses
            if (keys[87] && square.y - square.speed >= 0) {
                square.y -= square.speed;
            }
            if (keys[83] && square.y + square.size + square.speed <= canvas.height) {
                square.y += square.speed;
            }

// Update game objects
            circle.x += circle.speed * circle.direction;
            square.x += square.speed * square.direction;

// Reverse direction if circle hits the boundaries
            if (circle.x - circle.radius <= 0 || circle.x + circle.radius >= canvas.width) {
                circle.direction *= -1;
            }

// Reverse direction if square hits the boundaries
            if (square.x <= 0 || square.x + square.size >= canvas.width) {
                square.direction *= -1;
            }

// Draw game objects
            drawCircle(circle.x, circle.y, circle.radius);
            drawSquare(square.x, square.y, square.size);

// Check collision between circle and square
            if (isCollision(circle, square)) {
                alert("Game Over!");
                // Reset game objects
                circle.x = 50;
                circle.y = 150;
                square.x = 250;
                square.y = 150;
            }

// Request animation frame
            requestAnimationFrame(gameLoop);
        }

// Helper function to draw the circle
        function drawCircle(x, y, radius) {
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2, false);
            context.fillStyle = "blue";
            context.fill();
            context.closePath();
        }

// Helper function to draw the square
        function drawSquare(x, y, size) {
            context.fillStyle = "red";
            context.fillRect(x, y, size, size);
        }

// Helper function to check collision between circle and square
        function isCollision(circle, square) {
            var dx = Math.abs(circle.x - square.x - square.size / 2);
            var dy = Math.abs(circle.y - square.y - square.size / 2);

if (dx > square.size / 2 + circle.radius || dy > square.size / 2 + circle.radius) {
                return false;
            }

if (dx <= square.size / 2 || dy <= square.size / 2) {
                return true;
            }

var cornerDistanceSq = (dx - square.size / 2) ** 2 + (dy - square.size / 2) ** 2;
            return cornerDistanceSq <= circle.radius ** 2;
        }

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