Ai pixel color wars idle.pixels auto .move,groop,build,defend, learn,farm,mine,trade,multiply.canvas 320 by 320.5 teams randim color one in the middle 1 on each corner race to a random color pixel drop every 1 second winner grows show score for color above canvas's game

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

No:47365

143

←

Prev Next

→

Ai pixel color wars idle.pixels auto .move,groop,b..ALL
Developer User18896｜Date and time 24/2/28 2:01:18
Build time 16.171 sec｜Game capacity 2.652KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Color Wars</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }

canvas {
        border: 2px solid #333;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="320" height="320"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF'];
    const teamColors = colors.map((color, index) => ({ color: color, score: 0, team: index }));

let middlePixelColor = colors[Math.floor(Math.random() * colors.length)];
    let cornerPixels = [];
    let scoreTextY = 30;

for (let i = 0; i < 4; i++) {
        cornerPixels.push({
            x: i < 2 ? 0 : 318,
            y: i % 2 === 0 ? 0 : 318,
            color: colors[Math.floor(Math.random() * colors.length)],
            team: i + 1
        });
    }

function drawPixel(x, y, color) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, 2, 2);
    }

canvas.addEventListener('click', (e) => {
        const rect = canvas.getBoundingClientRect();
        const x = Math.floor((e.clientX - rect.left) / 2) * 2;
        const y = Math.floor((e.clientY - rect.top) / 2) * 2;
        const pixelColor = ctx.getImageData(x, y, 1, 1).data;

colorWasCaptured(x, y, `rgb(${pixelColor[0]}, ${pixelColor[1]}, ${pixelColor[2]})`);
    });

function gameLoop() {
        ctx.clearRect(0, 0, 320, 320);

drawPixel(160, 160, middlePixelColor);
        cornerPixels.forEach(pixel => drawPixel(pixel.x, pixel.y, pixel.color));

requestAnimationFrame(gameLoop);
    }

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