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

No:1790

2919

←

Prev Next

→

A game where you can become a celestial being.
Developer User3025｜Date and time 23/6/19 1:34:29
Build time 54.701 sec｜Game capacity 4.649KB｜

Script

天上人になろう！

このゲームでは、天上人になるための試練をクリアしていきます。クリアした試練ごとに、あなたの天上人レベルが上がっていきます。最高レベルになれば、あなたも天上人です！

試練１：空を飛ぶ！

スペースキーを押しながら、進んでいる障害物を避けて空を飛び続けましょう！飛び続けられる時間が長いほど、高いスコアが獲得できます。

試練２：雲をかける！

左右の矢印キーを使って、雲の上を走破してください！うまく乗り切った雲の長さがスコアに反映されます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天上人ゲーム</title>
    <style>
      body {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <h1>天上人になろう！</h1>
    <p>
      このゲームでは、天上人になるための試練をクリアしていきます。
      クリアした試練ごとに、あなたの天上人レベルが上がっていきます。最高レベルになれば、あなたも天上人です！
    </p>
    <hr />
    <h2>試練１：空を飛ぶ！</h2>
    <p>
      スペースキーを押しながら、進んでいる障害物を避けて空を飛び続けましょう！
      飛び続けられる時間が長いほど、高いスコアが獲得できます。
    </p>
    <canvas id="gameCanvas" width="300" height="200"></canvas>
    <hr />
    <h2>試練２：雲をかける！</h2>
    <p>
      左右の矢印キーを使って、雲の上を走破してください！
      うまく乗り切った雲の長さがスコアに反映されます。
    </p>
    <canvas id="gameCanvas2" width="300" height="200"></canvas>
    <script>
      // 試練１：空を飛ぶ
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

let x = 150;
      let y = 100;
      let dx = 0.25;
      let dy = -4;
      let score = 0;

function drawPlayer() {
        ctx.fillStyle = "orange";
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2 * Math.PI);
        ctx.fill();
      }

function drawObstacle() {
        ctx.fillStyle = "gray";
        ctx.fillRect(0, 150, 300, 50);
      }

function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

function drawScore() {
        ctx.fillStyle = "white";
        ctx.font = "16px Arial";
        ctx.fillText("Score: " + score, 10, 20);
      }

function update() {
        clearCanvas();
        drawPlayer();
        drawObstacle();
        drawScore();

if (y < 10 || y > 140) {
          // ゲームオーバー
          alert("ゲームオーバー！最終スコアは" + score + "でした。");
          score = 0;
        } else if (x > 290) {
          // クリア！
          alert("クリア！次の試練に進みます。");
          score += 100;
          // 試練２に進む
          document.location.href = "#gameCanvas2";
        } else {
          x += dx;
          y += dy;
          score += 1;
        }
      }

document.addEventListener("keypress", function (event) {
        if (event.keyCode == 32) {
          // スペースキーを押したらジャンプ
          dy = -4;
        }
      });

setInterval(update, 50);

// 試練２：雲をかける
      const canvas2 = document.getElementById("gameCanvas2");
      const ctx2 = canvas2.getContext("2d");

let cloudPos = 0;
      let score2 = 0;

function drawPlayer2() {
        ctx2.fillStyle = "orange";
        ctx2.beginPath();
        ctx2.arc(150, 100, 10, 0, 2 * Math.PI);
        ctx2.fill();
      }

function drawCloud() {
        ctx2.fillStyle = "white";
        ctx2.fillRect(cloudPos, 80, 80, 20);
      }

function clearCanvas2() {
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
      }

function drawScore2() {
        ctx2.fillStyle = "white";
        ctx2.font = "16px Arial";
        ctx2.fillText("Score: " + score2, 10, 20);
      }

function update2() {
        clearCanvas2();
        drawPlayer2();
        drawCloud();
        drawScore2();

if (cloudPos > 220) {
          // クリア！
          alert(
            "すごい！雲の上を走り切ってクリアしました！あなたは天上人です！"
          );
          score2 = 0;
          cloudPos = 0;
          // 一番上に戻る
          document.location.href = "#";
        } else {
          if (cloudPos == 150) {
            score2 += 50;
            // 音を鳴らす
            var audio = new Audio("success.mp3");
            audio.play();
          }
          cloudPos += 1;
        }
      }

setInterval(update2, 50);
    </script>
  </body>
</html>