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

No:36880

←

Prev Next

→

Race spel
Developer User16908｜Date and time 24/1/19 4:13:17
Build time 14.867 sec｜Game capacity 3.338KB｜

Script

Race spel

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Race spel</title>
    <style>
      body {
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
        text-align: center;
        padding-top: 100px;
      }
      h1 {
        color: #333;
      }
      #road {
        background-color: #555;
        width: 320px;
        height: 480px;
        margin: 0 auto;
        position: relative;
      }
      #player {
        background-image: url('car.png');
        background-size: cover;
        width: 40px;
        height: 80px;
        position: absolute;
        bottom: 10px;
        left: 140px;
      }
      .obstacle {
        background-image: url('obstacle.png');
        background-size: cover;
        width: 40px;
        height: 40px;
        position: absolute;
        top: -40px;
      }
    </style>
  </head>
  <body>
    <h1>Race spel</h1>
    <div id="road">
      <div id="player"></div>
    </div>

// Functies
      function startGame() {
        // Maak het speelveld en speler aan
        road = document.getElementById("road");
        player = document.getElementById("player");

// Voeg beweging toe wanneer scherm wordt aangeraakt
        road.addEventListener("touchstart", function (event) {
          movePlayer(event.touches[0].clientX);
        });

// Start het spel
        gameStarted = true;
        gameLoop();
      }

function endGame() {
        gameStarted = false;
        alert("Game Over! Score: " + score);
        location.reload();
      }

function movePlayer(targetX) {
        player.style.left = targetX - 20 + "px";
      }

function createObstacle() {
        if (gameStarted) {
          var obstacle = document.createElement("div");
          obstacle.className = "obstacle";
          obstacle.style.left = Math.floor(Math.random() * 280) + "px";
          road.appendChild(obstacle);
          obstacles.push(obstacle);
        }
      }

function moveObstacles() {
        for (var i = 0; i < obstacles.length; i++) {
          var obstacle = obstacles[i];
          var obstacleY = parseInt(obstacle.style.top);
          obstacleY += speed;
          obstacle.style.top = obstacleY + "px";

if (obstacleY > 480) {
            road.removeChild(obstacle);
            obstacles.splice(i, 1);
            i--;
            score++;
          }

// Check collision met speler
          var playerX = parseInt(player.style.left);
          var playerY = parseInt(player.style.bottom);
          if (
            playerX + 40 >= parseInt(obstacle.style.left) &&
            playerX <= parseInt(obstacle.style.left) + 40 &&
            playerY + 80 >= obstacleY &&
            playerY <= obstacleY + 40
          ) {
            endGame();
          }
        }
      }

function gameLoop() {
        position += speed;
        road.style.backgroundPositionY = position + "px";

moveObstacles();
        createObstacle();

if (gameStarted) {
          window.requestAnimationFrame(gameLoop);
        }
      }

// Start het spel
      startGame();
    </script>
  </body>
</html>