A cat which jumps through dangerous levels's game

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

No:13641

102

←

Prev Next

→

A cat which jumps through dangerous levels
Developer User5976｜Date and time 23/8/29 5:54:48
Build time 14.595 sec｜Game capacity 3.105KB｜

Script

Sure! Here's a simple game involving a cat that jumps through dangerous levels. You can play it on a smartphone operating on an HTML-enabled browser. The game uses pictograms for illustration purposes.

To use this game, save the code as an HTML file (e.g., `cat_jump_game.html`) and open it using an HTML-enabled web browser on your smartphone. The game will start, and you can tap anywhere on the screen to make the cat jump. The goal is to avoid colliding with the red dangerous objects moving up and down the screen. If the cat touches any of the dangerous objects, a "Game Over" alert will appear, and you can try again by reloading the page. Note: This is a basic implementation of a cat jumping game and can be further enhanced with additional features, levels, and better graphics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cat Jump Game</title>
  <style>
    body {
      overflow: hidden;
    }
    
    #game-area {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #9acbff;
    }
    
    #cat {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
    }
    
    .danger {
      position: absolute;
      background-color: red;
      border-radius: 50%;
      animation: move 2s linear infinite;
    }
    
    @keyframes move {
      0% {
        transform: translateY(0);
      }
      
      50% {
        transform: translateY(-200px);
      }
      
      100% {
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="cat">
      <img src="cat.png" alt="Cat">
    </div>
    <div class="danger" style="bottom: 100px; left: 20px; width: 30px; height: 30px;"></div>
    <div class="danger" style="bottom: 200px; left: 60px; width: 40px; height: 40px;"></div>
    <div class="danger" style="bottom: 300px; left: 140px; width: 50px; height: 50px;"></div>
    
  </div>
  
  <script>
    const cat = document.getElementById('cat');
    const dangers = document.querySelectorAll('.danger');
    
    let jumping = false;
    
    function jump() {
      if (!jumping) {
        jumping = true;
        cat.style.animation = 'jump 0.5s';
        
        setTimeout(function() {
          cat.style.animation = '';
          jumping = false;
        }, 500);
      }
    }
    
    document.addEventListener('click', jump);
    
    function checkCollision() {
      const catRect = cat.getBoundingClientRect();
      
      dangers.forEach(function(danger) {
        const dangerRect = danger.getBoundingClientRect();
        
        if (catRect.bottom >= dangerRect.top && catRect.top <= dangerRect.bottom && catRect.right >= dangerRect.left && catRect.left <= dangerRect.right) {
          gameOver();
        }
      });
    }
    
    function gameOver() {
      alert('Game Over! Try again.');
      location.reload();
    }
    
    setInterval(checkCollision, 10); // Check for collision every 10ms
  </script>
</body>
</html>
```

Note: This is a basic implementation of a cat jumping game and can be further enhanced with additional features, levels, and better graphics as per your requirements.