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

No:3907

851

←

Prev Next

→

All red!
Developer User3589｜Date and time 23/6/26 22:49:08
Build time 30.166 sec｜Game capacity 2.93KB｜

Script

了解しました。以下、スマホで遊べるシンプルな「ジャンプゲーム」を作成します。

Jump Game

Score: 0

以上のコードをHTMLファイルにコピペして保存し、スマホでブラウザで開けば、ジャンプゲームをプレイできます。スペースキーを押すとプレイヤーがジャンプし、ランダムに出現する障害物を避けて高得点を目指しましょう。失敗するとゲームオーバーになってスコアが表示されます。また、スコアやプレイヤーの見た目はCSSで変更できますので、自分なりにカスタマイズして遊んでみてください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下、スマホで遊べるシンプルな「ジャンプゲーム」を作成します。

<!DOCTYPE html>
<html>
<head>
  <title>Jump Game</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #player {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: yellow;
    }
  </style>
  <script>
    let player = document.getElementById('player');
    let score = 0;
    let gameOver = false;

document.addEventListener('keydown', (event) => {
      if (event.code === 'Space' && !gameOver) {
        jump();
      }
    });

setInterval(() => {
      let obstacle = document.createElement('div');
      obstacle.classList.add('obstacle');
      obstacle.style.left = (window.innerWidth - 50) + 'px';
      obstacle.style.top = Math.floor(Math.random() * (window.innerHeight - 200)) + 'px';
      document.body.appendChild(obstacle);
      if (!gameOver) {
        score++;
        document.getElementById('score').innerHTML = `Score: ${score}`;
      }
      let obstacles = document.querySelectorAll('.obstacle');
      obstacles.forEach((obstacle) => {
        let obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue('left'));
        if (obstacleLeft <= 50 && obstacleLeft >= 0) {
          let obstacleTop = parseInt(window.getComputedStyle(obstacle).getPropertyValue('top'));
          let playerTop = parseInt(window.getComputedStyle(player).getPropertyValue('top'));
          if (playerTop >= obstacleTop && playerTop <= obstacleTop + 50) {
            gameOver = true;
            alert(`Game Over! Score: ${score}`);
          }
        }
        obstacle.style.left = (obstacleLeft - 5) + 'px';
        if (obstacleLeft <= -50) {
          obstacle.parentNode.removeChild(obstacle);
        }
      });
    }, 30);
  </script>
</head>
<body>
  <h1>Jump Game</h1>
  <p id="score">Score: 0</p>
  <div id="player"></div>
</body>
</html>