AI game creator

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

No:3647

881

←

Prev Next

→

Olympics
Developer User3655｜Date and time 23/6/25 23:43:45
Build time 32.21 sec｜Game capacity 3.763KB｜

Script

5輪記念トライアスロンゲーム

※このコードは、ブラウザのエディタにコピー&ペーストして使用することが可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

5輪記念トライアスロンゲーム

<html>
  <head>
    <meta charset="UTF-8">
    <title>5輪記念トライアスロンゲーム</title>
    <style>
      body {
        background-color: #92C8FF;
      }
      #player {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
      }
    </style>
    <script>
      let player;
      let obstacles = [];
      let score = 0;
      let gameIsOver = false;
      
      function init() {
        player = createPlayer();
        setInterval(function() {
          if (!gameIsOver) {
            score++;
          }
        }, 1000);
        setInterval(function() {
          if (!gameIsOver) {
            createObstacle();
          }
        }, 1000);
      }
      
      function createPlayer() {
        let element = document.createElement("span");
        element.innerHTML = "🚴‍♂️";
        element.style.position = "absolute";
        element.style.bottom = "0";
        element.style.left = "50%";
        element.style.transform = "translateX(-50%)";
        document.body.appendChild(element);
        return element;
      }
      
      function createObstacle() {
        let element = document.createElement("span");
        element.innerHTML = "🏊‍♂️";
        element.style.position = "absolute";
        element.style.top = "0";
        element.style.left = (Math.random() * 90) + "%";
        document.body.appendChild(element);
        obstacles.push(element);
        let moveInterval = setInterval(function() {
          if (!gameIsOver) {
            let top = parseInt(element.style.top);
            element.style.top = (top + 1) + "px";
            if (top > window.innerHeight) {
              clearInterval(moveInterval);
              element.remove();
              let index = obstacles.indexOf(element);
              obstacles.splice(index, 1);
            } else if (isColliding(element, player)) {
              gameOver();
              clearInterval(moveInterval);
            }
          } else {
            clearInterval(moveInterval);
          }
        }, 10);
      }
      
      function isColliding(element1, element2) {
        let element1Rect = element1.getBoundingClientRect();
        let element2Rect = element2.getBoundingClientRect();
        return !(
          (element1Rect.bottom < element2Rect.top) ||
          (element1Rect.top > element2Rect.bottom) ||
          (element1Rect.right < element2Rect.left) ||
          (element1Rect.left > element2Rect.right)
        );
      }
      
      function gameOver() {
        gameIsOver = true;
        obstacles.forEach(function(obstacle) {
          obstacle.remove();
        });
        obstacles = [];
        alert("ゲームオーバー！\nあなたのスコアは" + score + "点でした！");
      }
      
      window.addEventListener("load", function() {
        init();
        window.addEventListener("touchstart", function(event) {
          if (!gameIsOver) {
            let playerLeft = parseInt(player.style.left);
            let minLeft = 0;
            let maxLeft = window.innerWidth;
            let newLeft;
            if (event.touches[0].pageX < (window.innerWidth / 2)) {
              newLeft = playerLeft - 50;
              newLeft = Math.max(newLeft, minLeft);
            } else {
              newLeft = playerLeft + 50;
              newLeft = Math.min(newLeft, maxLeft);
            }
            player.style.left = newLeft + "px";
          }
        });
      });
    </script>
  </head>
  <body>
    <span id="player"></span>
  </body>
</html>

※このコードは、ブラウザのエディタにコピー&ペーストして使用することが可能です。