Mario Brothers like game but name IS new super cat bro's game

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

No:42892

←

Prev Next

→

Mario Brothers like game but name IS new super cat..ALL
Developer User18914｜Date and time 24/2/13 7:02:01
Build time 14.615 sec｜Game capacity 4.219KB｜

Script

Score: 0

Game Over

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>New Super Cat Bro</title>
  <style>
    #game {
      position: relative;
      width: 400px;
      height: 400px;
      background-image: url("background.png");
      background-size: cover;
      border: 2px solid black;
    }
    
    #player {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 70px;
      background-image: url("cat.png");
      background-size: contain;
    }

#enemy {
      position: absolute;
      top: 0;
      left: 550px;
      width: 50px;
      height: 70px;
      background-image: url("dog.png");
      background-size: contain;
    }

#score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 20px;
      color: white;
    }

#game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      color: white;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div id="enemy"></div>
    <div id="score">Score: 0</div>
    <div id="game-over">Game Over</div>
  </div>

var gameWidth = 600;
    var gameHeight = 400;
    var playerWidth = 50;
    var playerHeight = 70;
    var enemyWidth = 50;
    var enemyHeight = 70;
    var playerX = 0;
    var playerY = gameHeight - playerHeight;
    var enemyX = gameWidth - enemyWidth;
    var enemyY = 0;
    var scoreValue = 0;
    var speed = 10;

// Função principal do jogo
    function gameLoop() {
      movePlayer();
      moveEnemy();
      checkCollision();
      
      if (!isGameOver()) {
        requestAnimationFrame(gameLoop);
      } else {
        gameOver.style.display = "block";
      }
    }

// Função para mover o jogador
    function movePlayer() {
      updateScore();
      
      if (playerX < 0) {
        playerX = 0;
      } else if (playerX > gameWidth - playerWidth) {
        playerX = gameWidth - playerWidth;
      }

player.style.left = playerX + "px";
    }

// Função para mover o inimigo
    function moveEnemy() {
      enemyY += speed;
      
      if (enemyY > gameHeight - enemyHeight) {
        enemyY = 0;
        enemyX = Math.random() * (gameWidth - enemyWidth);
      }

enemy.style.top = enemyY + "px";
      enemy.style.left = enemyX + "px";
    }

// Função para verificar colisão entre o jogador e o inimigo
    function checkCollision() {
      var playerRect = player.getBoundingClientRect();
      var enemyRect = enemy.getBoundingClientRect();

if (
        playerRect.top <= enemyRect.bottom &&
        playerRect.bottom >= enemyRect.top &&
        playerRect.left <= enemyRect.right &&
        playerRect.right >= enemyRect.left
      ) {
        endGame();
      }
    }

// Função para atualizar a pontuação
    function updateScore() {
      scoreValue += 1;
      score.innerHTML = "Score: " + scoreValue;
    }

// Função para verificar se o jogo acabou
    function isGameOver() {
      var playerRect = player.getBoundingClientRect();
      var enemyRect = enemy.getBoundingClientRect();

return (
        playerRect.left <= enemyRect.right &&
        playerRect.right >= enemyRect.left &&
        playerRect.bottom >= enemyRect.top
      );
    }

// Função para encerrar o jogo
    function endGame() {
      cancelAnimationFrame(gameLoop);
      gameOver.style.display = "block";
    }

// Event Listeners para controlar o jogador
    window.addEventListener("keydown", function (event) {
      if (event.key === "ArrowLeft") {
        playerX -= speed;
      } else if (event.key === "ArrowRight") {
        playerX += speed;
      }
    });

// Iniciar o jogo
    gameLoop();
  </script>
</body>
</html>