From 9d2e20265ee1625784c440b8fba9b7441b67cf25 Mon Sep 17 00:00:00 2001 From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com> Date: Sat, 22 Nov 2025 01:13:36 +0900 Subject: [PATCH 1/2] =?UTF-8?q?JS=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E7=BE=A4=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iframe/life-game.js | 3 +- src/lib/assets/life-game-rules/lifespan.js | 43 ++++++----------- .../assets/life-game-rules/probabilistics.js | 47 +++++++------------ 3 files changed, 31 insertions(+), 62 deletions(-) diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js index 5cea482..ff2b6fa 100644 --- a/src/iframe/life-game.js +++ b/src/iframe/life-game.js @@ -89,7 +89,6 @@ function renderBoard() { } } rerender(); - stop(); } else { window.parent.postMessage( { @@ -105,7 +104,7 @@ function renderBoard() { e.preventDefault(); if (!isPlacingTemplate) { isDragging = true; - board[i][j] = board[i][j] === 1 ? 0 : 1; + board[i][j] = board[i][j] ? 0 : 1; dragMode = board[i][j]; button.style.backgroundColor = board[i][j] ? aliveCellColor : deadCellColor; } diff --git a/src/lib/assets/life-game-rules/lifespan.js b/src/lib/assets/life-game-rules/lifespan.js index 1adbad8..19d6db2 100644 --- a/src/lib/assets/life-game-rules/lifespan.js +++ b/src/lib/assets/life-game-rules/lifespan.js @@ -1,6 +1,5 @@ "use strict"; -let timer = "stop"; let generationFigure = 0; let isDragging = false; let dragMode = 0; // 1: 黒にする, 0: 白にする @@ -12,7 +11,7 @@ let previewCells = []; //変数設定 let boardSize = 20; //盤面の大きさ(20x20) -const cellSize = 600 / boardSize; //セルの大きさ(px) +const cellSize = 450 / boardSize; //セルの大きさ(px) const maxLifespan = 2; // セルの最大寿命 // around: 周囲の生きたセル数, currentLifespan: 現在の寿命 @@ -54,6 +53,14 @@ const table = document.getElementById("game-board"); //盤面をBoardに従って変更する関数達(Boardを変更したら実行する) function renderBoard() { + // bodyを中央配置に設定 + document.body.style.display = "flex"; + document.body.style.justifyContent = "center"; + document.body.style.alignItems = "center"; + document.body.style.minHeight = "100vh"; + document.body.style.margin = "0"; + document.body.style.padding = "0"; + // 初回の盤面生成 table.innerHTML = ""; for (let i = 0; i < boardSize; i++) { @@ -97,7 +104,6 @@ function renderBoard() { } rerender(); generationChange(0); - stop(); } else { window.parent.postMessage( { @@ -111,16 +117,16 @@ function renderBoard() { }; button.onmousedown = (e) => { e.preventDefault(); - if (timer === "stop" && !isPlacingTemplate) { + if (!isPlacingTemplate) { isDragging = true; - board[i][j] = !board[i][j]; + board[i][j] = board[i][j] ? 0 : 1; dragMode = board[i][j]; button.lifespan = board[i][j] ? maxLifespan : 0; button.style.backgroundColor = getStyle(board[i][j], button.lifespan); } }; button.onmouseenter = () => { - if (isDragging && timer === "stop" && board[i][j] !== dragMode && !isPlacingTemplate) { + if (isDragging && board[i][j] !== dragMode && !isPlacingTemplate) { board[i][j] = dragMode; button.lifespan = board[i][j] ? maxLifespan : 0; button.style.backgroundColor = getStyle(board[i][j], button.lifespan); @@ -197,7 +203,6 @@ document.addEventListener("mouseup", () => { }); renderBoard(); -progressBoard(); function generationChange(num) { //現在の世代を表すgenerationFigureを変更し、文章も変更 @@ -271,14 +276,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)); @@ -295,18 +292,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) => { @@ -315,7 +302,6 @@ on.place_template = (template) => { patternWidth = patternShape[0].length; isPlacingTemplate = true; table.style.cursor = "crosshair"; - stop(); }; on.save_board = async () => { @@ -326,5 +312,4 @@ on.apply_board = (newBoard) => { board = newBoard; renderBoard(); generationChange(0); - stop(); }; diff --git a/src/lib/assets/life-game-rules/probabilistics.js b/src/lib/assets/life-game-rules/probabilistics.js index 933dabb..1e3e1ed 100644 --- a/src/lib/assets/life-game-rules/probabilistics.js +++ b/src/lib/assets/life-game-rules/probabilistics.js @@ -1,6 +1,5 @@ "use strict"; -let timer = "stop"; let generationFigure = 0; let isDragging = false; let dragMode = 0; // 1: 黒にする, 0: 白にする @@ -12,17 +11,17 @@ let previewCells = []; //変数設定 let boardSize = 20; //盤面の大きさ(20x20) -const cellSize = 600 / boardSize; //セルの大きさ(px) +const cellSize = 450 / boardSize; //セルの大きさ(px) // around: 周囲の生きたセル数 self: 自身が生きているかどうか function isNextAlive(around, self) { // 自身が生きている & 周囲が 2 か 3 で生存 50%の確率でこのルールに従う if (self && 2 <= around && around <= 3) { - return Math.random() > 0.5 ? self : !self; + return Math.random() > 0.5 ? 1 : 0; } // 自身が生きている & 周囲が2,3以外で死亡 50%の確率でこのルールに従う if (self && (around < 2 || around > 3)) { - return Math.random() > 0.5 ? !self : self; + return Math.random() > 0.5 ? 0 : 1; } // 自身が死んでいる & 周囲が 3 で誕生 50%の確率でこのルールに従う if (!self && around === 3) { @@ -45,6 +44,14 @@ const table = document.getElementById("game-board"); //盤面をBoardに従って変更する関数達(Boardを変更したら実行する) function renderBoard() { + // bodyを中央配置に設定 + document.body.style.display = "flex"; + document.body.style.justifyContent = "center"; + document.body.style.alignItems = "center"; + document.body.style.minHeight = "100vh"; + document.body.style.margin = "0"; + document.body.style.padding = "0"; + // 初回の盤面生成 table.innerHTML = ""; for (let i = 0; i < boardSize; i++) { @@ -80,7 +87,6 @@ function renderBoard() { } rerender(); generationChange(0); - stop(); } else { window.parent.postMessage( { @@ -94,15 +100,15 @@ function renderBoard() { }; button.onmousedown = (e) => { e.preventDefault(); - if (timer === "stop" && !isPlacingTemplate) { + if (!isPlacingTemplate) { isDragging = true; - board[i][j] = !board[i][j]; + board[i][j] = board[i][j] ? 0 : 1; dragMode = board[i][j]; button.style.backgroundColor = board[i][j] ? "black" : "white"; } }; 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] ? "black" : "white"; } @@ -177,7 +183,6 @@ document.addEventListener("mouseup", () => { }); renderBoard(); -progressBoard(); function generationChange(num) { //現在の世代を表すgenerationFigureを変更し、文章も変更 @@ -234,14 +239,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)); @@ -258,18 +255,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) => { @@ -278,7 +265,6 @@ on.place_template = (template) => { patternWidth = patternShape[0].length; isPlacingTemplate = true; table.style.cursor = "crosshair"; - stop(); }; on.save_board = async () => { @@ -289,5 +275,4 @@ on.apply_board = (newBoard) => { board = newBoard; renderBoard(); generationChange(0); - stop(); }; From 46f96de238f4081e8687cc4a4d132730933b8149 Mon Sep 17 00:00:00 2001 From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com> Date: Sat, 22 Nov 2025 01:39:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?rerender=E9=96=A2=E6=95=B0=E3=81=AE?= =?UTF-8?q?=E3=82=BB=E3=83=AB=E3=82=B5=E3=82=A4=E3=82=BA=E3=81=AE=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92=E5=89=8A?= =?UTF-8?q?=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/iframe/life-game.js | 10 +--------- src/lib/assets/life-game-rules/lifespan.js | 10 +--------- src/lib/assets/life-game-rules/probabilistics.js | 10 +--------- 3 files changed, 3 insertions(+), 27 deletions(-) diff --git a/src/iframe/life-game.js b/src/iframe/life-game.js index ff2b6fa..96a318e 100644 --- a/src/iframe/life-game.js +++ b/src/iframe/life-game.js @@ -10,7 +10,7 @@ let patternWidth = 0; let previewCells = []; //盤面の大きさ -let boardSize = 20; +const boardSize = 20; const cellSize = 450 / boardSize; //セルの色 @@ -168,14 +168,6 @@ function rerender() { if (currentCellColor !== expectedCellColor) { button.style.backgroundColor = expectedCellColor; } - - // セルサイズの更新 - const currentCellsize = button.style.width; - const expectedCellsize = `${cellSize}px`; - if (currentCellsize !== expectedCellsize) { - button.style.width = expectedCellsize; - button.style.height = expectedCellsize; - } } } } diff --git a/src/lib/assets/life-game-rules/lifespan.js b/src/lib/assets/life-game-rules/lifespan.js index 19d6db2..8cb95ff 100644 --- a/src/lib/assets/life-game-rules/lifespan.js +++ b/src/lib/assets/life-game-rules/lifespan.js @@ -10,7 +10,7 @@ let patternWidth = 0; let previewCells = []; //変数設定 -let boardSize = 20; //盤面の大きさ(20x20) +const boardSize = 20; //盤面の大きさ(20x20) const cellSize = 450 / boardSize; //セルの大きさ(px) const maxLifespan = 2; // セルの最大寿命 @@ -186,14 +186,6 @@ function rerender() { if (currentCellColor !== expectedCellColor) { button.style.backgroundColor = expectedCellColor; } - - // セルサイズの更新 - const currentCellsize = button.style.width; - const expectedCellsize = `${cellSize}px`; - if (currentCellsize !== expectedCellsize) { - button.style.width = expectedCellsize; - button.style.height = expectedCellsize; - } } } } diff --git a/src/lib/assets/life-game-rules/probabilistics.js b/src/lib/assets/life-game-rules/probabilistics.js index 1e3e1ed..92ff0bb 100644 --- a/src/lib/assets/life-game-rules/probabilistics.js +++ b/src/lib/assets/life-game-rules/probabilistics.js @@ -10,7 +10,7 @@ let patternWidth = 0; let previewCells = []; //変数設定 -let boardSize = 20; //盤面の大きさ(20x20) +const boardSize = 20; //盤面の大きさ(20x20) const cellSize = 450 / boardSize; //セルの大きさ(px) // around: 周囲の生きたセル数 self: 自身が生きているかどうか @@ -166,14 +166,6 @@ function rerender() { if (currentCellColor !== expectedCellColor) { button.style.backgroundColor = expectedCellColor; } - - // セルサイズの更新 - const currentCellsize = button.style.width; - const expectedCellsize = `${cellSize}px`; - if (currentCellsize !== expectedCellsize) { - button.style.width = expectedCellsize; - button.style.height = expectedCellsize; - } } } }