Haal de overkant van het parkoer voor je tegenstanders en pak handige spullen op's game

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

No:27859

←

Prev Next

→

Haal de overkant van het parkoer voor je tegenstan..ALL
Developer User13897｜Date and time 23/12/9 20:07:39
Build time 42.008 sec｜Game capacity 5.563KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parkoer Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
      }
      .enemy {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        top: 0;
      }
      .item {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <script>
      // Define variables
      var player;
      var enemies;
      var items;
      var parkourWidth;
      var parkourHeight;
      var score;
      
      // Initialize the game
      function init() {
        // Initialize variables
        player = document.getElementById('player');
        enemies = document.getElementsByClassName('enemy');
        items = document.getElementsByClassName('item');
        parkourWidth = window.innerWidth - 50; // Adjusted width to fit smartphones
        parkourHeight = window.innerHeight - 50; // Adjusted height to fit smartphones
        score = 0;
        
        // Place player at the center
        player.style.left = parkourWidth/2 + 'px';
        player.style.top = parkourHeight/2 + 'px';
        
        // Move enemies randomly
        for (var i = 0; i < enemies.length; i++) {
          var x = Math.random() * parkourWidth;
          var y = Math.random() * parkourHeight;
          enemies[i].style.left = x + 'px';
          enemies[i].style.top = y + 'px';
        }
        
        // Place items randomly
        for (var i = 0; i < items.length; i++) {
          var x = Math.random() * (parkourWidth - 30); // Adjusted size of the item
          var y = Math.random() * (parkourHeight - 30); // Adjusted size of the item
          items[i].style.left = x + 'px';
          items[i].style.top = y + 'px';
        }
        
        // Add event listener for player movement
        document.addEventListener('keydown', movePlayer);
        
        // Start the game loop
        setInterval(updateGame, 100);
      }
      
      // Move the player based on arrow key input
      function movePlayer(event) {
        var key = event.keyCode;
        var step = 10; // Adjusted step size for smartphones
        
        if (key === 37) { // Left arrow
          player.style.left = parseInt(player.style.left) - step + 'px';
        }
        else if (key === 38) { // Up arrow
          player.style.top = parseInt(player.style.top) - step + 'px';
        }
        else if (key === 39) { // Right arrow
          player.style.left = parseInt(player.style.left) + step + 'px';
        }
        else if (key === 40) { // Down arrow
          player.style.top = parseInt(player.style.top) + step + 'px';
        }
      }
      
      // Update the game state
      function updateGame() {
        checkCollision();
        checkWinCondition();
      }
      
      // Check for collision between player and enemies/items
      function checkCollision() {
        var playerRect = player.getBoundingClientRect();
        
        for (var i = 0; i < enemies.length; i++) {
          var enemyRect = enemies[i].getBoundingClientRect();
          if (rectIntersect(playerRect, enemyRect)) {
            gameOver();
            return;
          }
        }
        
        for (var i = 0; i < items.length; i++) {
          var itemRect = items[i].getBoundingClientRect();
          if (rectIntersect(playerRect, itemRect)) {
            items[i].style.display = 'none'; // Hide the collected item
            score++;
            updateScore();
          }
        }
      }
      
      // Check if the player has reached the end
      function checkWinCondition() {
        if (score === items.length) {
          gameOver(true);
        }
      }
      
      // Game over function
      function gameOver(win = false) {
        clearInterval(updateGame);
        document.removeEventListener('keydown', movePlayer);
        if (win) {
          alert('Gefeliciteerd! Je hebt het parkoer voltooid!');
        } else {
          alert('Het parkoer is niet voltooid. Probeer het opnieuw!');
        }
        setTimeout(function() {
          location.reload();
        }, 1000);
      }
      
      // Utility function to check if two rectangles intersect
      function rectIntersect(rect1, rect2) {
        return (
          rect1.left < rect2.right &&
          rect1.right > rect2.left &&
          rect1.top < rect2.bottom &&
          rect1.bottom > rect2.top
        );
      }
      
      // Update the score display
      function updateScore() {
        document.getElementById('score').innerHTML = 'Score: ' + score + '/' + items.length;
      }
      
      // Call the init function on page load
      window.onload = init;
    </script>
    
    
    <div id="player" class="item"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="enemy"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

<div id="score"></div>
  </body>
</html>