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:52524

164

←

Prev Next

→

Tower defence idle ai vs ai auto play shape wars t..ALL
Developer User18896｜Date and time 24/3/22 11:38:37
Build time 7.781 sec｜Game capacity 2.567KB｜

Script

This code sets up a simple game called Shape Wars where random shapes move around the canvas. Shapes of different colors appear on the screen and move in random directions. The game uses the `<canvas>` element and JavaScript to draw and animate the shapes.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Shape Wars</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

function Shape(x, y, dx, dy, size, color) {
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.size = size;
            this.color = color;
        }

function randomColor() {
            const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            return randomColor;
        }

function createShape() {
            const randomX = Math.random() * (canvas.width - towerSize) + towerSize / 2;
            const randomY = Math.random() * (canvas.height - towerSize) + towerSize / 2;
            const randomDX = Math.random() - 0.5;
            const randomDY = Math.random() - 0.5;

const newShape = new Shape(randomX, randomY, randomDX, randomDY, 20, randomColor());
            shapes.push(newShape);
        }

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

function updateShapes() {
            shapes.forEach(shape => {
                shape.x += shape.dx;
                shape.y += shape.dy;

if (shape.x - shape.size < 0 || shape.x + shape.size > canvas.width) {
                    shape.dx = -shape.dx;
                }

if (shape.y - shape.size < 0 || shape.y + shape.size > canvas.height) {
                    shape.dy = -shape.dy;
                }
            });
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

createShape();
            drawShapes();
            updateShapes();

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>
```
This code sets up a simple game called Shape Wars where random shapes move around the canvas. Shapes of different colors appear on the screen and move in random directions. The game uses the `<canvas>` element and JavaScript to draw and animate the shapes.