Move the spinning chupacabra's game

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

No:9127

136

←

Prev Next

→

Move the spinning chupacabra
Developer User4246｜Date and time 23/7/21 15:42:22
Build time 18.644 sec｜Game capacity 1.746KB｜

Script

以下は、回転するチュパカブラを動かすシンプルなゲームの実装例です。

🐐

このプログラムでは、スマートフォンの傾きに応じてチュパカブラの絵文字が回転します。スマートフォンを傾けると、チュパカブラも回転するので、部分的なゲーム性があります。ただし、このプログラムではスマホの傾きイベントのみを利用しているため、タッチ操作などは含まれていません。

←

Prev　Next

→ 　

Back　

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

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

以下は、回転するチュパカブラを動かすシンプルなゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>回転するチュパカブラ</title>
    <style>
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }
        #chupacabra {
            font-size: 100px;
            animation: rotate 1.5s linear infinite;
        }

@keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <span id="chupacabra">🐐</span>
    </div>

gamma*=20;

//console.warn("gamma="+gamma);

// チュパカブラ要素の回転を反映
            var chupacabra = document.getElementById('chupacabra');
            chupacabra.style.transform = `rotate(${gamma}deg)`;
        });
    </script>
</body>
</html>
```