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

No:38531

Ocean Runner look out for squids they are very dan..ALL
Developer User17401｜Date and time 24/1/25 0:36:29
Build time 17.475 sec｜Game capacity 3.793KB｜

Script

Ocean Runner

The code above represents a basic game called "Ocean Runner" where the player attempts to avoid the squids by moving a boat to the left or right using arrow keys. The game is implemented as a single HTML file and uses JavaScript enclosed by script tags. The player is represented by a rectangular div with a pink background and is animated to give a running effect. The dangerous squids are represented by a div with a yellow background, animating from side to side. The main game logic involves moving the player left or right based on arrow key input and checking for collisions between the player and the squids. If a collision occurs, the game ends and an alert is displayed. The game is designed for smartphone operation, considering touch screen arrow buttons can be added using HTML/CSS. This implementation uses simple pictograms in the form of colored rectangles for simplicity.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #aed6f1;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    
    #player {
      width: 50px;
      height: 50px;
      background-color: #f5b7b1;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      animation: run 2s infinite;
    }
    
    #squid {
      width: 50px;
      height: 50px;
      background-color: #f9e79f;
      position: absolute;
      bottom: 150px;
      left: 50%;
      transform: translateX(-50%);
      animation: moveSquid 1s infinite;
    }
    
    @keyframes run {
      0% {
        transform: translateX(-50%) rotate(0deg);
      }
      50% {
        transform: translateX(-50%) rotate(20deg);
      }
      100% {
        transform: translateX(-50%) rotate(0deg);
      }
    }
    
    @keyframes moveSquid {
      0% {
        transform: translateX(-50%);
      }
      50% {
        transform: translateX(-70%) rotate(-10deg);
      }
      100% {
        transform: translateX(-50%);
      }
    }
  </style>
</head>
<body>
  <h1>Ocean Runner</h1>
  <div id="player"></div>
  <div id="squid"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var player = document.getElementById('player');
      var squid = document.getElementById('squid');
      
      function moveLeft() {
        var currentPosition = parseFloat(player.style.left);
        var newPosition = currentPosition - 10;
        if (newPosition > 0) {
          player.style.left = newPosition + 'px';
        }
      }
      
      function moveRight() {
        var currentPosition = parseFloat(player.style.left);
        var newPosition = currentPosition + 10;
        if (newPosition + player.offsetWidth < window.innerWidth) {
          player.style.left = newPosition + 'px';
        }
      }
      
      function checkCollision() {
        var playerPosition = player.getBoundingClientRect();
        var squidPosition = squid.getBoundingClientRect();
        
        if (
          playerPosition.left < squidPosition.right &&
          playerPosition.right > squidPosition.left &&
          playerPosition.top < squidPosition.bottom &&
          playerPosition.bottom > squidPosition.top
        ) {
          alert('Game Over');
          clearInterval(gameLoop);
        }
      }
      
      document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft') {
          moveLeft();
        } else if (event.key === 'ArrowRight') {
          moveRight();
        }
        
        checkCollision();
      });
      
      var gameLoop = setInterval(function() {
        var squidPosition = parseFloat(squid.style.bottom);
        if (squidPosition <= 0) {
          squid.style.bottom = '150px';
        }
      }, 1000);
    });
  </script>
</body>
</html>
```
The code above represents a basic game called "Ocean Runner" where the player attempts to avoid the squids by moving a boat to the left or right using arrow keys. The game is implemented as a single HTML file and uses JavaScript enclosed by script tags.

The player is represented by a rectangular div with a pink background and is animated to give a running effect. The dangerous squids are represented by a div with a yellow background, animating from side to side. The main game logic involves moving the player left or right based on arrow key input and checking for collisions between the player and the squids. If a collision occurs, the game ends and an alert is displayed.

The game is designed for smartphone operation, considering touch screen arrow buttons can be added using HTML/CSS. This implementation uses simple pictograms in the form of colored rectangles for simplicity.