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

No:5471

1167

←

Prev Next

→

Spider making a 🕷🕸 geometric shape of a nest
Developer User3788｜Date and time 23/6/30 4:21:10
Build time 30.066 sec｜Game capacity 2.937KB｜

Script

は蜘蛛の巣を作るゲームを作りましょう。以下のHTMLコードを使って、ゲームを実装します。

蜘蛛の巣ゲーム

このコードをHTMLファイルに保存して、ブラウザで開くと蜘蛛の巣ゲームがプレイできます。蜘蛛のアイコンである🕷をスマホの矢印キーで動かすことができます。巣の周りには🕸で表示されています。お楽しみください！

←

Prev　Next

→ 　

Back　

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

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

は蜘蛛の巣を作るゲームを作りましょう。以下のHTMLコードを使って、ゲームを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Spider's Web</title>
    <style>
        #web {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }
        .cell {
            width: 20px;
            height: 20px;
        }
        .web-cell {
            background-color: white;
            border: 1px solid black;
            text-align: center;
            font-size: 16px;
        }
        .spider-cell {
            background-color: black;
            color: white;
            border: none;
        }
    </style>
</head>
<body>
    <h1>蜘蛛の巣ゲーム</h1>
    <div id="web"></div>

// 巣を作成
        const web = document.getElementById('web');
        for (let i = 0; i < webSize; i++) {
            for (let j = 0; j < webSize; j++) {
                const cell = document.createElement('div');
                cell.className = 'cell web-cell';
                cell.textContent = '🕸';
                web.appendChild(cell);
            }
        }

// 蜘蛛を表示
        const spiderCell = web.children[spiderStartPos[1] * webSize + spiderStartPos[0]];
        spiderCell.textContent = '🕷';
        spiderCell.className = 'cell spider-cell';

// スマホ操作
        document.addEventListener('keydown', (event) => {
            let x = spiderStartPos[0];
            let y = spiderStartPos[1];

switch (event.key) {
                case 'ArrowUp':
                    y = Math.max(0, y - 1);
                    break;
                case 'ArrowDown':
                    y = Math.min(webSize - 1, y + 1);
                    break;
                case 'ArrowLeft':
                    x = Math.max(0, x - 1);
                    break;
                case 'ArrowRight':
                    x = Math.min(webSize - 1, x + 1);
                    break;
            }

// 蜘蛛の位置を更新
            spiderCell.className = 'cell web-cell';
            spiderCell.textContent = '🕸';

spiderStartPos[0] = x;
            spiderStartPos[1] = y;

spiderCell = web.children[y * webSize + x];
            spiderCell.className = 'cell spider-cell';
            spiderCell.textContent = '🕷';
        });
    </script>
</body>
</html>
```

このコードをHTMLファイルに保存して、ブラウザで開くと蜘蛛の巣ゲームがプレイできます。蜘蛛のアイコンである🕷をスマホの矢印キーで動かすことができます。巣の周りには🕸で表示されています。

お楽しみください！