製作の経緯
年初めは運勢占いがたくさんあるよね。
自分がそれを制作したら自分有利の運勢になるやん！！...
ということで、選ばれたスタートを自分の選んだゴールに繋げる盤面を自動で作る仕組みを実装してみました〜
成果物
どの選択肢を選んでも「みたち」に行き着きます。リロードして何回か試してみてください。
スマホ用に作ったのでパソコンだと不恰好かも...
プログラミング
ソースコード
アルゴリズム
目的
ランダムに与えられたスタートとゴールをうまくカモフラージュしながら結ぶ
流れ
- スタートとゴールを最短で行く場合の道を得る。
- 1の途中に寄り道を追加する。例えば2本目から3本目に行く道の前に、2本目から1本目に行く道と1本目から2本目に行く道を追加する。
- 自分が通らないダミーの道を追加する
全体
おおみそかに慌てて作ったので見やすさ絶望的です。
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.canvas-parent {
width: 100%;
height: 200vh;
}
</style>
</head>
<body>
<div>
<h2 style="text-align: center">今年大事にするべきものあみだ</h2>
<div style="text-align: center">
スタート地点を選択したら<br />「あみだくじ！」をクリック！！
</div>
</div>
<div class="canvas-parent" id="canvasParent">
<canvas id="canvas"></canvas>
</div>
<script>
const FRAMERATE = 60;
let canvasParent = document.getElementById("canvasParent");
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let x = canvas.width;
let y = canvas.height;
canvas.addEventListener("click", (e) => {
const rect = canvas.getBoundingClientRect();
const point = {
x: e.clientX - rect.left,
y: e.clientY - rect.top,
};
if (!clicked) {
if (
//「あみだくじ！」をクリックしたら
point.y < 155 &&
point.y > 105 &&
point.x > x / 2 - button1.width / 2 &&
point.x < x / 2 + button1.width / 2
) {
//ゴールに表示する5文字を初期化
wordList = shuffle(wordList);
wordList.splice(Math.floor(Math.random() * 5), 0, "みたち");
let index = wordList.indexOf("みたち");
let numList = [];
//自分の動くべき道追加
for (
let i = Math.min(index, checked);
i < Math.max(index, checked) + 1;
i++
) {
numList.push(i);
}
if (index < checked) {
numList.reverse();
}
if (numList.length == 1) {
}
lineList.push([checked]); //-1で取り出せるように2重
//lineListには[[前の位置,後の位置],現在の位置]が入る
//lineList2 に自分を動かさないダミーは別で保持したので、現在の位置いらなかったかも...
for (let i = 0; i < numList.length - 1; i++) {
lineList.push([[numList[i], numList[i + 1]], numList[i + 1]]);
}
//自分動かすダミー道追加
let last = [checked];
while (lineList.length < 8) {//8はテキトー 、もっと適切な数字があるかも
let rand = Math.floor(Math.random() * lineList.length);
let before = lineList[rand][lineList[rand].length - 1];
let middleWay = Math.random() > 0.5 ? 1 : -1;
let middle = before + middleWay;
//できるだけ同じ場所を往復することを避ける
if (last.includes(middle)) {
middle = middle - 2 * middleWay;
}
if (middle == -1) {
middle = 1;
} else if (middle == 5) {
middle = 3;
}
last = [before, middle];
lineList.splice(rand + 1, 0, [[before, middle], middle]);
lineList.splice(rand + 2, 0, [[middle, before], before]);
if (middle != 0 && middle != 4) {
//できるだけ横方向の移動をして欲しいから追加した
//ダミー道の途中に再度ダミー道追加
let middle2 = middle + (middle - before);
lineList.splice(rand + 2, 0, [[middle, middle2], middle2]);
lineList.splice(rand + 3, 0, [[middle2, middle], middle]);
}
}
clicked = true;
//自分動かさないダミー道追加
lineList2.push([checked]); //-1で取り出せるように
for (line of lineList) {
if (line.length != 1) {
let minNum = Math.min(...line[0]);
let before, middle;
if (minNum == 0) {
//なぜ0.7にしたか忘れた、普通に0.5でいいかも
if (Math.random() > 0.7) {
before = 2;
middle = 3;
} else {
before = 3;
middle = 4;
}
}
if (minNum == 1) {
before = 3;
middle = 4;
}
if (minNum == 2) {
before = 0;
middle = 1;
}
if (minNum == 3) {
if (Math.random() > 0.7) {
before = 0;
middle = 1;
} else {
before = 1;
middle = 2;
}
}
lineList2.push([before, middle]);
}
}
}
for (let i = 0; i < 5; i++) {
if (
//スタート地点がクリックされたら
point.y < 230 &&
point.y > 170 &&
point.x < (x / 6) * (1 + i) + 20 &&
point.x > (x / 6) * (1 + i) - 20
) {
checked = i;
}
}
}
});
let resize = () => {
//画面サイズをレスポンシブ対応
canvas.width = canvasParent.clientWidth;
canvas.height = canvasParent.clientHeight;
x = canvas.width;
y = canvas.height;
};
let clicked = false;
let checked = 0;
let wordList = [
"お金",
"家族",
"就活",
"サークル",
"食事",
"努力",
"友達",
"恋人",
];
let lineList = [];
let lineList2 = [];
const shuffle = ([...array]) => {
for (let i = array.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};
let draw = () => {
if (clicked) {
//最後の挨拶描画
context.beginPath();
context.font = "15pt Arial";
context.textAlign = "center";
context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillText("あけましておめでとうございます", x / 2, 700);
context.stroke();
context.beginPath();
context.font = "15pt Arial";
context.textAlign = "center";
context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillText("今年もよろしくお願いします", x / 2, 720);
context.stroke();
for (let i = 0; i < 5; i++) {
//縦棒描画
context.beginPath();
context.lineWidth = 4;
context.moveTo((x / 6) * (1 + i), 210);
context.lineTo((x / 6) * (1 + i), 600);
context.stroke();
}
for (let i = 0; i < 5; i++) {
//ゴール文字描画
context.beginPath();
context.font = "10pt Arial";
context.textAlign = "center";
context.fillStyle = "rgba(0, 0, 0, 1)";
context.fillText(wordList[i], (x / 6) * (1 + i), 630);
context.stroke();
}
const l = lineList.length;
let i = 0;
for (line of lineList) {
if (line.length != 1) {
//自分の通る横棒の描画
context.beginPath();
context.lineWidth = 4;
context.moveTo((x / 6) * (1 + line[0][0]), 250 + (i * 300) / l);
context.lineTo((x / 6) * (1 + line[0][1]), 250 + (i * 300) / l);
context.stroke();
i++;
}
}
i = -1;
for (line of lineList2) {
if (lineList2.length != 1) {
//自分の通らない横棒の描画
context.beginPath();
context.lineWidth = 4;
context.moveTo((x / 6) * (1 + line[0]), 250 + (i * 300) / l);
context.lineTo((x / 6) * (1 + line[1]), 250 + (i * 300) / l);
context.stroke();
i++;
}
}
}
for (let i = 0; i < 5; i++) {
//スタート地点描画
context.beginPath();
context.arc((x / 6) * (1 + i), 200, 10, 0, Math.PI * 2, true);
context.strokeStyle = "black";
context.lineWidth = 2;
context.stroke();
}
//選ばれたスタート地点の色変更
context.beginPath();
context.arc((x / 6) * (1 + checked), 200, 10, 0, Math.PI * 2, true);
context.fillStyle = "rgba(255,0,0,0.8)";
context.fill();
context.stroke();
};
let button1;
let drawButton = () => {
//あみだくじ！ボタン作成 、 ボタンの横幅をテキストと合わせるための処理
context.beginPath();
context.font = "40pt Arial";
context.textAlign = "center";
var button = context.measureText("あみだくじ！");
button1 = button;
context.fillStyle = "rgba(255, 0, 0, 0.25)";
context.fillRect(x / 2 - button.width / 2, 155, button.width, -50);
context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillText("あみだくじ！", x / 2, 150);
context.stroke();
};
let world = () => {
resize();
draw();
drawButton();
};
setInterval(() => world(), 1000 / FRAMERATE);
</script>
</body>
</html>
感想
canvasを初めて使用したが、pygameと似てる部分があってすんなり実装できた。アルゴリズム作るのはやっぱり楽しい！！！
アルゴリズムは割とうまくいったと思うけど、自分が通る道が絶対2個セットになっちゃうのは美しくないかなぁ、改善の余地はまだまだありそうだ！