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

No:7695

2417

←

Prev Next

→

sliding door
Developer o2pi4｜Date and time 23/7/9 13:20:17
Build time 9.154 sec｜Game capacity 2.082KB｜

Script

了解です。以下に、スライドドアのゲームを作成するプログラム例を示します。

スライドドアゲーム

このプログラムでは、黄色の背景の中に緑色のスライドドアがあります。スマホで画面をスワイプすることでスライドドアを左右に移動させることができます。スライドドアが左端（-200px）まで移動するとゴールとなり、アラートが表示されます。

←

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>
</head>
<body>
  <h1>スライドドアゲーム</h1>
  <div id="container" style="width: 400px; height: 200px; background-color: yellow;">
    <div id="door" style="width: 200px; height: 200px; background-color: green; position: relative; left: 0;"></div>
  </div>

// スライドドアの移動処理
    function moveDoor(direction) {
      if (direction === 'left') {
        position -= 10;
        if (position < -200) {
          position = -200;
        }
      } else if (direction === 'right') {
        position += 10;
        if (position > 0) {
          position = 0;
        }
      }

const door = document.getElementById('door');
      door.style.left = position + 'px';

// ゴール判定
      if (position === -200) {
        alert('ゴールしました！おめでとう！');
      }
    }

// スマホのスワイプ操作でスライドドアを移動
    let touchStartX = 0;
    let touchEndX = 0;

document.addEventListener('touchstart', function(event) {
      touchStartX = event.touches[0].clientX;
    });

document.addEventListener('touchend', function(event) {
      touchEndX = event.changedTouches[0].clientX;

const threshold = 50; // スワイプと判断するしきい値
      const direction = (touchEndX - touchStartX > 0) ? 'right' : 'left';

if (Math.abs(touchEndX - touchStartX) > threshold) {
        moveDoor(direction);
      }
    });
  </script>
</body>
</html>
```