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

No:20181

You are chased by an evil pickle
Developer User8969｜Date and time 23/10/8 17:45:39
Build time 24.491 sec｜Game capacity 3.963KB｜

Script

Evil Pickle Chase Game

Score: 0

Game Over!

Note: In the above code, make sure to replace `"emozi_rabbit.png"` and `"emozi_all/player.png"` with the file paths of the respective image files for the pickle and player pictograms.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Evil Pickle Chase Game</title>
  <style>
    body {
      background-color: #f0f0f0;
      text-align: center;
      margin-top: 15%;
      font-family: Arial, sans-serif;
    }
    
    #pickle {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    #player {
      width: 100px;
      height: 100px;
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    #score {
      font-size: 24px;
      font-weight: bold;
      margin-top: 20px;
    }
    
    #game-over {
      font-size: 36px;
      font-weight: bold;
      color: red;
      display: none;
    }
  </style>
</head>
<body>
  <h1>Evil Pickle Chase Game</h1>
  <div id="pickle">
    <img src="pickle.png" alt="Evil Pickle">
  </div>
  <div id="player">
    <img src="player.png" alt="Player">
  </div>
  <div id="score">Score: 0</div>
  <div id="game-over">Game Over!</div>
  
  <script>
    // Game Variables
    var score = 0;
    var isGameOver = false;
    var pickleSpeed = 3;
    var playerSpeed = 10;
    
    // Get DOM elements
    var pickleElement = document.getElementById("pickle");
    var playerElement = document.getElementById("player");
    var scoreElement = document.getElementById("score");
    var gameOverElement = document.getElementById("game-over");
    
    // Update score function
    function updateScore() {
      score++;
      scoreElement.innerHTML = "Score: " + score;
    }
    
    // Move pickle randomly
    function movePickle() {
      var x = Math.random() * window.innerWidth;
      var y = Math.random() * window.innerHeight;
      pickleElement.style.left = x + "px";
      pickleElement.style.top = y + "px";
    }
    
    // Check collision between pickle and player
    function checkCollision() {
      var playerRect = playerElement.getBoundingClientRect();
      var pickleRect = pickleElement.getBoundingClientRect();
      
      if (
        playerRect.left < pickleRect.right &&
        playerRect.right > pickleRect.left &&
        playerRect.top < pickleRect.bottom &&
        playerRect.bottom > pickleRect.top
      ) {
        gameOver();
      }
    }
    
    // Game over function
    function gameOver() {
      isGameOver = true;
      pickleElement.style.display = "none";
      gameOverElement.style.display = "block";
    }
    
    // Player movement
    function movePlayer(event) {
      if (isGameOver) return;
      
      var x = playerElement.offsetLeft;
      
      if (event.keyCode === 37) {
        // Left arrow key
        x -= playerSpeed;
      } else if (event.keyCode === 39) {
        // Right arrow key
        x += playerSpeed;
      }
      
      // Prevent player from moving out of the screen
      if (x < 0) {
        x = 0;
      }
      
      if (x > window.innerWidth - playerElement.offsetWidth) {
        x = window.innerWidth - playerElement.offsetWidth;
      }
      
      playerElement.style.left = x + "px";
    }
    
    // Start the game
    function startGame() {
      document.addEventListener("keydown", movePlayer);
      
      // Loop to move pickle randomly every second
      setInterval(function() {
        if (!isGameOver) {
          movePickle();
        }
      }, 1000);
      
      // Loop to check collision every millisecond
      setInterval(function() {
        if (!isGameOver) {
          checkCollision();
        }
      }, 1);
      
      // Loop to update score every second
      setInterval(function() {
        if (!isGameOver) {
          updateScore();
        }
      }, 1000);
    }
    
    // Call the startGame function to begin the game
    startGame();
  </script>
</body>
</html>
```

Note: In the above code, make sure to replace `"pickle.png"` and `"player.png"` with the file paths of the respective image files for the pickle and player pictograms.