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

No:41802

A game that allows u to enjoy the skills of diving
Developer User18753｜Date and time 24/2/10 1:44:53
Build time 17.265 sec｜Game capacity 4.967KB｜

Script

Sure! Here's an example of a simple diving game implemented in a single HTML file with JavaScript. Please note that this is a basic implementation and can be further enhanced with your desired features and graphics:

Diving Game

Score: 0

To use this code, please make sure to replace the `emozi_rabbit.png` and `emozi_apple.png` with the actual pictograms or images you want to use for the diver and splash animations. Once the game is loaded in a smartphone's browser, the player can use the left and right arrow keys to move the diver and avoid the falling obstacles. The score increases with each successfully avoided obstacle, and it will display "Game Over" with the final score when the diver collides with an obstacle. Note: The functionality and appearance can be further improved based on your requirements and preferences. This is just a basic implementation to get you started with a diving game concept.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Diving Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #score {
      font-size: 32px;
      margin-bottom: 10px;
    }
    #gameboard {
      border: 1px solid black;
      height: 300px;
      margin: 20px auto;
      position: relative;
      width: 200px;
    }
    .diver {
      display: inline-block;
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      background: url('diver.png') no-repeat center;
      background-size: cover;
      transition: all 0.2s ease-in-out;
    }
    .obstacle {
      display: inline-block;
      position: absolute;
      bottom: 100%;
      transition: bottom 0.5s linear;
    }
    .splash {
      position: absolute;
      bottom: 0;
      display: none;
      background: url('splash.png') no-repeat center;
      background-size: cover;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <h1>Diving Game</h1>
  <div id="score">Score: 0</div>
  <div id="gameboard">
    <div id="diver" class="diver"></div>
  </div>

// Event Listeners
    window.addEventListener('keydown', moveDiver);

// Game Initialization
    function startGame() {
      isGameOver = false;
      score = 0;
      speed = 3;
      document.getElementById('score').textContent = 'Score: ' + score;
      document.getElementById('diver').style.bottom = '0';

// Generate obstacles
      gameInterval = setInterval(generateObstacle, 2000);

// Move the diver animation
      animateDiver();
    }

// Generate obstacles
    function generateObstacle() {
      if (!isGameOver) {
        var obstacle = document.createElement('div');
        obstacle.className = 'obstacle';
        obstacle.style.left = Math.floor(Math.random() * 150) + 'px';
        document.getElementById('gameboard').appendChild(obstacle);
        moveObstacle(obstacle);
      }
    }

// Move obstacle animation
    function moveObstacle(obstacle) {
      var currentBottom = 100;
      var obstacleInterval = setInterval(function() {
        if (currentBottom <= -20) {
          clearInterval(obstacleInterval);
          obstacle.parentNode.removeChild(obstacle);
        }
        if (
          !isGameOver &&
          currentBottom > 0 &&
          currentBottom < 50 &&
          parseInt(obstacle.style.left) === parseInt(
            document.getElementById('diver').style.left
          )
        ) {
          gameOver();
        }
        currentBottom -= speed;
        obstacle.style.bottom = currentBottom + 'px';
      }, 10);
    }

// Move the diver
    function moveDiver(event) {
      if (!isGameOver) {
        var diver = document.getElementById('diver');
        if (event.key === 'ArrowLeft' && parseInt(diver.style.left) > 0) {
          diver.style.left = parseInt(diver.style.left) - 50 + 'px';
        } else if (
          event.key === 'ArrowRight' &&
          parseInt(diver.style.left) < 150
        ) {
          diver.style.left = parseInt(diver.style.left) + 50 + 'px';
        }
      }
    }

// Game Over
    function gameOver() {
      isGameOver = true;
      clearInterval(gameInterval);
      document.getElementById('gameboard').innerHTML +=
        '<div class="splash"></div>';
      setTimeout(function () {
        alert('Game Over! Your Score: ' + score);
        document.getElementById('score').textContent = 'Score: 0';
        document.getElementById('gameboard').innerHTML = '<div id="diver" class="diver"></div>'
      }, 500);
    }

// Animate the diver
    function animateDiver() {
      setInterval(function() {
        var diver = document.getElementById('diver');
        if (diver.style.bottom === '0px') {
          diver.style.bottom = '50px';
        } else {
          diver.style.bottom = '0px';
        }
      }, 500);
    }

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

To use this code, please make sure to replace the `diver.png` and `splash.png` with the actual pictograms or images you want to use for the diver and splash animations.

Once the game is loaded in a smartphone's browser, the player can use the left and right arrow keys to move the diver and avoid the falling obstacles. The score increases with each successfully avoided obstacle, and it will display "Game Over" with the final score when the diver collides with an obstacle.

Note: The functionality and appearance can be further improved based on your requirements and preferences. This is just a basic implementation to get you started with a diving game concept.