Avoid red cubes attacking you and coming closer and closer.'s game

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

No:23129

←

Prev Next

→

Avoid red cubes attacking you and coming closer an..ALL
Developer User10673｜Date and time 23/10/28 1:39:10
Build time 79.466 sec｜Game capacity 3.826KB｜

Script

Sure! Here's a simple game implementation using JavaScript and HTML with pictograms. When playing, you'll need to avoid getting hit by the red cubes by moving your character left or right. The red cubes will gradually become faster and closer as you progress. You can try running the code below in an HTML file on your smartphone to play the game:

This game uses a canvas element to display the game graphics. You control the player using left and right arrow keys. The red cubes fall from the top, and you need to avoid colliding with them. Your score increases every time you successfully dodge a cube. The cubes gradually become faster as your score increases, adding challenge to the game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Avoid The Red Cubes</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  <script>
    // Game variables
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    const playerWidth = 50;
    const playerHeight = 50;
    const cubeSize = 40;
    let playerX = (canvas.width - playerWidth) / 2;
    let cubes = [];
    let score = 0;
    let gameOver = false;

// Key handling
    let leftPressed = false;
    let rightPressed = false;
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
      if (event.key === "ArrowLeft") {
        leftPressed = true;
      } else if (event.key === "ArrowRight") {
        rightPressed = true;
      }
    }

function keyUpHandler(event) {
      if (event.key === "ArrowLeft") {
        leftPressed = false;
      } else if (event.key === "ArrowRight") {
        rightPressed = false;
      }
    }

// Collision detection
    function collisionDetection() {
      for (let i = 0; i < cubes.length; i++) {
        const cube = cubes[i];
        if (
          playerX < cube.x + cubeSize &&
          playerX + playerWidth > cube.x &&
          canvas.height - playerHeight < cube.y + cubeSize
        ) {
          gameOver = true;
        }
      }
    }

// Game loop
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      ctx.fillStyle = "#008000";
      ctx.fillRect(playerX, canvas.height - playerHeight, playerWidth, playerHeight);

// Draw cubes
      ctx.fillStyle = "#FF0000";
      for (let i = 0; i < cubes.length; i++) {
        const cube = cubes[i];
        ctx.fillRect(cube.x, cube.y, cubeSize, cubeSize);
        cube.y += cube.speed;

if (cube.y > canvas.height) {
          cubes.splice(i, 1);
          score++;
        }
      }

// Draw score
      ctx.font = "16px Arial";
      ctx.fillStyle = "#000000";
      ctx.fillText("Score: " + score, 8, 20);

collisionDetection();

if (!gameOver) {
        requestAnimationFrame(draw);
      } else {
        ctx.font = "30px Arial";
        ctx.fillStyle = "#000000";
        ctx.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
      }

// Move player
      if (leftPressed && playerX > 0) {
        playerX -= 7;
      } else if (rightPressed && playerX < canvas.width - playerWidth) {
        playerX += 7;
      }
    }

// Spawn cubes at regular intervals
    function spawnCubes() {
      if (gameOver) {
        return;
      }

const cubeX = Math.random() * (canvas.width - cubeSize);
      const cube = { x: cubeX, y: -cubeSize, speed: score > 10 ? 5 : 3 };
      cubes.push(cube);

setTimeout(spawnCubes, 1000 - Math.min(score * 20, 500));
    }

// Start game
    spawnCubes();
    draw();
  </script>
</body>
</html>
```