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

154

←

Prev Next

→

Ai pixel color wars idle.pixels auto .move,groop,b..ALL
Developer User18896｜Date and time 24/2/28 2:00:48
Build time 12.548 sec｜Game capacity 3.262KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Color Wars</title>
</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 players = colors.map(color => ({
            color: color,
            score: 0,
            x: Math.floor(Math.random() * 320),
            y: Math.floor(Math.random() * 320),
            directionX: 0,
            directionY: 0
        }));
        
        let winnerIndex = -1;
        
        function drawPlayers() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            players.forEach(player => {
                ctx.fillStyle = player.color;
                ctx.fillRect(player.x, player.y, 10, 10);
            });
            
            const winningPlayer = players.find(player => player.score >= 100);
            if (winningPlayer && winnerIndex === -1) {
                winnerIndex = players.findIndex(player => player === winningPlayer);
                ctx.fillStyle = "black";
                ctx.font = "20px Arial";
                ctx.fillText(`Winner: ${winningPlayer.color}`, 50, 50);
            }
            
            players.forEach((player, index) => {
                ctx.fillStyle = player.color;
                ctx.font = "12px Arial";
                ctx.fillText(`Score: ${player.score}`, 10, 20 * (index + 1));
            });
        }
        
        function checkWinner() {
            players.forEach(player => {
                if (player.score >= 100 && winnerIndex === -1) {
                    winnerIndex = players.findIndex(p => p == player);
                }
            });
        }
        
        function updatePlayer(player) {
            player.x += player.directionX;
            player.y += player.directionY;
        }
        
        function gameLoop() {
            drawPlayers();
            checkWinner();
            
            if (winnerIndex === -1) {
                requestAnimationFrame(gameLoop);
                
                players.forEach(player => {
                    player.score++;
                    updatePlayer(player);
                });
            }
        }
        
        document.addEventListener('keydown', event => {
            const playerIndex = Math.floor(Math.random() * 5);
            const player = players[playerIndex];
            
            switch(event.key) {
                case "ArrowUp":
                    player.directionY = -1;
                    player.directionX = 0;
                    break;
                case "ArrowDown":
                    player.directionY = 1;
                    player.directionX = 0;
                    break;
                case "ArrowLeft":
                    player.directionX = -1;
                    player.directionY = 0;
                    break;
                case "ArrowRight":
                    player.directionX = 1;
                    player.directionY = 0;
                    break;
            }
        });
        
        gameLoop();
    </script>
</body>
</html>