Make a cat platformer game's game

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

No:42886

←

Prev Next

→

Make a cat platformer game
Developer User18996｜Date and time 24/2/13 6:10:51
Build time 11.754 sec｜Game capacity 3.11KB｜

Script

Sure, here's an example of a simple cat platformer game implemented as a single HTML file using JavaScript and enclosed in script tags:

In this game, you control a cat using the spacebar to make it jump. The objective is to navigate the cat to safely land on the green platform without falling down. The game uses simple collision detection to check if the cat is on the platform or not. Note: To make the game visually appealing, you will need to replace the placeholder `emozi_all/game.png` with an actual cat image and adjust the dimensions used in the game accordingly. Please make sure to have a cat image (preferably in the same directory as the HTML file) and update the `emozi_all/cat.png` path in the code for the game to work properly.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple cat platformer game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cat Platformer Game</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
      background-color: #f1f1f1;
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="gameCanvas"></div>

// Load cat image
    var catImage = new Image();
    catImage.src = "cat.png";

// Check for collisions between cat and platform
    function checkCollision() {
      if (catY + catHeight >= platformY &&
          catY + catHeight <= platformY + platformHeight &&
          catX + catWidth >= platformX &&
          catX <= platformX + platformWidth) {
        jump = false;
      }
    }

// Update cat position
    function updateCat() {
      if (jump) {
        catY -= gravity;
        if (catY <= catHeight - jumpHeight) {
          jump = false;
        }
      } else {
        if (catY < canvas.height - catHeight) {
          catY += gravity;
        }
      }
    }

// Update game canvas
    function updateCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw the cat
      ctx.drawImage(catImage, catX, catY, catWidth, catHeight);
      
      // Draw the platform
      ctx.fillStyle = "green";
      ctx.fillRect(platformX, platformY, platformWidth, platformHeight);

checkCollision();
      updateCat();
    }

// Start the game
    function startGame() {
      gameLoopInterval = setInterval(updateCanvas, 20);
    }

// Handle keydown event
    function keyDown(event) {
      if (event.key === " ") {
        jump = true;
      }
    }

// Handle keyup event
    function keyUp(event) {
      if (event.key === " ") {
        jump = false;
      }
    }

// Add event listeners for keydown and keyup events
    document.addEventListener("keydown", keyDown);
    document.addEventListener("keyup", keyUp);

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

Note: To make the game visually appealing, you will need to replace the placeholder `cat.png` with an actual cat image and adjust the dimensions used in the game accordingly.

Please make sure to have a cat image (preferably in the same directory as the HTML file) and update the `cat.png` path in the code for the game to work properly.