AI game creator

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

No:6132

1995

←

Prev Next

→

(mobile) crane
Developer User3860｜Date and time 23/7/1 17:12:36
Build time 28.511 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>
```

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