You are green circle and you have to dodges blue circles that can get shooted left or right's game

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

No:26152

←

Prev Next

→

You are green circle and you have to dodges blue c..ALL
Developer User12833｜Date and time 23/11/27 11:49:20
Build time 54.499 sec｜Game capacity 3.414KB｜

Script

Here's an example of a simple game where you control a green circle to dodge blue circles that can be shot left or right. The game is designed for smartphone operation and uses pictograms. The implementation is done in a single HTML file enclosed in script tags:

To play the game, save the above code in a `.html` file and open it in a web browser. You can control the green circle by tapping on the left area of the screen to move it left and on the right area to move it right. The blue circles will appear from the top and move across the screen randomly shooting left or right. Your goal is to dodge these blue circles and survive as long as possible.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Circle Dodge Game blue can move down and up </title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Define the player circle move
    var player = {
      x: canvas.width / 2,
      y: canvas.height - 30,
      radius: 15
    };

// Define the blue circle
    var blueCircle = {
      x: canvas.width / 2,
      y: 30,
      radius: 10,
      speed: 2,
      direction: Math.random() > 0.5 ? "left" : "right"
    };

var isGameOver = false;

function drawCircle(x, y, radius, color) {
      context.beginPath();
      context.arc(x, y, radius, 0, Math.PI * 2, false);
      context.fillStyle = color;
      context.fill();
      context.closePath();
    }

function drawPlayer() {
      drawCircle(player.x, player.y, player.radius, "green");
    }

function drawBlueCircle() {
      drawCircle(blueCircle.x, blueCircle.y, blueCircle.radius, "blue");
    }

function checkCollision() {
      var dx = blueCircle.x - player.x;
      var dy = blueCircle.y - player.y;
      var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < blueCircle.radius + player.radius) {
        // Collision occurred, game over
        isGameOver = true;
      }
    }

function update() {
      if (!isGameOver) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBlueCircle();
        drawPlayer();
        checkCollision();

if (blueCircle.direction === "left") {
          blueCircle.x -= blueCircle.speed;
        } else {
          blueCircle.x += blueCircle.speed;
        }

// Reverse direction if blue circle reaches the canvas edges
        if (blueCircle.x - blueCircle.radius < 0) {
          blueCircle.direction = "right";
        } else if (blueCircle.x + blueCircle.radius > canvas.width) {
          blueCircle.direction = "left";
        }

requestAnimationFrame(update);
      } else {
        // Game over message
        context.font = "30px Arial";
        context.fillStyle = "red";
        context.fillText("Game Over", canvas.width / 2 - 70, canvas.height / 2);
      }
    }

update();

// Smartphone touch movement handling
    canvas.addEventListener("touchstart", function(event) {
      var touchX = event.touches[0].clientX;
      if (touchX < player.x) {
        player.x -= 10;
      } else {
        player.x += 10;
      }
    }, false);

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