AI game creator

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

No:7897

130

←

Prev Next

→

rubbernecks
Developer User3788｜Date and time 23/7/10 16:11:18
Build time 16.268 sec｜Game capacity 3.414KB｜

Script

了解です。以下に「ゴム人間」というゲームの部分的なゲーム化を示します。このゲームでは、ゴム人間である主人公をスワイプ操作で動かし、障害物を避けることが目標です。

上記のコードでは、ゴム人間の主人公は黒い円で、ブルーの四角形の障害物を避けることが目標です。スマートフォン上でプレイすることを前提に、スワイプ操作で主人公を上下に移動させることができます。障害物と主人公が衝突すると、ゲームオーバーとなるため、注意して避ける必要があります。

←

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-container {
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: pink;
            touch-action: none;
        }
        #player {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .obstacle {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
        <div class="obstacle" style="left: 200px;"></div>
        <div class="obstacle" style="left: 400px;"></div>
        <div class="obstacle" style="left: 600px;"></div>
    </div>

//スワイプ操作の処理
        var startPos;

gameContainer.addEventListener('touchstart', function (e) {
            startPos = e.changedTouches[0].clientY;
        });

gameContainer.addEventListener('touchmove', function (e) {
            var currentPos = e.changedTouches[0].clientY;
            var deltaY = currentPos - startPos;
            startPos = currentPos;
            var playerTop = getComputedStyle(player).top;
            var playerTopValue = parseInt(playerTop.substring(0, playerTop.length - 2));
            player.style.top = (playerTopValue + deltaY) + 'px';
        });

//ゲームの進行と衝突判定
        function gameLoop() {
            var playerRect = player.getBoundingClientRect();
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                var obstacleRect = obstacle.getBoundingClientRect();
                if (checkCollision(playerRect, obstacleRect)) {
                    clearInterval(gameInterval);
                    alert('ゲームオーバー');
                    break;
                }
            }
        }

gameInterval = setInterval(gameLoop, 10);

//衝突判定
        function checkCollision(rect1, rect2) {
            return !(rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom);
        }

</script>
</body>
</html>
```