AI game creator

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

No:6132

3220

←

Prev Next

→

(mobile) crane
Developer anonymous｜Date and time 70/1/1 9:43:30
Build time unknown sec｜Game capacity 2.61KB｜

Script

以下は、クレーン車を操作してブロックを持ち上げるシンプルなブロック積みゲームの実装例です。ゲームはスマートフォン上で操作されることを前提としています。

このプログラムは、クレーン車がマウスの位置に移動し、ブロックをクリックするとブロックを持ち上げるというシンプルなゲームです。

←

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>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#game {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
    }

#crane {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 6em;
      height: 4em;
      background-color: #ff0000;
      transform: translateX(-50%);
      transition: 0.2s;
    }

#block {
      position: absolute;
      bottom: 4em;
      left: calc(50% - 2em);
      width: 4em;
      height: 4em;
      background-color: #0000ff;
      cursor: pointer;
      transition: 0.2s;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="crane"></div>
    <div id="block"></div>
  </div>

// ブロックの位置
    var blockPosition = 0;

// ブロックを持ち上げているかどうかのフラグ
    var blockHolding = false;

// ゲームエリア要素の取得
    var game = document.getElementById('game');

// クレーン車要素の取得
    var crane = document.getElementById('crane');

// ブロック要素の取得
    var block = document.getElementById('block');

// クレーン車の操作
    game.addEventListener('mousemove', function(event) {
      if (!blockHolding) {
        // クレーン車を移動
        cranePosition = (event.clientX / window.innerWidth) * 100;
        crane.style.left = cranePosition + '%';
      }
    });

// ブロックのクリックイベント
    block.addEventListener('click', function() {
      if (!blockHolding) {
        // ブロックを持ち上げる
        blockHolding = true;
        blockPosition = 4;
        block.style.bottom = blockPosition + 'em';
      } else {
        // ブロックを落とす
        blockHolding = false;
        blockPosition = 0;
        block.style.bottom = blockPosition + 'em';
      }
    });
  </script>
</body>
</html>
```

このプログラムは、クレーン車がマウスの位置に移動し、ブロックをクリックするとブロックを持ち上げるというシンプルなゲームです。