catcher with outstretched arms's game

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

No:7711

2026

←

Prev Next

→

catcher with outstretched arms
Developer o2pi4｜Date and time 23/7/9 13:47:32
Build time 7.457 sec｜Game capacity 1.88KB｜

Script

以下は、スマホで遊ぶことができる「腕を伸ばしキャッチャー」という簡単なゲームの実装例です。

☜

このゲームは、スマホの画面上に表示される「☜」という絵文字の部分に触れると腕が伸びるようになります。指を離すと腕が元に戻ります。この実装では、HTMLの要素をJavaScriptで操作して、指の動きに応じて腕の状態を変化させています。CSSの`transform`プロパティを使用することで、腕が伸びるアニメーションを実現しています。なお、このゲームはタッチイベントを使用しているため、スマートフォン上でのみプレイすることができます。

←

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>
      #game {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 5em;
      }
    </style>
  </head>
  <body>
    <div id="game">
      ☜
    </div>
    <script>
      const gameElement = document.getElementById('game');

gameElement.addEventListener('touchstart', extendArm);
      gameElement.addEventListener('touchmove', extendArm);
      gameElement.addEventListener('touchend', retractArm);

let extending = false;

function extendArm() {
        extending = true;
        gameElement.textContent = '☝️';
      }

function retractArm() {
        extending = false;
        gameElement.textContent = '☜';
      }

setInterval(moveArm, 100);

function moveArm() {
        if (extending) {
          gameElement.style.transform = 'rotate(45deg)';
        } else {
          gameElement.style.transform = 'none';
        }
      }
    </script>
  </body>
</html>
```

このゲームは、スマホの画面上に表示される「☜」という絵文字の部分に触れると腕が伸びるようになります。指を離すと腕が元に戻ります。

この実装では、HTMLの要素をJavaScriptで操作して、指の動きに応じて腕の状態を変化させています。CSSの`transform`プロパティを使用することで、腕が伸びるアニメーションを実現しています。

なお、このゲームはタッチイベントを使用しているため、スマートフォン上でのみプレイすることができます。