The controls in Don't Touch The Spikes are limited to one operation, touching the screen anywhere when we want our bird to fly up. However, unlike titles such as Flappy Bird, we do not constantly move forward, but in a closed room. Spikes appear on its walls from time to time in random places. Our task is to avoid them and collect the candies that appear.'s game

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

No:31754

←

Prev Next

→

The controls in Don't Touch The Spikes are limited..ALL
Developer User15234｜Date and time 23/12/28 8:51:15
Build time 24.365 sec｜Game capacity 3.324KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Don't Touch The Spikes</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

const birdImage = new Image();
    birdImage.src = "bird.png";

const spikeImage = new Image();
    spikeImage.src = "spike.png";

const candyImage = new Image();
    candyImage.src = "candy.png";

const gravity = 0.6;
    const jumpHeight = 10;

let bird = {
      x: 50,
      y: canvas.height / 2,
      velocity: 0
    };

let spikes = [];
    let candies = [];
    let score = 0;

function getRandomNumber(min, max) {
      return Math.random() * (max - min) + min;
    }

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

// Update bird position
      bird.velocity += gravity;
      bird.y += bird.velocity;

// Draw bird
      context.drawImage(birdImage, bird.x, bird.y);

// Draw spikes
      for (let i = 0; i < spikes.length; i++) {
        context.drawImage(spikeImage, spikes[i].x, spikes[i].y);
        spikes[i].x -= 1;

// Check collision with spikes
        if (
          bird.x + birdImage.width >= spikes[i].x &&
          bird.x <= spikes[i].x + spikeImage.width &&
          bird.y + birdImage.height >= spikes[i].y &&
          bird.y <= spikes[i].y + spikeImage.height
        ) {
          gameOver();
          return;
        }

// Remove spikes that are off-screen
        if (spikes[i].x + spikeImage.width < 0) {
          spikes.splice(i, 1);
          i--;
        }
      }

// Draw candies
      for (let i = 0; i < candies.length; i++) {
        context.drawImage(candyImage, candies[i].x, candies[i].y);
        candies[i].x -= 2;

// Check collision with candies
        if (
          bird.x + birdImage.width >= candies[i].x &&
          bird.x <= candies[i].x + candyImage.width &&
          bird.y + birdImage.height >= candies[i].y &&
          bird.y <= candies[i].y + candyImage.height
        ) {
          score++;
          candies.splice(i, 1);
          i--;
        }

// Remove candies that are off-screen
        if (candies[i].x + candyImage.width < 0) {
          candies.splice(i, 1);
          i--;
        }
      }

// Spawn spikes and candies
      if (Math.random() < 0.02) {
        const spikeY = getRandomNumber(10, canvas.height - 100);
        spikes.push({
          x: canvas.width,
          y: spikeY
        });
      }

if (Math.random() < 0.01) {
        const candyY = getRandomNumber(10, canvas.height - 100);
        candies.push({
          x: canvas.width,
          y: candyY
        });
      }

// Update score
      context.font = "20px Arial";
      context.fillStyle = "white";
      context.fillText("Score: " + score, 10, 30);

requestAnimationFrame(update);
    }

function jump() {
      bird.velocity = -jumpHeight;
    }

function gameOver() {
      alert("GAME OVER!\n\nScore: " + score);
      location.reload();
    }

canvas.addEventListener("click", jump);
    update();
  </script>
</body>
</html>