-
+
{isJapanese ? "現在の速度" : "Current speed"}: x{1000 / intervalMs}
-
-
-
-
-
+
+
{isJapanese ? "盤面" : "Board"}:
+
-
-
+
+
{isJapanese ? "コード" : "Code"}:
-
From 3ab37bdb450bc227a91ad663e2d98fe5950a26b6 Mon Sep 17 00:00:00 2001
From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com>
Date: Fri, 21 Nov 2025 09:06:32 +0900
Subject: [PATCH 03/11] =?UTF-8?q?=E3=82=BB=E3=83=AB=E3=81=AE=E8=89=B2?=
=?UTF-8?q?=E3=81=A8isNextAlive=E9=96=A2=E6=95=B0=E3=82=92=E7=B7=A8?=
=?UTF-8?q?=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/iframe/life-game.js | 54 +++++++++++++++++++++++------------------
1 file changed, 31 insertions(+), 23 deletions(-)
diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 0daea76..6237bb5 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -3,35 +3,43 @@
let timer = "stop";
let generationFigure = 0;
let isDragging = false;
-let dragMode = 0; // 1: 黒にする, 0: 白にする
+let dragMode = 0; // 1: 生きたセルにする, 0: 死んだセルにする
let isPlacingTemplate = false;
let patternShape = [];
let patternHeight = 0;
let patternWidth = 0;
let previewCells = [];
-//変数設定
-let boardSize = 20; //盤面の大きさ(20x20)
-const cellSize = 600 / boardSize; //セルの大きさ(px)
+//盤面の大きさ
+let boardSize = 20;
+const cellSize = 600 / boardSize;
+
+//セルの色
+const aliveCellColor = "black";
+const deadCellColor = "white";
+
+//セルの誕生/生存条件
+const birthCounts = [3];
+const survivalCounts = [2, 3];
// around: 周囲の生きたセル数 self: 自身が生きているかどうか
function isNextAlive(around, self) {
- // 自身が生きている & 周囲が 2 か 3 で生存
- if (self && 2 <= around && around <= 3) {
- return self;
- }
- // 自身が死んでいる & 周囲が 3 で誕生
- if (!self && around === 3) {
+ // 自身が死んでいる & 周囲が birthCounts で誕生
+ if (!self && birthCounts.includes(around)) {
return 1;
}
+ // 自身が生きている & 周囲が survivalCounts で生存
+ if (self && survivalCounts.includes(around)) {
+ return self;
+ }
return 0;
}
// cellの状態に応じた色を返す関数
function getStyle(cell) {
- if (cell === 0) return "white";
+ if (cell === 0) return deadCellColor;
// cellの値に応じて色を返す場合はここに追加
- return "black"; // デフォルトは黒
+ return aliveCellColor; // デフォルトは黒
}
//Boardの初期化
@@ -57,7 +65,7 @@ function renderBoard() {
const td = document.createElement("td");
td.style.padding = "0";
const button = document.createElement("button");
- button.style.backgroundColor = board[i][j] ? "black" : "white"; //Boardの対応する値によって色を変更
+ button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor; //Boardの対応する値によって色を変更
// ボードが大きいときは border をつけない
if (boardSize >= 50) {
button.style.border = "none";
@@ -67,8 +75,8 @@ function renderBoard() {
}
button.style.width = `${cellSize}px`;
button.style.height = `${cellSize}px`;
- button.style.padding = "0"; //cellSizeが小さいとき、セルが横長になることを防ぐ
- button.style.display = "block"; //cellSizeが小さいとき、行間が空きすぎるのを防ぐ
+ button.style.padding = "0";
+ button.style.display = "block";
button.onclick = () => {
if (isPlacingTemplate) {
clearPreview();
@@ -98,15 +106,15 @@ function renderBoard() {
e.preventDefault();
if (timer === "stop" && !isPlacingTemplate) {
isDragging = true;
- board[i][j] = !board[i][j];
+ board[i][j] = board[i][j] === 1 ? 0 : 1;
dragMode = board[i][j];
- button.style.backgroundColor = board[i][j] ? "black" : "white";
+ button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor;
}
};
button.onmouseenter = () => {
if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
board[i][j] = dragMode;
- button.style.backgroundColor = board[i][j] ? "black" : "white";
+ button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor;
}
if (isPlacingTemplate) {
drawPreview(i, j);
@@ -145,7 +153,7 @@ function drawPreview(row, col) {
function clearPreview() {
previewCells.forEach((cellPos) => {
const cell = table.rows[cellPos.row].cells[cellPos.col].firstChild;
- cell.style.backgroundColor = board[cellPos.row][cellPos.col] ? "black" : "white";
+ cell.style.backgroundColor = board[cellPos.row][cellPos.col] ? aliveCellColor : deadCellColor;
});
previewCells = [];
}
@@ -196,7 +204,7 @@ function progressBoard() {
const newBoard = structuredClone(board);
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
- //周囲のマスに黒マスが何個あるかを計算(aroundに格納)↓
+ //周囲のマスに生きたセルが何個あるかを計算(aroundに格納)↓
let around = 0;
let tate, yoko;
if (i === 0) {
@@ -220,7 +228,7 @@ function progressBoard() {
}
}
}
- //↑周囲のマスに黒マスが何個あるかを計算(aroundに格納)
+ //↑周囲のマスに生きたセルが何個あるかを計算(aroundに格納)
newBoard[i][j] = isNextAlive(around, board[i][j]);
}
}
@@ -244,14 +252,14 @@ on.pause = () => {
};
on.board_reset = () => {
- //すべて白にBoardを変更
+ //すべて死んだセルにBoardを変更
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
renderBoard();
generationChange(0);
};
on.board_randomize = () => {
- //白黒ランダムにBoardを変更
+ //生きたセル死んだセルランダムにBoardを変更
board = Array.from({ length: boardSize }, () =>
Array.from({ length: boardSize }, () => (Math.random() > 0.5 ? 1 : 0)),
);
From 6ec05da40bb3be6f09d39a23ddcd4f90c4edf155 Mon Sep 17 00:00:00 2001
From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com>
Date: Fri, 21 Nov 2025 09:40:39 +0900
Subject: [PATCH 04/11] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=83=AD?=
=?UTF-8?q?=E3=83=BC=E3=83=89=E6=99=82=E3=80=81=E4=B8=96=E4=BB=A3=E3=81=8C?=
=?UTF-8?q?=EF=BC=91=E3=81=AB=E3=81=AA=E3=82=8B=E5=95=8F=E9=A1=8C=E3=81=AE?=
=?UTF-8?q?=E8=A7=A3=E6=B1=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/iframe/life-game.js | 14 ++------------
src/routes/+page.svelte | 12 +++++-------
2 files changed, 7 insertions(+), 19 deletions(-)
diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 6237bb5..60fa541 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -267,18 +267,8 @@ on.board_randomize = () => {
generationChange(0);
};
-on.request_sync = () => {
- window.parent.postMessage(
- {
- type: "sync",
- data: {
- generationFigure: generationFigure,
- boardSize: boardSize,
- },
- },
- "*",
- );
- console.log("generationFigure:", generationFigure, "boardSize:", boardSize);
+on.get_boardsize = () => {
+ window.parent.postMessage({ type: "get_boardsize", data: boardSize }, "*");
};
on.place_template = (template) => {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3d88d11..01189c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -65,10 +65,10 @@
| "place_template"
| "save_board"
| "apply_board"
- | "request_sync"
+ | "get_boardsize"
| "progress";
- type IncomingEvent = "generation_change" | "sync" | "Size shortage" | "save_board";
+ type IncomingEvent = "generation_change" | "get_boardsize" | "Size shortage" | "save_board";
function handleMessage(event: MessageEvent<{ type: IncomingEvent; data: unknown }>) {
switch (event.data.type) {
@@ -76,9 +76,8 @@
generationFigure = event.data.data as number;
break;
}
- case "sync": {
- const data = event.data.data as { generationFigure: number; boardSize: number };
- generationFigure = data.generationFigure;
+ case "get_boardsize": {
+ const data = event.data.data as { boardSize: number };
sizeValue = data.boardSize;
break;
}
@@ -309,8 +308,7 @@
class="w-[80%] h-[90%] rounded-lg mx-auto my-5 bg-white shadow-lg"
onload={() => {
setTimeout(() => {
- sendEvent("request_sync");
- console.log("generationFigure onload:", generationFigure);
+ sendEvent("get_boardsize");
}, 50);
}}
>
From 07e92e9ba8c8120cbf8498e655fc077cc7eb9372 Mon Sep 17 00:00:00 2001
From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com>
Date: Fri, 21 Nov 2025 10:12:37 +0900
Subject: [PATCH 05/11] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E5=A4=89?=
=?UTF-8?q?=E6=95=B0=E3=80=81=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E3=82=92?=
=?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/iframe/life-game.js | 15 ++-------------
src/routes/+page.svelte | 29 ++---------------------------
2 files changed, 4 insertions(+), 40 deletions(-)
diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js
index 60fa541..4615cad 100644
--- a/src/iframe/life-game.js
+++ b/src/iframe/life-game.js
@@ -1,6 +1,5 @@
"use strict";
-let timer = "stop";
let generationFigure = 0;
let isDragging = false;
let dragMode = 0; // 1: 生きたセルにする, 0: 死んだセルにする
@@ -104,7 +103,7 @@ function renderBoard() {
};
button.onmousedown = (e) => {
e.preventDefault();
- if (timer === "stop" && !isPlacingTemplate) {
+ if (!isPlacingTemplate) {
isDragging = true;
board[i][j] = board[i][j] === 1 ? 0 : 1;
dragMode = board[i][j];
@@ -112,7 +111,7 @@ function renderBoard() {
}
};
button.onmouseenter = () => {
- if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) {
+ if (isDragging && board[i][j] !== dragMode && !isPlacingTemplate) {
board[i][j] = dragMode;
button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor;
}
@@ -243,14 +242,6 @@ on.progress = () => {
progressBoard();
};
-on.play = () => {
- timer = "start";
-};
-
-on.pause = () => {
- timer = "stop";
-};
-
on.board_reset = () => {
//すべて死んだセルにBoardを変更
board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => 0));
@@ -277,7 +268,6 @@ on.place_template = (template) => {
patternWidth = patternShape[0].length;
isPlacingTemplate = true;
table.style.cursor = "crosshair";
- stop();
};
on.save_board = async () => {
@@ -288,5 +278,4 @@ on.apply_board = (newBoard) => {
board = newBoard;
renderBoard();
generationChange(0);
- stop();
};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 01189c0..0a5af7b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,7 +24,6 @@
let showEditor = $state(true);
let preview_iframe: HTMLIFrameElement | undefined = $state();
- let isProgress = $state(false);
let isJapanese = $state(true);
let resetModalOpen = $state(false);
let helpModalOpen = $state(true);
@@ -47,10 +46,10 @@
return newDisabledState;
});
- let timer: "running" | "stopped" = $state("stopped");
+ let isProgress = $state(false);
let intervalMs = $state(1000);
$effect(() => {
- if (timer === "stopped") return;
+ if (!isProgress) return;
const timerId = setInterval(() => {
sendEvent("progress");
}, intervalMs);
@@ -58,8 +57,6 @@
});
type OngoingEvent =
- | "play"
- | "pause"
| "board_reset"
| "board_randomize"
| "place_template"
@@ -338,8 +335,6 @@
class:bg-[#E0E0E0]={templateDrawerOpen}
onclick={() => {
isProgress = false;
- timer = "stopped";
- sendEvent("pause");
templateDrawerOpen = !templateDrawerOpen;
ruleDrawerOpen = false;
}}
@@ -359,8 +354,6 @@
class:bg-[#E0E0E0]={ruleDrawerOpen}
onclick={() => {
isProgress = false;
- timer = "stopped";
- sendEvent("pause");
ruleDrawerOpen = !ruleDrawerOpen;
templateDrawerOpen = false;
}}
@@ -418,13 +411,6 @@