Climbing mountains in an open world's game

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

No:2017

4106

←

Prev Next

→

Climbing mountains in an open world
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 3094 sec｜Game capacity 3.247KB｜

Script

アプリ名：山登りゲーム概要：プレイヤーは山登りをするキャラクターを操作し、オープンワールドで山を自由に登り下りします。山の中には様々なアイテムが隠されており、見つけることでポイントを獲得できます。実装：以下が実際のプログラムです。HTMLファイルは1枚で、JavaScriptを含んでいます。

🧗

操作方法：スマホでプレイする場合、画面をタップして上下左右に移動させます。以上が「山登りゲーム」の実装となります。

←

Prev　Next

→ 　

Back　

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

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

アプリ名：山登りゲーム
概要：プレイヤーは山登りをするキャラクターを操作し、オープンワールドで山を自由に登り下りします。山の中には様々なアイテムが隠されており、見つけることでポイントを獲得できます。

実装：以下が実際のプログラムです。HTMLファイルは1枚で、JavaScriptを含んでいます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>山登りゲーム</title>
    <style>
      #game {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #9acd32;
      }
      #player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
      }
      .item {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #fff;
        font-size: 25px;
        text-align: center;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="player">🧗</div>
    </div>
    <script>
      let player = document.getElementById("player");
      let game = document.getElementById("game");
      let score = 0;
      
      // プレイヤーの移動
      document.body.addEventListener("keydown", function(event) {
        if(event.key === "ArrowUp") {
          player.style.top = parseInt(player.style.top) - 10 + "px";
        } else if (event.key === "ArrowDown") {
          player.style.top = parseInt(player.style.top) + 10 + "px";
        } else if (event.key === "ArrowLeft") {
          player.style.left = parseInt(player.style.left) - 10 + "px";
        } else if (event.key === "ArrowRight") {
          player.style.left = parseInt(player.style.left) + 10 + "px";
        }
        
        // アイテム取得
        let items = document.getElementsByClassName("item");
        for(let i = 0; i< items.length; i++) {
          let item = items[i];
          if(isOverlap(player, item)) {
            score++;
            item.remove();
            alert("アイテムをGET！ 現在のスコア：" + score);
          }
        }
      });
      
      // アイテムの生成
      setInterval(function() {
        let item = document.createElement("div");
        item.classList.add("item");
        item.style.top = Math.random() * 80 + "%";
        item.style.left = Math.random() * 80 + "%";
        game.appendChild(item);
      }, 3000);
      
      // 二つの要素が重なっているかどうか
      function isOverlap(element1, element2) {
        let rect1 = element1.getBoundingClientRect();
        let rect2 = element2.getBoundingClientRect();
        return !(rect1.right < rect2.left || rect2.right < rect1.left || rect1.bottom < rect2.top || rect2.bottom < rect1.top);
      }
        player.style.top = 0;
        player.style.left = 0;
    </script>
  </body>
</html>

操作方法：スマホでプレイする場合、画面をタップして上下左右に移動させます。

以上が「山登りゲーム」の実装となります。