工事中
<!DOCTYPE html>
<html>
<head>
<title>TRPG ダンジョンジェネレーター</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 50px);
grid-gap: 5px;
}
.grid-item {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
</style>
</head>
<body>
<h2>TRPG ダンジョンジェネレーター</h2>
<button onclick="displayDungeon()">ダンジョンを生成</button>
<div id="dungeonGrid" class="grid-container"></div>
<script>
function generateDungeon() {
let grid = Array.from({ length: 4 }, () => new Array(4).fill('通路'));
// スタート地点 (A4)
const start = { x: 0, y: 3 };
grid[start.y][start.x] = 'スタート';
function isValidTile(x, y) {
return x >= 0 && x < 4 && y >= 0 && y < 4 && grid[y][x] === '通路';
}
function placeTiles(tileType, min, max) {
let count = Math.floor(Math.random() * (max - min + 1)) + min;
while (count > 0) {
let x = Math.floor(Math.random() * 4);
let y = Math.floor(Math.random() * 4);
if (isValidTile(x, y)) {
grid[y][x] = tileType;
count--;
}
}
}
placeTiles('宝物', 1, 2);
placeTiles('敵', 3, 4);
placeTiles('休息所', 1, 2);
// ボスの配置 (D1)
grid[0][3] = 'ボス';
return grid;
}
function displayDungeon() {
let dungeon = generateDungeon();
let dungeonGrid = document.getElementById('dungeonGrid');
dungeonGrid.innerHTML = ''; // Clear previous grid
dungeon.forEach(row => {
row.forEach(tile => {
let div = document.createElement('div');
div.className = 'grid-item';
div.textContent = tile;
dungeonGrid.appendChild(div);
});
});
}
</script>
</body>
</html>
最終更新：2023年11月16日 22:17
