AI game creator

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

No:7238

1054

←

Prev Next

→

strandbeast
Developer User3992｜Date and time 23/7/6 14:44:49
Build time 19.545 sec｜Game capacity 3.442KB｜

Script

了解です。以下が要件を満たす「ストランドビースト」という単純なゲームのプログラムです。このゲームでは、スマホのタッチイベントを利用して画面内のモンスターを移動させることを目的とします。

👹 👺 👻

以上のコードをHTMLファイルに保存し、ウェブブラウザで開くことで「ストランドビースト」としてのゲームをプレイすることができます。ゲームはモンスターが一番近い位置に移動するようにタッチ操作をすることで進行します。モンスターは絵文字で表現されており、初期位置はランダムになっています。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ストランドビースト</title>
    <style>
        #game-board {
            width: 300px;
            height: 400px;
            background-color: lightgray;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .monster {
            font-size: 40px;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <span class="monster" id="monster1">👹</span>
        <span class="monster" id="monster2">👺</span>
        <span class="monster" id="monster3">👻</span>
    </div>
    
    <script>
        window.addEventListener("load", function() {
            var gameBoard = document.getElementById("game-board");
            var monsters = document.getElementsByClassName("monster");
            
            // モンスターの初期位置をランダムに設定
            for (var i = 0; i < monsters.length; i++) {
                var monster = monsters[i];
                var xPos = Math.floor(Math.random() * (gameBoard.offsetWidth - monster.offsetWidth));
                var yPos = Math.floor(Math.random() * (gameBoard.offsetHeight - monster.offsetHeight));
                monster.style.left = xPos + "px";
                monster.style.top = yPos + "px";
            }
            
            // タッチイベントリスナーを追加
            gameBoard.addEventListener("touchstart", function(event) {
                var touch = event.changedTouches[0];
                var x = touch.pageX - gameBoard.offsetLeft;
                var y = touch.pageY - gameBoard.offsetTop;
                
                // タッチした位置に一番近いモンスターを移動
                var closestMonster = null;
                var closestDistance = Infinity;
                for (var i = 0; i < monsters.length; i++) {
                    var monster = monsters[i];
                    var xPos = parseInt(monster.style.left);
                    var yPos = parseInt(monster.style.top);
                    var distance = Math.sqrt(Math.pow(x - xPos, 2) + Math.pow(y - yPos, 2));
                    if (distance < closestDistance) {
                        closestDistance = distance;
                        closestMonster = monster;
                    }
                }
                
                // 移動させる
                closestMonster.style.left = x - closestMonster.offsetWidth / 2 + "px";
                closestMonster.style.top = y - closestMonster.offsetHeight / 2 + "px";
                
                event.preventDefault();
            });
        });
    </script>
</body>
</html>
```