AI game creator

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

No:6839

←

Prev Next

→

ice climber
Developer User3932｜Date and time 23/7/3 23:29:11
Build time 27.803 sec｜Game capacity 2.471KB｜

Script

了解しました。では、「アイスクライマー」というゲームを作成してみます。以下が実装例です:

🧗

このプログラムでは、「アイスクライマー」というゲームがプレイできるようになっています。画面をタップするとプレイヤーがジャンプし、障害物を避けながら進むことが目標です。障害物に触れるとゲームオーバーになります。ただし、入力方法はスマホのタッチ操作を前提としているため、PCでの動作は保証できません。また、絵文字の表示はブラウザやOSによって異なる場合があるため、うまく表示されないかもしれません。ご了承ください。

←

Prev　Next

→ 　

Back　

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

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

了解しました。では、「アイスクライマー」というゲームを作成してみます。

以下が実装例です:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>アイスクライマー</title>
  <style>
    #player {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
    }
    #obstacle {
      position: absolute;
      bottom: 100px;
      left: 0;
      width: 100px;
      height: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <script>
    var player = document.getElementById("player");
    var obstacle = document.getElementById("obstacle");

var interval;

document.addEventListener('touchstart', function(event) {
      jumpPlayer();
    });

interval = setInterval(moveObstacle, 10);

function jumpPlayer() {
      var playerBottom = parseInt(window.getComputedStyle(player).getPropertyValue("bottom"));
      player.style.bottom = playerBottom + 100 + "px";

setTimeout(function() {
        player.style.bottom = playerBottom + "px";
      }, 300);
    }

function moveObstacle() {
      var obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));
      obstacle.style.left = obstacleLeft + 1 + "px";

if (obstacleLeft > window.innerWidth) {
        obstacle.style.left = -100 + "px";
      }

var playerBottom = parseInt(window.getComputedStyle(player).getPropertyValue("bottom"));
      var obstacleTop = parseInt(window.getComputedStyle(obstacle).getPropertyValue("top"));

if (obstacleLeft > 45 && obstacleLeft < 145 && playerBottom < obstacleTop + 50) {
        clearInterval(interval);
        alert("ゲームオーバー！");
      }
    }
  </script>

<div id="player">🧗</div>
  <div id="obstacle"></div>
</body>
</html>
```

このプログラムでは、「アイスクライマー」というゲームがプレイできるようになっています。画面をタップするとプレイヤーがジャンプし、障害物を避けながら進むことが目標です。障害物に触れるとゲームオーバーになります。

ただし、入力方法はスマホのタッチ操作を前提としているため、PCでの動作は保証できません。また、絵文字の表示はブラウザやOSによって異なる場合があるため、うまく表示されないかもしれません。ご了承ください。