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

No:4447

1413

←

Prev Next

→

featurality
Developer User1006｜Date and time 23/6/28 1:13:00
Build time 28.391 sec｜Game capacity 2.473KB｜

Script

ロケットジャンプというゲームを作りました。スマホでも遊べるようにしています。以下がコードになります。

🚀

ゲームのルールは、スマホ画面をタップしてロケットを上げることで、障害物を避けながらできるだけ長く飛び続けることです。画面にはロケット、燃料ゲージ、スコアが表示されます。燃料がなくなるとゲームオーバーになります。

←

Prev　Next

→ 　

Back　

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

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>
    #rocket {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 50px;
    }
  </style>
</head>

let rocketY = 450;
    let rocketDY = 0;
    let rocketAccel = 0.2;
    let fuel = 100;
    let score = 0;

function drawBackground() {
      ctx.fillStyle = '#222';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

function drawRocket() {
      ctx.fillStyle = '#fff';
      ctx.fillRect(canvas.width / 2 - 25, rocketY - 50, 50, 50);
    }

function handleTouchStart(e) {
      e.preventDefault();
      if (fuel > 0) {
        rocketDY = -5;
        fuel -= 10;
      }
    }

function drawFuel() {
      ctx.fillStyle = 'gold';
      ctx.fillRect(canvas.width - 100, 20, fuel, 20);
      ctx.strokeStyle = '#000';
      ctx.strokeRect(canvas.width - 100, 20, 100, 20);
    }

function drawScore() {
      ctx.fillStyle = '#fff';
      ctx.font = '30px Arial';
      ctx.fillText('Score: ' + score, 10, 40);
    }

function animate(timestamp) {
      drawBackground();
      drawRocket();
      updateRocket();
      drawFuel();
      drawScore();
      score += 1;
      if (fuel <= 0) {
        alert('Game over! Your score: ' + score);
        location.reload();
      }
      requestAnimationFrame(animate);
    }

animate();

canvas.addEventListener('touchstart', handleTouchStart, false);
  </script>
</body>

</html>