arcade game where UFO-like cranes capture stuffed animals, etc.'s game

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

No:9654

←

Prev Next

→

arcade game where UFO-like cranes capture stuffed ..ALL
Developer User4403｜Date and time 23/7/26 18:38:03
Build time 19.389 sec｜Game capacity 2.073KB｜

Script

了解です。以下は、HTMLファイルにJavaScriptを含んだUFOキャッチャーのゲームの実装例です。

このプログラムでは、UFOキャッチャーのゲーム画面を300px × 400pxの枠で作成しています。UFOは100px × 100pxのサイズで表示され、左右に移動します。スマートフォンでの操作を想定しています。 HTMLファイルと同じディレクトリに、`emozi_all/emoji.png`という名前のUFOの画像ファイルを用意してください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解です。以下は、HTMLファイルにJavaScriptを含んだUFOキャッチャーのゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UFOキャッチャー</title>
    <style>
        #container {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
            text-align: center;
        }
        #ufo {
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <img id="ufo" src="ufo_emoji.png" alt="UFO">
    </div>

function moveUFO() {
            const containerWidth = container.offsetWidth - ufo.offsetWidth;
            const currentPosition = ufo.offsetLeft;

if (isMovingLeft && currentPosition > 0) {
                ufo.style.left = currentPosition - 10 + 'px';
            } else if (!isMovingLeft && currentPosition < containerWidth) {
                ufo.style.left = currentPosition + 10 + 'px';
            }

if (currentPosition === 0) {
                isMovingLeft = false;
            } else if (currentPosition === containerWidth) {
                isMovingLeft = true;
            }
        }

// ゲームの実行開始
        setInterval(moveUFO, 100);
    </script>
</body>
</html>
```

このプログラムでは、UFOキャッチャーのゲーム画面を300px × 400pxの枠で作成しています。UFOは100px × 100pxのサイズで表示され、左右に移動します。スマートフォンでの操作を想定しています。

HTMLファイルと同じディレクトリに、`ufo_emoji.png`という名前のUFOの画像ファイルを用意してください。