300 blocks bouncing and 300 bouncing circles's game

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

No:15106

←

Prev Next

→

300 blocks bouncing and 300 bouncing circles
Developer User6472｜Date and time 23/9/6 6:59:02
Build time 36.012 sec｜Game capacity 3.533KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Blocks and Circles</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  
    canvas {
      background-color: #333;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Setting canvas dimensions
    var canvasWidth = window.innerWidth;
    var canvasHeight = window.innerHeight;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

// Block class
    function Block(x, y, width, height, speedX, speedY) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.speedX = speedX;
      this.speedY = speedY;

// Function to draw the block
      this.draw = function() {
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };

// Function to update the block's position
      this.update = function() {
        // Checking boundaries
        if (this.x + this.width >= canvasWidth || this.x <= 0) {
          this.speedX *= -1;
        }
        if (this.y + this.height >= canvasHeight || this.y <= 0) {
          this.speedY *= -1;
        }

// Updating position
        this.x += this.speedX;
        this.y += this.speedY;
      };
    }

// Circle class
    function Circle(x, y, radius, speedX, speedY) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.speedX = speedX;
      this.speedY = speedY;

// Function to draw the circle
      this.draw = function() {
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
      };

// Function to update the circle's position
      this.update = function() {
        // Checking boundaries
        if (this.x + this.radius >= canvasWidth || this.x - this.radius <= 0) {
          this.speedX *= -1;
        }
        if (this.y + this.radius >= canvasHeight || this.y - this.radius <= 0) {
          this.speedY *= -1;
        }

// Updating position
        this.x += this.speedX;
        this.y += this.speedY;
      };
    }

// Creating blocks and circles
    var blocks = [];
    var circles = [];

for (var i = 0; i < 300; i++) {
      var block = new Block(
        Math.random() * canvasWidth,
        Math.random() * canvasHeight,
        50,
        50,
        Math.random() * 4 - 2, // Random speed between -2 and 2
        Math.random() * 4 - 2
      );
      blocks.push(block);

var circle = new Circle(
        Math.random() * canvasWidth,
        Math.random() * canvasHeight,
        25,
        Math.random() * 4 - 2, // Random speed between -2 and 2
        Math.random() * 4 - 2
      );
      circles.push(circle);
    }

// Function to clear canvas and redraw the objects
    function redraw() {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Drawing blocks
      for (var i = 0; i < blocks.length; i++) {
        blocks[i].update();
        blocks[i].draw();
      }

// Drawing circles
      for (var i = 0; i < circles.length; i++) {
        circles[i].update();
        circles[i].draw();
      }

// Requesting animation frame
      requestAnimationFrame(redraw);
    }

// Starting the game
    redraw();
  </script>
</body>
</html>