Games that Hikakin will collaborate with us.'s game

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

No:1424

293

←

Prev Next

→

Games that Hikakin will collaborate with us.
Developer User3025｜Date and time 23/6/18 15:31:15
Build time 26.024 sec｜Game capacity 2.567KB｜

Script

「ヒカキンのジャンプ！」というタイトルのゲームを実装しました。以下が実際のプログラムです。

👦 🚧 0

このゲームは、プレイヤーがジャンプして障害物を避けるゲームです。スタートボタンを押すと、障害物が画面内を動きます。プレイヤーは「↑」キーを押すとジャンプし、再度「↑」キーを押すと地面に戻ります。障害物と接触するとゲームオーバーになり、スコアが0に戻ります。スコアは障害物を避けるたびに1点加算されます。

←

Prev　Next

→ 　

Back　

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

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

「ヒカキンのジャンプ！」というタイトルのゲームを実装しました。
以下が実際のプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ヒカキンのジャンプ！</title>
  <style>
    #game-screen {
      height: 500px;
      background-color: #87cefa;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <div id="game-screen">
    <span id="player">👦</span>
    <span id="obstacle">🚧</span>
    <span id="score">0</span>
    <button id="start-button">スタート</button>
  </div>

let score = 0;

startButton.addEventListener('click', function () {
      moveObstacle();
    });

function moveObstacle() {
      let obstaclePosition = 800;
      let playerPosition = 0;

setInterval(function () {
        obstaclePosition -= 10;

if (obstaclePosition < -50) {
          obstaclePosition = 800;
          score++;
          scoreElement.innerHTML = score;
        }

obstacle.style.left = obstaclePosition + 'px';

if (obstaclePosition < 80 && obstaclePosition > 20 && playerPosition === 0) {
          alert('ゲームオーバー！ スコア：' + score);
          score = 0;
          scoreElement.innerHTML = score;
          return;
        }
      }, 50);