AI game creator

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

No:140

282

←

Prev Next

→

Racing Games
Developer ひさひさ｜Date and time 23/5/26 3:23:56
Build time 101.132 sec｜Game capacity 2.603KB｜

Script

レースゲームのゲームで、スタートボタンをクリックすると、車が動き始め、ゴールまで走ることが目的です。リセットボタンをクリックすると、ゲームを初めからやり直すことができます。スマホで操作できるように、縦画面での操作を想定しています。絵文字を多めに使って、可愛い雰囲気を出しています。また、imgタグのwidthやheightを省略し、レスポンシブデザインに対応するように設定しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>レースゲーム</title>
    <style>
      #car {
        position: relative;
        left: 0;
      }
      .track {
        margin-top: 10px;
        width: 90vw;
        height: 100px;
        border: 1px solid black;
        position: relative;
      }
      .finish-line {
        width: 10px;
        height: 100%;
        background-color: black;
        position: absolute;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="track">
      <div class="finish-line"></div>
      <img id="car" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/google/263/racing-car_1f3ce.png" height="50">
    </div>
    <button id="start-btn">スタート！</button>
    <button id="reset-btn">リセット</button>
    <script>
      const car = document.getElementById("car");
      const startBtn = document.getElementById("start-btn");
      const resetBtn = document.getElementById("reset-btn");
      let carPosition = 0;
      let isRunning = false;
      const trackWidth = document.querySelector(".track").offsetWidth;
      
      function moveCar() {
        if (isRunning) {
          carPosition += 10;
          car.style.left = carPosition + "px";
          checkWin();
        }
      }
      
      function checkWin() {
        if (carPosition >= trackWidth) {
          alert("ゴール！おめでとう！");
          isRunning = false;
        }
      }
      
      function startGame() {
        isRunning = true;
        const timer = setInterval(moveCar, 100);
        startBtn.disabled = true;
        resetBtn.disabled = false;
      }
      
      function resetGame() {
        clearInterval(timer);
        isRunning = false;
        carPosition = 0;
        car.style.left = 0;
        startBtn.disabled = false;
        resetBtn.disabled = true;
      }
      
      startBtn.addEventListener("click", startGame);
      resetBtn.addEventListener("click", resetGame);
    </script>
  </body>
</html>