A game where you jump over spikes and hit blocks's game

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

No:43377

←

Prev Next

→

A game where you jump over spikes and hit blocks
Developer User19176｜Date and time 24/2/15 11:03:37
Build time 10.919 sec｜Game capacity 3.473KB｜

Script

Sure! Here's an example of a simple game where you control a character to jump over spikes and hit blocks using JavaScript and HTML:

This game consists of a game area with a player, spike, and block. The player can jump by pressing the "ArrowUp" key. If the player hits the spike, the game ends and an alert message is shown. If the player hits the block, the color of the block changes randomly. You can copy the above code into a single HTML file, save it with a `.html` extension, and open it in a web browser to play the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game where you control a character to jump over spikes and hit blocks using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Jump and Hit Game</title>
    <style>
      #gameArea {
        position: relative;
        width: 400px;
        height: 300px;
        border: 1px solid black;
      }

#player {
        position: absolute;
        bottom: 0;
        left: 50px;
        width: 50px;
        height: 50px;
        background-color: blue;
      }

#spike {
        position: absolute;
        bottom: 0;
        right: 50px;
        width: 50px;
        height: 50px;
        background-color: red;
      }

#block {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="gameArea">
      <div id="player"></div>
      <div id="spike"></div>
      <div id="block"></div>
    </div>

// Get player, spike, block elements
      const player = document.getElementById('player');
      const spike = document.getElementById('spike');
      const block = document.getElementById('block');

// Set initial position of the elements
      let playerBottom = 0;
      let spikeRight = 50;
      let blockRight = 0;

// Move player
      function movePlayer() {
        playerBottom += 50;
        player.style.bottom = playerBottom + 'px';

// Check collision with spike
        if (playerBottom >= 250 && spikeRight === 50) {
          endGame();
        }
      }

// Move spike and block
      function moveElements() {
        spikeRight += 50;
        spike.style.right = spikeRight + 'px';

blockRight += 50;
        block.style.right = blockRight + 'px';

// Check collision with block
        if (playerBottom >= 250 && blockRight === 50) {
          hitBlock();
        }

// Check if spike or block reached the end of the game area
        if (spikeRight >= 400 || blockRight >= 400) {
          spikeRight = 50;
          blockRight = 0;
        }
      }

// Handle key press events
      document.addEventListener('keydown', function (event) {
        if (event.key === 'ArrowUp') {
          movePlayer();
        }
      });

// Game loop
      let gameLoop = setInterval(moveElements, 1000);

// End the game
      function endGame() {
        clearInterval(gameLoop);
        alert('Game Over! You hit the spike.');
      }

// Handle hitting the block
      function hitBlock() {
        block.style.backgroundColor = getRandomColor();
      }

// Returns a random color
      function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>
```

You can copy the above code into a single HTML file, save it with a `.html` extension, and open it in a web browser to play the game.