Natto sticky🥢🫘's game

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

No:7412

2308

←

Prev Next

→

Natto sticky🥢🫘
Developer User4009｜Date and time 23/7/7 15:27:40
Build time 10.923 sec｜Game capacity 2.275KB｜

Script

了解しました。では、以下にスマホで遊べる簡単なゲームを実装してみます。

🥢🧡

このゲームでは、納豆の絵文字をクリックすると、ランダムな位置に移動し、クリックした回数が表示されます。スマホの画面からもはみ出さないようにしています。また、クリックした回数はデータ属性を使って管理しています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。では、以下にスマホで遊べる簡単なゲームを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Natto Game</title>
    <style>
        #natto {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="natto">🥢🧡</div>
    <script>
        // ゲームの主な処理を定義
        function game() {
            var natto = document.getElementById("natto");
            natto.addEventListener("click", function() {
                var currentTop = parseInt(window.getComputedStyle(natto).top);
                var currentLeft = parseInt(window.getComputedStyle(natto).left);

// スマホの画面からはみ出さないようにする
                var maxX = window.innerWidth - natto.offsetWidth;
                var maxY = window.innerHeight - natto.offsetHeight;

// ランダムに次の位置を決める
                var nextTop = Math.floor(Math.random() * maxY);
                var nextLeft = Math.floor(Math.random() * maxX);

// アニメーションで移動させる
                natto.style.transition = "top 1s, left 1s";
                natto.style.top = nextTop + "px";
                natto.style.left = nextLeft + "px";

// クリックされた回数をカウント
                var clickCount = parseInt(natto.getAttribute("data-click-count")) || 0;
                clickCount++;
                natto.setAttribute("data-click-count", clickCount);

// クリックされた回数を表示
                natto.innerText = "🧡 x " + clickCount;
            });
        }

// ゲームの初期化処理
        function init() {
            // ページが読み込まれたらゲームを開始
            window.addEventListener("load", game);
        }

// 初期化処理呼び出し
        init();
    </script>
</body>
</html>
```