Don't touch the spikes's game

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

No:31750

←

Prev Next

→

Don't touch the spikes
Developer User15234｜Date and time 23/12/28 8:36:52
Build time 31.606 sec｜Game capacity 4.308KB｜

Script

Sure, I can help you create a simple game called "Don't Touch the Spikes" using HTML, JavaScript, and pictograms. Below is an example implementation enclosed in script tags within a single HTML file:

In this game, the objective is to keep the bird from touching the spikes. The bird jumps when you click anywhere on the screen. The game keeps track of your score, and when a collision with a spike occurs, it triggers the game over state, displaying the final score in the alert box. The game restarts automatically after the alert is closed. You would need to replace `'emozi_all/bird.png'` and `'emozi_chicken.png'` with the paths to your chosen pictogram images for the bird and spike. Make sure those image files are included in the same directory as the HTML file. Feel free to customize the styling, adjust the game mechanics, or modify any other aspects of the game to suit your preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure, I can help you create a simple game called "Don't Touch the Spikes" using HTML, JavaScript, and pictograms. Below is an example implementation enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Don't Touch the Spikes</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #game {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    #bird {
      position: absolute;
      width: 50px;
      height: 50px;
      background-image: url('bird.png');
      background-size: cover;
    }
    
    .spike {
      position: absolute;
      width: 15px;
      height: 100px;
      background-image: url('spike.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game"></div>
  
  <script>
    // Game variables
    var game;
    var bird;
    var spikes = [];
    var gravity = 0.5;
    var jumpForce = -10;
    var gameSpeed = 3;
    var score = 0;
    var isGameOver = false;

// Game setup
    function setup() {
      game = document.getElementById('game');
      
      bird = document.createElement('div');
      bird.id = 'bird';
      game.appendChild(bird);
      
      document.addEventListener('click', jump);
      
      setInterval(update, 20);
      setInterval(spawnSpike, 1500);
    }

// Bird jump
    function jump() {
      if (!isGameOver) {
        bird.style.transition = 'transform 0.2s';
        bird.style.transform = 'translateY(' + jumpForce + 'px)';
      }
    }

// Update game
    function update() {
      if (!isGameOver) {
        var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue('top'));
        var birdLeft = parseInt(window.getComputedStyle(bird).getPropertyValue('left'));
        
        // Apply gravity
        bird.style.transform = 'translateY(' + (birdTop + gravity) + 'px)';
        
        // Check collision with spikes
        for (var i = 0; i < spikes.length; i++) {
          var spike = spikes[i];
          
          if (isColliding(bird, spike)) {
            gameOver();
            return;
          }
          
          var spikeLeft = parseInt(window.getComputedStyle(spike).getPropertyValue('left'));
          
          // Remove passed spikes
          if (spikeLeft < -15) {
            spikes.splice(i, 1);
            game.removeChild(spike);
            score++;
            i--;
          }
          
          // Move spikes
          spike.style.left = (spikeLeft - gameSpeed) + 'px';
        }
        
        // Update score
        document.getElementById('score').textContent = score;
      }
    }

// Spawn spike
    function spawnSpike() {
      if (!isGameOver) {
        var spike = document.createElement('div');
        spike.className = 'spike';
        spike.style.left = (window.innerWidth - 15) + 'px';
        spike.style.top = (Math.random() * (window.innerHeight - 100)) + 'px';
        spikes.push(spike);
        game.appendChild(spike);
      }
    }

// Check collision
    function isColliding(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();
      return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
    }

// Game over
    function gameOver() {
      isGameOver = true;
      bird.style.transition = 'none';
      bird.style.transform = 'translateY(0px)';
      alert('Game Over! Your score is ' + score);
    }

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

You would need to replace `'bird.png'` and `'spike.png'` with the paths to your chosen pictogram images for the bird and spike. Make sure those image files are included in the same directory as the HTML file.

Feel free to customize the styling, adjust the game mechanics, or modify any other aspects of the game to suit your preferences.