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

No:20430

←

Prev Next

→

つり革
Developer User9047｜Date and time 23/10/9 19:48:17
Build time 17.939 sec｜Game capacity 2.792KB｜

Script

つり革ゲーム

スコア: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>つり革ゲーム</title>
</head>
<body>
  <h1>つり革ゲーム</h1>
  <h2 id="score">スコア: 0</h2>
  <div id="train"></div>
  <script>
    let score = 0;
    
    const train = document.getElementById("train");
    
    function moveTrainLeft() {
      const left = parseInt(train.style.left) || 0;
      train.style.left = left - 10 + "px";
    }
    
    function moveTrainRight() {
      const left = parseInt(train.style.left) || 0;
      train.style.left = left + 10 + "px";
    }
    
    function updateScore() {
      document.getElementById("score").textContent = "スコア: " + score;
    }
    
    function increaseScore() {
      score++;
      updateScore();
    }
    
    function createHandle() {
      const handle = document.createElement("div");
      handle.classList.add("handle");
      handle.textContent = "🚃";
      
      handle.addEventListener("touchstart", function() {
        handle.style.backgroundColor = "red";
        increaseScore();
        setTimeout(function() {
          handle.style.backgroundColor = "white";
        }, 100);
      });
      
      return handle;
    }
    
    function createHandles() {
      const handles = [];
      
      for (let i = 0; i < 4; i++) {
        const handle = createHandle();
        handle.style.top = "0px";
        handle.style.left = i * 80 + "px";
        handles.push(handle);
        train.appendChild(handle);
      }
      
      return handles;
    }
    
    document.addEventListener("DOMContentLoaded", function() {
      createHandles();
      
      document.addEventListener("touchstart", function(event) {
        const touchX = event.touches[0].clientX;
        
        document.addEventListener("touchmove", function move(event) {
          const newTouchX = event.touches[0].clientX;
          const diffX = newTouchX - touchX;
          
          if (Math.abs(diffX) > 10) {
            if (diffX < 0) {
              moveTrainLeft();
            } else {
              moveTrainRight();
            }
            
            touchX = newTouchX;
          }
          
          requestAnimationFrame(move);
        });
        
        document.addEventListener("touchend", function() {
          document.removeEventListener("touchmove", move);
        });
        
        event.preventDefault();
      });
    });
  </script>