Cat platformer game with buttons mobile friendly not for PC's game

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

No:43596

←

Prev Next

→

Cat platformer game with buttons mobile friendly n..ALL
Developer User19162｜Date and time 24/2/16 4:38:55
Build time 14.143 sec｜Game capacity 4.077KB｜

Script

Sure! Here's an example of a simple cat platformer game implemented as a single HTML file using JavaScript. It includes buttons for mobile-friendly control and uses pictograms for the cat and platforms.

To play the game, save the code as an HTML file and run it on a smartphone browser. The cat can be controlled using the left and right buttons, and it can jump by tapping the spacebar or the jump button on the software keyboard. The goal is to reach the platforms and avoid falling off the screen. Note: Make sure to replace "emozi_all/cat.png" and "emozi_chicken.png" with the actual image file names for the cat and platform pictograms you want to use in the game.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .game-container {
      position: relative;
      height: 100vh;
      background-color: #f0f0f0;
    }
    
    .cat {
      position: absolute;
      width: 60px;
      height: 60px;
      background-image: url('cat.png');
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    .platform {
      position: absolute;
      width: 100px;
      height: 20px;
      background-image: url('platform.png');
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    #left-button,
    #right-button {
      position: fixed;
      bottom: 10px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      border: none;
      color: #ffffff;
      font-size: 24px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }
    
    #left-button {
      left: 10px;
    }
    
    #right-button {
      right: 10px;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div id="cat" class="cat"></div>
    <div id="platform" class="platform"></div>
  </div>
  
  <button id="left-button">←</button>
  <button id="right-button">→</button>
  
  <script>
    // Get references to the cat, platform, and buttons
    var cat = document.getElementById("cat");
    var platform = document.getElementById("platform");
    var leftButton = document.getElementById("left-button");
    var rightButton = document.getElementById("right-button");
    
    var catX = 200; // Initial position of the cat
    var platformX = 300; // Initial position of the platform
    var gravity = 1; // Gravity value
    var jumpForce = 15; // Jump force value
    var isJumping = false; // Flag for jump action
    
    // Update the position of the cat and platform
    function update() {
      // Move the platform left
      platformX -= 5;
      platform.style.left = platformX + "px";
      
      // Check if the platform is out of the screen
      if (platformX < -100) {
        // Reset the platform's position
        platformX = 600;
        platform.style.left = platformX + "px";
      }
      
      // Apply gravity to the cat
      if (isJumping) {
        gravity -= 1;
        catX += gravity;
      }
      
      // Check if the cat is touching the platform
      if (catX > platformX - 60 && catX < platformX + 100 && gravity < 0) {
        isJumping = false;
        gravity = 1;
      }
      
      // Update the cat's position
      cat.style.left = catX + "px";
      cat.style.bottom = "0px";
      
      // Call the update function again after a short delay
      setTimeout(update, 20);
    }
    
    // Event listener for left button click
    leftButton.addEventListener("click", function() {
      catX -= 20;
    });
    
    // Event listener for right button click
    rightButton.addEventListener("click", function() {
      catX += 20;
    });
    
    // Event listener for spacebar keydown event to jump
    window.addEventListener("keydown", function(event) {
      if (event.keyCode === 32 && !isJumping) {
        isJumping = true;
        gravity = jumpForce;
      }
    });
    
    // Start the game
    update();
  </script>
</body>
</html>
```

Note: Make sure to replace "cat.png" and "platform.png" with the actual image file names for the cat and platform pictograms you want to use in the game.