runnig cat with building's game

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

No:41737

←

Prev Next

→

runnig cat with building
Developer User18720｜Date and time 24/2/9 16:39:16
Build time 11.76 sec｜Game capacity 3.405KB｜

Script

Sure! Here's a simple game where you control a running cat trying to jump over buildings, utilizing pictograms for a smartphone interface. Please note that this is a simplified example to showcase the implementation using HTML and JavaScript.

Please note that this example assumes you have two image files named "emozi_all/cat.png" and "emozi_apple.png" in the same directory as the HTML file. Feel free to replace them with appropriate pictograms of your choice.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Running Cat with Building</title>
    <style>
      canvas {
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the game
      function initializeGame() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

// Set initial values
        catX = 50;
        catY = canvas.height - 50;
        buildingX = canvas.width;
        buildingY = canvas.height - 100;
        gameSpeed = 2;
        isJumping = false;
        isGameOver = false;
        score = 0;

// Load cat and building images
        cat = new Image();
        building = new Image();
        cat.src = "cat.png";
        building.src = "building.png";

// Event listener for jumping
        canvas.addEventListener("click", jump);
        
        // Start the game loop
        gameLoop();
      }

// Game loop
      function gameLoop() {
        if (!isGameOver) {
          // Clear the canvas
          ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw cat
          ctx.drawImage(cat, catX, catY, 50, 50);

// Draw building
          ctx.drawImage(building, buildingX, buildingY, 100, 100);

// Update cat position
          if (isJumping) {
            catY -= 5;
          } else {
            catY += 2;
          }

// Update building position
          buildingX -= gameSpeed;

// Check collision
          if (catY + 50 > canvas.height || checkCollision()) {
            gameOver();
          }

// Increase score if building is passed successfully
          if (buildingX === catX - 100) {
            score++;
          }

// Draw score
          ctx.font = "20px Arial";
          ctx.fillText("Score: " + score, 20, 30);

// Request animation frame
          requestAnimationFrame(gameLoop);
        }
      }

// Check collision between cat and building
      function checkCollision() {
        return (
          catX + 50 >= buildingX &&
          catX <= buildingX + 100 &&
          catY + 50 >= buildingY
        );
      }

// Make the cat jump
      function jump() {
        if (!isJumping && !isGameOver) {
          isJumping = true;
          setTimeout(function () {
            isJumping = false;
          }, 400);
        }
      }

// Game over
      function gameOver() {
        isGameOver = true;
        ctx.fillStyle = "red";
        ctx.font = "40px Arial";
        ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
      }

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

Please note that this example assumes you have two image files named "cat.png" and "building.png" in the same directory as the HTML file. Feel free to replace them with appropriate pictograms of your choice.