Lots of lightsabers big rotation's game | AI game creator

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

No:9414

131

Lots of lightsabers big rotation
Developer anonymous｜Date and time 23/7/24 17:02:23
Build time 24.857 sec｜Game capacity 2.743KB｜

了解です。以下にたくさんのライトセーバー大回転というゲームの実装例を示します。

⎯⎯∈ ⎯⎯∋ ⎯⎯∈ ⎯⎯∋ ⎯⎯∈ ⎯⎯∋ ⎯⎯∈ ⎯⎯∋

このゲームでは、画面上に表示されているライトセーバーをクリックすると、ライトセーバーがランダムな角度と色に回転します。背景色は黒(#111)に設定されており、固定されているライトセーバーアイコンがランダムな角度と色に回転する様子を楽しむことができます。スクリプト部分では、`querySelectorAll`メソッドを使用して`lightsaber`クラスを持つ全ての要素を取得し、ループを使って各ライトセーバーにランダムな角度と色を適用する処理が行われています。また、`addEventListener`メソッドを使ってクリックイベントが発生した時にも同じ処理が実行され、クリックするたびにライトセーバーが回転し色が変わる仕様になっています。モバイルデバイスでプレイする場合、画面上のライトセーバーをタップすることでゲームを楽しむことができます。

→ 　

1　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

了解です。以下にたくさんのライトセーバー大回転というゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>たくさんのライトセーバー大回転</title>
    <style>
        body {
            background-color: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .lightsaber {
            font-size: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<script>
    var body = document.querySelector('body');
    var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#f0f0f0', '#333333'];

function rotateLightsabers() {
        var lightsabers = document.querySelectorAll('.lightsaber');
        for (var i = 0; i < lightsabers.length; i++) {
            var rotateDeg = Math.floor(Math.random() * 361);
            var colorIndex = Math.floor(Math.random() * colors.length);
            lightsabers[i].style.transform = 'rotate(' + rotateDeg + 'deg)';
            lightsabers[i].style.color = colors[colorIndex];
        }
    }

body.addEventListener('click', rotateLightsabers);

rotateLightsabers();
</script>

<span class="lightsaber">⎯⎯∈</span>
<span class="lightsaber">⎯⎯∋</span>
<span class="lightsaber">⎯⎯∈</span>
<span class="lightsaber">⎯⎯∋</span>
<span class="lightsaber">⎯⎯∈</span>
<span class="lightsaber">⎯⎯∋</span>
<span class="lightsaber">⎯⎯∈</span>
<span class="lightsaber">⎯⎯∋</span>

</body>
</html>
```

このゲームでは、画面上に表示されているライトセーバーをクリックすると、ライトセーバーがランダムな角度と色に回転します。背景色は黒(#111)に設定されており、固定されているライトセーバーアイコンがランダムな角度と色に回転する様子を楽しむことができます。

スクリプト部分では、`querySelectorAll`メソッドを使用して`lightsaber`クラスを持つ全ての要素を取得し、ループを使って各ライトセーバーにランダムな角度と色を適用する処理が行われています。また、`addEventListener`メソッドを使ってクリックイベントが発生した時にも同じ処理が実行され、クリックするたびにライトセーバーが回転し色が変わる仕様になっています。

モバイルデバイスでプレイする場合、画面上のライトセーバーをタップすることでゲームを楽しむことができます。