以下が、JavaScriptを用いてドラクエのマップをランダム生成するアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>ドラクエマップジェネレーター</title>
</head>
<body>
<h1>ドラクエマップジェネレーター</h1>
<button onclick="generateMap()">マップ作成</button>
<br />
<canvas id="mapCanvas"></canvas>
<script>
const canvas = document.getElementById("mapCanvas");
canvas.width = 320;
canvas.height = 320;
const ctx = canvas.getContext("2d");
const tileSize = 16;
const tilesPerRow = canvas.width / tileSize;
const tilesPerCol = canvas.height / tileSize;
const mapTiles = [
// 0: 草地
{ color: "#6fb443", walkable: true },
// 1: 森
{ color: "#559b3c", walkable: true },
// 2: 山
{ color: "#a98c5d", walkable: false },
// 3: 水
{ color: "#3ca3c6", walkable: false },
// 4: 街
{ color: "#f7d679", walkable: true },
// 5: 城
{ color: "#cc3139", walkable: true },
];
function generateMap() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let x = 0; x < tilesPerRow; x++) {
for (let y = 0; y < tilesPerCol; y++) {
const tileType = getRandomTileType();
const tile = mapTiles[tileType];
ctx.fillStyle = tile.color;
ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
}
}
}
function getRandomTileType() {
const weights = [
{ tileType: 0, weight: 5 },
{ tileType: 1, weight: 3 },
{ tileType: 2, weight: 1 },
{ tileType: 3, weight: 1 },
{ tileType: 4, weight: 1 },
{ tileType: 5, weight: 1 },
];
const totalWeight = weights.reduce(
(total, weight) => total + weight.weight,
0
);
const randomNumber = Math.floor(Math.random() * totalWeight);
let weightSum = 0;
for (let i = 0; i < weights.length; i++) {
weightSum += weights[i].weight;
if (randomNumber < weightSum) {
return weights[i].tileType;
}
}
}
</script>
</body>
</html>
```
このアプリでは、ランダムなマップを生成するために、草地、森、山、水、街、城という6種類のタイルを用意しています。各タイルには、表示する色と歩けるかどうかという情報が設定されています。ランダムなマップを生成するには、それぞれのタイルの重み付けを設定し、その重み付けに基づいてランダムにタイルを選択しているため、毎回異なるマップが生成されます。
以上が、JavaScriptを用いてドラクエのマップをランダム生成するアプリの実装例です。
