Tower defence idle ai vs ai auto play shape wars tower in the middle shooting random shapes's game

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

No:52526

167

←

Prev Next

→

Tower defence idle ai vs ai auto play shape wars t..ALL
Developer User18896｜Date and time 24/3/22 11:39:57
Build time 10.444 sec｜Game capacity 2.465KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <title>Shape Wars</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

const player1 = {
            x: 200,
            y: 200,
            width: 20,
            height: 20,
            color: 'red'
        };

const player2 = {
            x: 200,
            y: 200,
            width: 20,
            height: 20,
            color: 'blue'
        };

const shapes = [];

function drawPlayer(player) {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

function drawShapes() {
            shapes.forEach(shape => {
                ctx.fillStyle = 'green';
                ctx.beginPath();
                ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
                ctx.fill();
            });
        }

function generateShape() {
            const radius = Math.floor(Math.random() * 10) + 5;
            const x = Math.random() < 0.5 ? Math.floor(Math.random() * 50) : Math.floor(Math.random() * 350);
            const y = Math.random() < 0.5 ? Math.floor(Math.random() * 50) : Math.floor(Math.random() * 350);

shapes.push({ x, y, radius });
        }

function moveShapes() {
            shapes.forEach(shape => {
                if (shape.x > player1.x) {
                    shape.x -= 1;
                } else {
                    shape.x += 1;
                }

if (shape.y > player1.y) {
                    shape.y -= 1;
                } else {
                    shape.y += 1;
                }
            });
        }

function checkCollision() {
            shapes.forEach((shape, index) => {
                if (Math.abs(shape.x - player1.x) < 10 && Math.abs(shape.y - player1.y) < 10) {
                    shapes.splice(index, 1);
                }
            });
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer(player1);
            drawPlayer(player2);
            drawShapes();
            generateShape();
            moveShapes();
            checkCollision();

requestAnimationFrame(gameLoop);
        }

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