diff --git a/explanation.js b/explanation.js
new file mode 100644
index 0000000..0da141e
--- /dev/null
+++ b/explanation.js
@@ -0,0 +1,25 @@
+const entrance = document.getElementById("js-entrance");
+const explanationButton = document.getElementById("js-explanation");
+const layout = document.getElementById("js-layout");
+const layoutExplanation = document.getElementById("js-layout-explanation");
+
+explanationButton.addEventListener("click", () => {
+ entrance.classList.add("hidden");
+ layoutExplanation.classList.add("explanation");
+ layoutExplanation.innerHTML = `
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas tempore repellat molestiae recusandae esse saepe hic unde sequi temporibus distinctio, nesciunt alias incidunt nostrum iusto voluptatibus. Nihil, quis in! Debitis.
+ `;
+
+ const backButton = document.getElementById("js-back");
+ backButton.addEventListener("click", () => {
+ layoutExplanation.innerHTML = "";
+ layoutExplanation.classList.remove("explanation");
+ entrance.classList.remove("hidden");
+ });
+});
diff --git a/index.html b/index.html
index 2f6418a..362b442 100644
--- a/index.html
+++ b/index.html
@@ -3,18 +3,28 @@
team-c
-
-
+
+
+
diff --git a/main.js b/main.js
index 3918c74..306b96b 100644
--- a/main.js
+++ b/main.js
@@ -1 +1,28 @@
"use strict";
+
+// keydownイベントの数字と動作の紐づけを行います
+// 例えば、{ 37: 'left' }のように定義します
+// HTMLのbodyタグに紐づけておきます
+// 参考:https://developer.mozilla.org/ja/docs/Web/API/Element/keydown_event
+
+
+
+// canvas要素を活用して、描画する各関数を定義します
+// 参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas#%E4%BE%8B
+
+const H = 600, W = 300;
+const ROWS = 20, COLS = 10;
+const BLOCK_H = H / ROWS, BLOCK_W = W / COLS;
+
+// 1つのブロックを描画する関数を作成します
+// (x, y)を引数としてとりその位置に表示するようにします
+
+// canvas上にテトロミノを描画します
+// controller.jsから呼び出して、描画の部分だけ切り出すようにします
+// 描画するかどうかは、tetris.jsで配列などで管理して、受け渡します
+
+
+
+// 各テトロミノを定義します
+
+//
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index baf4e38..a22f70d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -15,6 +15,10 @@
align-items: center;
height: 100vh;
}
+
+.hidden {
+ display: none !important;
+}
/* 共通ここまで */
/* エントランス画面ここから */
@@ -55,6 +59,42 @@
justify-content: center;
align-items: center;
}
+
+.explanation {
+ background-color: var(--bg-color-sub-1);
+ width: 360px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+ border-radius: 16px;
+ padding: 32px;
+}
+
+.explanation_header {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.explanation_header_title {
+ color: var(--font-color-sub-1);
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.explanation_text {
+ color: var(--font-color-sub-1);
+}
+
+.fa-solid {
+ color: var(--font-color-sub-1);
+ font-size: 30px;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
/* エントランス画面ここまで */
/* ゲーム画面ここから */