Add docs

tsujio · Aug 19, 2021 · 64f92e6 · 64f92e6
1 parent a6581fb
commit 64f92e6
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
diff --git a/docs/index.css b/docs/index.css
@@ -0,0 +1,51 @@
+body {
+    background: whitesmoke;
+}
+
+a {
+    text-decoration: none;
+    color: dodgerblue;
+}
+
+.container {
+    width: 700px;
+    margin: auto;
+}
+
+.header {
+    margin-top: 2rem;
+    text-align: center;
+}
+
+.header h1 {
+    font-size: 170%;
+}
+
+.game-container {
+    width: 640px;
+    margin: auto;
+}
+
+.game-container iframe{
+    background: black;
+}
+
+.game-container,
+.description-container,
+.link-container {
+    margin-top: 3rem;
+}
+
+.description {
+    background: white;
+    padding: 1rem 2rem;
+    border: 1px solid lightgray;
+    border-radius: 10px;
+    text-align: justify;
+}
+
+.footer {
+    margin-top: 6rem;
+    margin-bottom: 4rem;
+    text-align: center;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Maxwell's Demon</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <h1>Maxwell's Demon (2021)</h1>
+      </div>
+      <div class="game-container">
+        <iframe src="https://www.tsujio.org/games/game.html?title=maxwells-demon&compress=gz&logging=true" width="640" height="480"></iframe>
+      </div>
+      <div class="description-container">
+        <div class="description">
+          <p>マクスウェルの悪魔をモチーフにしたゲームです。</p>
+          <p><a href="https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%AF%E3%82%B9%E3%82%A6%E3%82%A7%E3%83%AB%E3%81%AE%E6%82%AA%E9%AD%94">マクスウェルの悪魔</a> は動きの速い分子 (赤) と遅い分子 (青) が飛び交う部屋を観察して、壁にタイミングよくこっそり穴を開けることによってそれぞれの分子を部屋の左右に分離してしまう悪魔です。この悪魔の存在は多くの物理学者を悩ませたそうです。</p>
+          <p>普通は壁の穴は開閉するだけで移動しないのですが、ゲームの操作はワンボタンのみという制約を設けているためゲーム性を考慮して穴を上下に移動させるようにしました。</p>
+          <p>今回は画像は使わず、キャラクターや分子のイメージはドットパターンを定義して描画してみました。</p>
+        </div>
+      </div>
+      <div class="link-container">
+        <ul>
+          <li><a href="https://github.com/tsujio/game-maxwells-demon">ソースコード</a></li>
+        </ul>
+      </div>
+      <div class="footer">
+        <p>&copy; <a href="https://www.tsujio.org">辻尾研</a></p>
+      </div>
+    </div>
+  </body>
+</html>