abstract strategy game's game

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

No:5528

1969

←

Prev Next

→

abstract strategy game
Developer User3832｜Date and time 23/6/30 12:15:43
Build time 34.154 sec｜Game capacity 4.041KB｜

Script

了解しました。以下にアブストラクトなゲームの実装例を示します。

🟥

この例では、画面上で移動するアブストラクトなキャラクターを操作することができます。画面をタッチして動かすことも、スワイプして動かすこともできます。キャラクターは赤い正方形の絵文字で表示されます。注意：この例は一つの方法であり、他にも色々な方法でアブストラクトなゲームを作ることができます。自由にカスタマイズして、面白いゲームを作ってみてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下にアブストラクトなゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>アブストラクトゲーム</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-size: 3rem;
        }
        #game {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="game">
        🟥
    </div>

// 初期位置
        let positionX = 0;
        let positionY = 0;

// キャラクターの移動
        function moveCharacter(direction) {
            switch (direction) {
                case "up":
                    positionY -= 10;
                    break;
                case "down":
                    positionY += 10;
                    break;
                case "left":
                    positionX -= 10;
                    break;
                case "right":
                    positionX += 10;
                    break;
            }
            updateCharacterPosition();
        }

// キャラクターの位置を更新
        function updateCharacterPosition() {
            gameArea.style.transform = `translate(${positionX}px, ${positionY}px)`;
        }

// スマホタッチ操作の検出
        gameArea.addEventListener("touchmove", function(event) {
            const touch = event.changedTouches[0];
            const touchX = touch.pageX - gameArea.offsetLeft;
            const touchY = touch.pageY - gameArea.offsetTop;
            
            if (touchX < gameArea.clientWidth / 2 && touchY < gameArea.clientHeight / 2) {
                moveCharacter("up");
            } else if (touchX < gameArea.clientWidth / 2 && touchY >= gameArea.clientHeight / 2) {
                moveCharacter("left");
            } else if (touchX >= gameArea.clientWidth / 2 && touchY < gameArea.clientHeight / 2) {
                moveCharacter("right");
            } else if (touchX >= gameArea.clientWidth / 2 && touchY >= gameArea.clientHeight / 2) {
                moveCharacter("down");
            }
        });

// スマホスワイプ操作の検出
        let startX, startY;

gameArea.addEventListener("touchstart", function(event) {
            const touch = event.changedTouches[0];
            startX = touch.pageX;
            startY = touch.pageY;
        });

gameArea.addEventListener("touchend", function(event) {
            const touch = event.changedTouches[0];
            const endX = touch.pageX;
            const endY = touch.pageY;
            const diffX = endX - startX;
            const diffY = endY - startY;

// スワイプの方向を検出
            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (diffX > 0) {
                    moveCharacter("right");
                } else {
                    moveCharacter("left");
                }
            } else {
                if (diffY > 0) {
                    moveCharacter("down");
                } else {
                    moveCharacter("up");
                }
            }
        });
    </script>
</body>
</html>
```

この例では、画面上で移動するアブストラクトなキャラクターを操作することができます。画面をタッチして動かすことも、スワイプして動かすこともできます。キャラクターは赤い正方形の絵文字で表示されます。

注意：この例は一つの方法であり、他にも色々な方法でアブストラクトなゲームを作ることができます。自由にカスタマイズして、面白いゲームを作ってみてください。