All JS tween animations's game

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

No:5628

1515

←

Prev Next

→

All JS tween animations
Developer User3832｜Date and time 23/6/30 14:36:02
Build time 23.983 sec｜Game capacity 2.175KB｜

Script

了解しました。以下に、スマートフォンで遊べるゲームの例を示します。このゲームは、JavaScriptのTweenアニメーションを使用して実装されています。

🎯

これは、ターゲットをクリックするとランダムな位置に動かすゲームです。TweenMaxというTweenアニメーションのライブラリを使用しています。ターゲット要素には絵文字の"🎯"を使っています。ゲームがスマートフォンで動作するように、ターゲットをクリックするとアニメーションがリスタートします。上記のコードを1枚のHTMLファイルに保存し、ウェブブラウザで開くとゲームがプレイできます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #target {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <div id="target">🎯</div>

// ターゲットをランダムな位置に移動させるTweenアニメーションを作成
      const tween = gsap.to(target, { 
        duration: 2, 
        x: (Math.random() * window.innerWidth) * 0.5, 
        y: (Math.random() * window.innerHeight) * 0.5, 
        repeat: -1 
      });

// クリック時にターゲットの位置をリセットするイベントリスナを追加
      target.addEventListener('click', function() {
        tween.restart();
      });
    });

// scriptタグを生成して外部スクリプトを読み込む関数
    function script_tag(src, callback) {
      const script = document.createElement('script');
      script.src = src;
      script.onload = callback;
      document.head.appendChild(script);
    }
  </script>
</body>
</html>
```

これは、ターゲットをクリックするとランダムな位置に動かすゲームです。TweenMaxというTweenアニメーションのライブラリを使用しています。ターゲット要素には絵文字の"🎯"を使っています。ゲームがスマートフォンで動作するように、ターゲットをクリックするとアニメーションがリスタートします。

上記のコードを1枚のHTMLファイルに保存し、ウェブブラウザで開くとゲームがプレイできます。