みそきん売り切れでブチギレるゲーム

みそきんが売り切れたので、怒りが爆発してしまいました。あなたは売り切れたみそきんを探し出すために、市内を駆け巡ることになりました。

左右に移動して、かつてないほどの怒りを発揮しましょう！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>みそきん売り切れでブチギレるゲーム</title>
  </head>
  <body>
    <h1>みそきん売り切れでブチギレるゲーム</h1>
    <p>みそきんが売り切れたので、怒りが爆発してしまいました。あなたは売り切れたみそきんを探し出すために、市内を駆け巡ることになりました。</p>
    <p>左右に移動して、かつてないほどの怒りを発揮しましょう！</p>
    <div id="game-container">
      <div id="player"></div>
    </div>
    
    <script>
      let player = document.getElementById("player");
      let container = document.getElementById("game-container");
      let isGameOver = false;
      let score = 0;
      
      function moveLeft() {
        let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
        if (left > 0 && !isGameOver) {
          player.style.left = left - 10 + "px";
        }
      }
      
      function moveRight() {
        let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
        if (left < container.offsetWidth - player.offsetWidth && !isGameOver) {
          player.style.left = left + 10 + "px";
        }
      }
      
      document.addEventListener("keydown", event => {
        if (event.key === "ArrowLeft") {
          moveLeft();
        } else if (event.key === "ArrowRight") {
          moveRight();
        }
      });
      
      setInterval(() => {
        let obstacles = document.getElementsByClassName("obstacle");
        
        if (obstacles.length > 0) {
          let topObstacle = obstacles[0];
          
          let topObstacleTop = 
            parseInt(window.getComputedStyle(topObstacle).getPropertyValue("top"));
          let topObstacleLeft = 
            parseInt(window.getComputedStyle(topObstacle).getPropertyValue("left"));
          
          if (topObstacleTop > container.offsetHeight - 50 &&
              topObstacleTop < container.offsetHeight - 40 &&
              parseInt(player.style.left) == topObstacleLeft) {
            topObstacle.remove();
            score++;
          } else if (topObstacleTop > container.offsetHeight) {
            topObstacle.remove();
          }
        }
        
        let obstacle = document.createElement("div");
        obstacle.classList.add("obstacle");
        obstacle.style.left = Math.floor(Math.random() * container.offsetWidth) + "px";
        container.appendChild(obstacle);
        
        if (score > 10) {
          isGameOver = true;
          alert("おめでとう！みそきんを見つけたぞ！");
        }
      }, 1000);
    </script>
    
    <style>
      body {
        background-color: yellow;
        text-align: center;
        font-size: 24px;
      }
      
      #game-container {
        position: relative;
        height: 400px;
        width: 100%;
        border: 1px solid black;
      }
      
      #player {
        position: absolute;
        bottom: 0;
        height: 50px;
        width: 50px;
        background-color: red;
      }
      
      .obstacle {
        position: absolute;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: green;
      }
    </style>
  </body>
</html>