Pixel wars idle.random color pixels auto move, hunt, mine, farm, multiply, build ,live and die on a 320 by 320 canvas's game

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

No:47304

141

←

Prev Next

→

Pixel wars idle.random color pixels auto move, hun..ALL
Developer User18896｜Date and time 24/2/28 0:34:01
Build time 8.64 sec｜Game capacity 1.284KB｜

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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Wars Idle Game</title>
</head>
<body>
<canvas id="gameCanvas" width="320" height="320"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let pixels = [];

class Pixel {
  constructor(x, y, color, speed) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.speed = speed;
  }

move() {
    this.x += (Math.random() - 0.5) * this.speed;
    this.y += (Math.random() - 0.5) * this.speed;
  }

draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 5, 5);
  }
}

function createRandomPixel() {
  const x = Math.floor(Math.random() * 320);
  const y = Math.floor(Math.random() * 320);
  const color = '#' + Math.floor(Math.random()*16777215).toString(16);
  const speed = Math.random() * 2;
  const pixel = new Pixel(x, y, color, speed);
  pixels.push(pixel);
}

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

pixels.forEach((pixel) => {
    pixel.move();
    pixel.draw();
  });

requestAnimationFrame(gameLoop);
}

for (let i = 0; i < 100; i++) {
  createRandomPixel();
}

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