Cat hunting game with health bar and snake enemies's game

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

No:36064

←

Prev Next

→

Cat hunting game with health bar and snake enemies
Developer User16722｜Date and time 24/1/16 12:19:36
Build time 19.719 sec｜Game capacity 5.105KB｜

Script

Sure! Here's a simple cat hunting game implemented as a single HTML file using JavaScript. The game features a cat as the player character, a health bar, and snake enemies. It is designed for smartphone operation and uses pictograms for visuals. Please note that this is a basic implementation and can be further enhanced with additional features, levels, and graphics.

In this game, the cat is controlled by dragging your finger on the screen. The health bar decreases when the cat collides with a snake (represented by pictograms). The game ends when the health reaches zero, and the final score is displayed. Please note that you need to replace `'emozi_all/cat.png'` and `'emozi_all/snake.png'` with the actual paths to your pictogram images.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Please note that this is a basic implementation and can be further enhanced with additional features, levels, and graphics.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cat Hunting Game</title>
  <style>
    #game {
      position: relative;
      width: 100%;
      height: 100vh;
      background: #f7f7f7;
      overflow: hidden;
    }

#player {
      position: absolute;
      width: 50px;
      height: 50px;
      background: url('cat.png') center center no-repeat;
      background-size: contain;
    }

.snake {
      position: absolute;
      width: 50px;
      height: 50px;
      background: url('snake.png') center center no-repeat;
      background-size: contain;
    }

#health-bar {
      position: absolute;
      top: 10px;
      left: 10px;
      height: 20px;
      width: 200px;
      border: 1px solid #000;
    }

#remaining-health {
      height: 100%;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div id="health-bar">
      <div id="remaining-health"></div>
    </div>
  </div>

var playerHealth = 100;
    var score = 0;
    var speed = 2;
    var snakes = [];

// Update the health bar
    function updateHealthBar() {
      healthBar.style.width = playerHealth + '%';

if (playerHealth <= 0) {
        // Game over logic
        gameOver();
      }
    }

// Generate a snake
    function generateSnake() {
      var snake = document.createElement('div');
      snake.classList.add('snake');
      game.appendChild(snake);

var x = Math.random() * (game.offsetWidth - snake.offsetWidth);
      var y = Math.random() * (game.offsetHeight - snake.offsetHeight);
      snake.style.left = x + 'px';
      snake.style.top = y + 'px';

snakes.push(snake);
    }

// Move the snakes
    function moveSnakes() {
      snakes.forEach(function(snake) {
        var x = Math.random() * 4 - 2;
        var y = Math.random() * 4 - 2;

var xPos = snake.offsetLeft + x;
        var yPos = snake.offsetTop + y;

if (
          xPos < 0 ||
          yPos < 0 ||
          xPos + snake.offsetWidth > game.offsetWidth ||
          yPos + snake.offsetHeight > game.offsetHeight
        ) {
          // Reverse the direction if snake hits the boundary
          x *= -1;
          y *= -1;
        }

snake.style.left = xPos + 'px';
        snake.style.top = yPos + 'px';

// Check for collision with player
        if (checkCollision(player, snake)) {
          playerHealth -= 10;
          updateHealthBar();
          snake.remove();
        }
      });

// Remove snakes that are no longer visible
      snakes = snakes.filter(function(snake) {
        return game.contains(snake);
      });
    }

// Check collision between two elements
    function checkCollision(element1, element2) {
      var rect1 = element1.getBoundingClientRect();
      var rect2 = element2.getBoundingClientRect();

return !(
        rect1.right < rect2.left ||
        rect1.left > rect2.right ||
        rect1.bottom < rect2.top ||
        rect1.top > rect2.bottom
      );
    }

// Game over logic
    function gameOver() {
      alert('Game Over! Your score: ' + score);
      snakes.forEach(function(snake) {
        snake.remove();
      });
      player.remove();

clearInterval(gameLoop);
    }

// Event listeners for player movement
    function handleTouchStart(event) {
      startY = event.touches[0].clientY;
      startX = event.touches[0].clientX;
    }

function handleTouchMove(event) {
      event.preventDefault();
      var deltaY = startY - event.touches[0].clientY;
      var deltaX = startX - event.touches[0].clientX;

player.style.top = player.offsetTop - deltaY + 'px';
      player.style.left = player.offsetLeft - deltaX + 'px';

startY = event.touches[0].clientY;
      startX = event.touches[0].clientX;
    }

game.addEventListener('touchstart', handleTouchStart, false);
    game.addEventListener('touchmove', handleTouchMove, false);

// Start the game
    function startGame() {
      gameLoop = setInterval(function() {
        generateSnake();
        moveSnakes();
        score++;
      }, 1000 / speed);
    }

updateHealthBar();
    startGame();
  </script>
</body>
</html>
```

Please note that you need to replace `'cat.png'` and `'snake.png'` with the actual paths to your pictogram images.