5 red blocks bouncing 5 blue blocks hit the other blocks bouncing's game

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

No:15133

109

←

Prev Next

→

5 red blocks bouncing 5 blue blocks hit the other ..ALL
Developer User6472｜Date and time 23/9/6 14:43:54
Build time 60.119 sec｜Game capacity 4.881KB｜

Script

Sure! Here's a simple game where you can control a red block and try to hit blue blocks while avoiding the other blocks. The game will be displayed as a set of pictograms, with JavaScript code enclosed in script tags within a single HTML file.

To play the game, you can open the HTML file on a smartphone or emulator and touch/click and drag the red block to control its position. The goal is to hit the blue blocks while avoiding colliding with the other blocks. The red block will bounce off the edges of the screen, and blue blocks will bounce as well. Collisions between the red and blue blocks will be logged to the console, but you can modify the code to handle them according to the game's rules. Note: This is a basic template of the game, and it does not include additional features such as scoring, levels, or game over conditions. Feel free to enhance it based on your specific requirements and design preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Bouncer Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

canvas {
      background-color: #efefef;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas"></canvas>

// Set the canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

const blockSize = 50;
    const redColor = "#ff0000";
    const blueColor = "#0000ff";

// Blocks definition
    const redBlock = {
      x: canvas.width / 2 - blockSize / 2,
      y: canvas.height - blockSize - 10,
      color: redColor,
      width: blockSize,
      height: blockSize,
      dx: 5, // horizontal speed
      dy: -5, // vertical speed
    };

const blueBlocks = [
      {
        x: 50,
        y: 50,
        color: blueColor,
        width: blockSize,
        height: blockSize,
        dx: 2, // horizontal speed
        dy: 3, // vertical speed
      },
      {
        x: canvas.width - blockSize - 50,
        y: canvas.height - blockSize - 100,
        color: blueColor,
        width: blockSize,
        height: blockSize,
        dx: -3, // horizontal speed
        dy: -2, // vertical speed
      },
      // Add more blue blocks if needed...
    ];

// Draw a block
    function drawBlock(block) {
      ctx.beginPath();
      ctx.rect(block.x, block.y, block.width, block.height);
      ctx.fillStyle = block.color;
      ctx.fill();
      ctx.closePath();
    }

// Update block positions and check collisions
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update red block position
      redBlock.x += redBlock.dx;
      redBlock.y += redBlock.dy;

// Check collisions with edges
      if (
        redBlock.x < 0 ||
        redBlock.x + redBlock.width > canvas.width
      ) {
        redBlock.dx = -redBlock.dx; // reverse horizontal direction
      }
      if (
        redBlock.y < 0 ||
        redBlock.y + redBlock.height > canvas.height
      ) {
        redBlock.dy = -redBlock.dy; // reverse vertical direction
      }

// Update blue blocks positions and check collisions
      blueBlocks.forEach((block) => {
        block.x += block.dx;
        block.y += block.dy;

// Check collisions with edges
        if (
          block.x < 0 ||
          block.x + block.width > canvas.width
        ) {
          block.dx = -block.dx; // reverse horizontal direction
        }
        if (
          block.y < 0 ||
          block.y + block.height > canvas.height
        ) {
          block.dy = -block.dy; // reverse vertical direction
        }

// Check collision with the red block
        if (
          redBlock.x < block.x + block.width &&
          redBlock.x + redBlock.width > block.x &&
          redBlock.y < block.y + block.height &&
          redBlock.y + redBlock.height > block.y
        ) {
          // Collision detected! Handle it accordingly (e.g., game over, score increment, etc.)
          console.log("Collision!");
        }

// Draw blue block
        drawBlock(block);
      });

// Draw red block
      drawBlock(redBlock);

requestAnimationFrame(update);
    }

// Register touch/click event handlers to control the red block
    canvas.addEventListener("touchmove", (event) => {
      const touch = event.touches[0];
      redBlock.x = touch.clientX - redBlock.width / 2;
      redBlock.y = touch.clientY - redBlock.height / 2;
    });

canvas.addEventListener("mousemove", (event) => {
      redBlock.x = event.clientX - redBlock.width / 2;
      redBlock.y = event.clientY - redBlock.height / 2;
    });

// Start the game
    update();
  </script>
</body>
</html>
```

Note: This is a basic template of the game, and it does not include additional features such as scoring, levels, or game over conditions. Feel free to enhance it based on your specific requirements and design preferences.