AI game creator

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

No:22827

←

Prev Next

→

イライラ棒
Developer バファリンヌ｜Date and time 23/10/25 19:59:37
Build time 56.323 sec｜Game capacity 2.902KB｜

Script

了解です。以下に指示通りの要件を満たすプログラムを示します。これはイライラ棒というゲームの実装です。

このプログラムでは、HTML要素を使ってイライラ棒のゲーム画面を作成しています。JavaScriptコードにより、ユーザーがマウスまたはタッチデバイスを使ってボールを動かすことができます。ボールを掴んでドラッグすることで、イライラ棒の上を動かすことができます。ゲーム画面はスマートフォンでも操作可能で、絵文字を用いたデザインを採用しています。

←

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 {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #bar {
      width: 300px;
      height: 30px;
      background-color: #97CBFF;
      position: relative;
    }
    
    #ball {
      width: 30px;
      height: 30px;
      background-color: #FF677D;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="bar">
    <div id="ball"></div>
  </div>

let isDragging = false;
    let startOffsetX = 0;

ball.addEventListener("mousedown", startDrag);
    ball.addEventListener("touchstart", startDrag);

function startDrag(event) {
      isDragging = true;

if (event.type === "mousedown") {
        startOffsetX = event.clientX - ball.offsetLeft;
      } else if (event.type === "touchstart") {
        startOffsetX = event.touches[0].clientX - ball.offsetLeft;
      }

document.addEventListener("mousemove", drag);
      document.addEventListener("touchmove", drag);
      document.addEventListener("mouseup", endDrag);
      document.addEventListener("touchend", endDrag);
    }

function drag(event) {
      if (!isDragging) {
        return;
      }

event.preventDefault();

let currentX = 0;

if (event.type === "mousemove") {
        currentX = event.clientX;
      } else if (event.type === "touchmove") {
        currentX = event.touches[0].clientX;
      }

let barWidth = bar.offsetWidth;
      let ballWidth = ball.offsetWidth;
      let maxMoveX = barWidth - ballWidth;

let moveX = currentX - bar.offsetLeft - startOffsetX;
      moveX = Math.min(Math.max(moveX, 0), maxMoveX);
      ball.style.left = moveX + "px";
    }

function endDrag() {
      isDragging = false;

document.removeEventListener("mousemove", drag);
      document.removeEventListener("touchmove", drag);
      document.removeEventListener("mouseup", endDrag);
      document.removeEventListener("touchend", endDrag);
    }
  </script>
</body>
</html>
```

このプログラムでは、HTML要素を使ってイライラ棒のゲーム画面を作成しています。JavaScriptコードにより、ユーザーがマウスまたはタッチデバイスを使ってボールを動かすことができます。

ボールを掴んでドラッグすることで、イライラ棒の上を動かすことができます。ゲーム画面はスマートフォンでも操作可能で、絵文字を用いたデザインを採用しています。