Square vs circle With shoot button to k○ll the circles.'s game

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

No:50852

←

Prev Next

→

Square vs circle With shoot button to k○ll the cir..ALL
Developer User21425｜Date and time 24/3/10 0:47:56
Build time 8.762 sec｜Game capacity 2.262KB｜

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>Quadrado vs Círculo</title>
<style>
  canvas {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById("gameCanvas");
  const ctx = canvas.getContext("2d");

const squareSize = 50;
  let squareX = canvas.width / 2 - squareSize / 2;
  let squareY = canvas.height - squareSize - 10;
  const squareSpeed = 5;

let circles = [];
  const circleRadius = 20;
  const circleSpeed = 3;
  const circleSpawnRate = 1000; // milliseconds
  let lastCircleSpawn = 0;

let score = 0;

function drawSquare() {
    ctx.fillStyle = "blue";
    ctx.fillRect(squareX, squareY, squareSize, squareSize);
  }

function drawCircles() {
    ctx.fillStyle = "red";
    circles.forEach(circle => {
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, circleRadius, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
    });
  }

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

drawSquare();
    drawCircles();

circles.forEach(circle => {
      circle.y += circleSpeed;
    });

circles = circles.filter(circle => circle.y + circleRadius < canvas.height);

if (Date.now() - lastCircleSpawn > circleSpawnRate) {
      circles.push({x: Math.random() * (canvas.width - circleRadius * 2) + circleRadius, y: 0});
      lastCircleSpawn = Date.now();
    }

circles.forEach(circle => {
      if (circle.x > squareX && circle.x < squareX + squareSize && circle.y > squareY) {
        score++;
        circles = circles.filter(c => c !== circle);
      }
    });

requestAnimationFrame(update);
  }

function moveSquare(direction) {
    switch(direction) {
      case "left":
        squareX -= squareSpeed;
        break;
      case "right":
        squareX += squareSpeed;
        break;
    }
  }

document.addEventListener("keydown", e => {
    if (e.key === "ArrowLeft") {
      moveSquare("left");
    } else if (e.key === "ArrowRight") {
      moveSquare("right");
    }
  });

update();

</script>
</body>
</html>