Just it tap to jump hold to still jump and if it touch spike its die's game

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

No:31874

←

Prev Next

→

Just it tap to jump hold to still jump and if it t..ALL
Developer User15262｜Date and time 23/12/28 19:24:36
Build time 35.19 sec｜Game capacity 3.978KB｜

Script

Sure! Here's a simple game implementation using JavaScript and HTML, where you control a character by tapping or holding down on the screen to make it jump. If the character touches a spike, the game ends.

Game Over

You can save the above code as a single HTML file and open it in a web browser to play the game. When you tap or hold down on the screen, the character will jump. If the character touches a spike, the game ends, and a "Game Over" message will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Jump Game</title>
  <style>
    /* Styling the game container */
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#game-container {
      width: 100%;
      height: 100vh;
      background-color: #f2f2f2;
      position: relative;
    }

/* Styling the character */
    #character {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

/* Styling the spike */
    .spike {
      width: 15px;
      height: 30vh;
      background-color: red;
      position: absolute;
      bottom: 0;
      animation: move-spike 3s linear infinite;
    }

@keyframes move-spike {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

/* Styling the game over message */
    #game-over {
      font-size: 24px;
      color: red;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="character"></div>
    <div id="game-over">Game Over</div>
  </div>

// Jump variables
    const jumpForce = -10;
    const gravity = 0.5;
    let position = 0;
    let isJumping = false;

// Game over variable
    let isGameOver = false;

// Function to handle jump logic
    function jump() {
      if (isGameOver) return;
      if (!isJumping) {
        isJumping = true;
        let jumpInterval = setInterval(() => {
          if (position > 150) {
            clearInterval(jumpInterval);
            let fallInterval = setInterval(() => {
              if (position < 0) {
                clearInterval(fallInterval);
                isJumping = false;
              }
              position -= gravity;
              character.style.bottom = position + 'px';
            }, 20);
          }
          position += jumpForce;
          character.style.bottom = position + 'px';
        }, 20);
      }
    }

// Function to handle game over logic
    function gameOver() {
      isGameOver = true;
      gameOverMessage.style.display = 'block';
    }

// Event listeners for touch events
    document.addEventListener('touchstart', jump);
    document.addEventListener('touchend', () => {
      if (isJumping) {
        clearInterval(jumpInterval);
        isJumping = false;
      }
    });

// Game loop
    const gameLoop = setInterval(() => {
      if (!isGameOver) {
        // Check collision with spike
        const spikes = document.getElementsByClassName('spike');
        for (let i = 0; i < spikes.length; i++) {
          const spike = spikes[i];
          const spikeLeft = spike.getBoundingClientRect().left;
          const spikeRight = spike.getBoundingClientRect().right;
          const characterLeft = character.getBoundingClientRect().left;
          const characterRight = character.getBoundingClientRect().right;

if (
            (characterLeft <= spikeRight && characterLeft >= spikeLeft) ||
            (characterRight >= spikeLeft && characterRight <= spikeRight)
          ) {
            gameOver();
          }
        }
      }
    }, 10);

</script>
</body>
</html>
```