移動とジャンプで時間内に塔の最上部まで登る's game

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

No:22337

←

Prev Next

→

移動とジャンプで時間内に塔の最上部まで登る
Developer バファリンヌ｜Date and time 23/10/22 8:45:17
Build time 50.748 sec｜Game capacity 3.12KB｜

Script

了解しました。以下が指示通りに実装されたプログラムです。このHTMLファイルを開いて実行すると、スマホ操作で移動とジャンプができるゲームが遊べます。絵文字も使用しています。

このプログラムは、指定した時間内に塔の最上部まで登るゲームです。左右に移動したり、ジャンプすることで、塔を登っていきます。操作はスマホのタッチ操作に対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>塔登りゲーム</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

#player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      background-color: yellow;
      border-radius: 50%;
    }

#tower {
      position: relative;
      width: 100%;
      height: 2000px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  <div id="tower"></div>

var jumpHeight = 250; // ジャンプの高さ
    var jumpDuration = 1000; // ジャンプにかかる時間（ミリ秒）
    var moveDistance = 50; // 移動する距離

var isJumping = false; // ジャンプ中かどうかのフラグ

function jump() {
      if (isJumping) {
        return;
      }

player.style.bottom = '0px'; // ジャンプが始まる前にプレイヤーの高さをリセット
      isJumping = true;

var start = null;

function step(timestamp) {
        if (!start) {
          start = timestamp;
        }

var progress = timestamp - start;
        var yPos = jumpHeight * ((jumpDuration - progress) / jumpDuration);
        player.style.bottom = yPos + 'px';

if (progress < jumpDuration) {
          window.requestAnimationFrame(step);
        } else {
          player.style.bottom = '0px';
          isJumping = false;
        }
      }

window.requestAnimationFrame(step);
    }

function moveLeft() {
      var currentLeft = parseInt(player.style.left);
      var newLeft = currentLeft - moveDistance;
      player.style.left = Math.max(newLeft, 0) + '%';
    }

function moveRight() {
      var currentLeft = parseInt(player.style.left);
      var newLeft = currentLeft + moveDistance;
      player.style.left = Math.min(newLeft, 100) + '%';
    }

function handleTouchStart(e) {
      if (e.touches.length === 1) {
        var touchX = e.touches[0].clientX;
        var screenCenter = window.innerWidth / 2;

if (touchX < screenCenter) {
          moveLeft();
        } else {
          moveRight();
        }
      }
    }

function handleTouchEnd(e) {
      jump();
    }

document.addEventListener('touchstart', handleTouchStart);
    document.addEventListener('touchend', handleTouchEnd);
  </script>
</body>
</html>
```