Merge branch 'main' into github-pages

README.md

@@ -1,2 +1,69 @@
 # quantum-minesweeper
-Quantum minesweeper
+https://yui10.github.io/quantum-minesweeper/
+
+※量子力学についての知見がないため,本文章・ゲームにおいて,量子力学に関する考え方の厳密性は保証出来ません.
+
+## 概要
+
+爆弾が量子的な存在になったマインスイーパー.<br>
+
+マインスイーパーは,周囲に存在するボムの個数を元にゲームを進めます.この時,ボムは必ずその個数分,周囲のいずれかのマスに存在しその全てを**観測することが出来ます**.<br>
+本ゲームでは,この知覚する部分において,量子的存在での観測しかできないようになっています.
+
+## 挙動について
+本ゲームにおける挙動を解説します.<br>
+例えば周囲に2マスの空白マスが存在しいずれもボムと仮定します.
+
+### 従来のマインスイーパーの場合
+この場合,従来のマインスイーパーでは以下の様に表示されます.
+|  |  |  |  |
+|:-:|:-:|:-:|:-:|
+|1 |2 |2 |1 |
+|1 |■ |■ |1 |
+|1 |2 |2 |1 |
+
+このためこの2マスは両方とも開けてはいけないことが分かります.
+
+### quantum-minesweeperの場合
+本ゲームの場合は,同じ状態の時で上記の状態に加えて,以下の状態になる可能性があります.
+|  |  |  |  |
+|:-:|:-:|:-:|:-:|
+|0 |0 |0 |0 |
+|0 |■ |■ |0 |
+|0 |0 |0 |0 |
+
+|  |  |  |  |
+|:-:|:-:|:-:|:-:|
+|0 |1 |1 |1 |
+|0 |■ |■ |1 |
+|0 |1 |1 |1 |
+
+|  |  |  |  |
+|:-:|:-:|:-:|:-:|
+|1 |1 |1 |0 |
+|1 |■ |■ |0 |
+|1 |1 |1 |0 |
+
+この様に表示されても実際には爆弾が存在します.
+この状態の変化は以下の操作によって変化します.
+- 何らかのマスがあけられた
+- 旗を立てた
+- 立てた旗を取り消した
+- 観測するためのボタンをクリックした
+
+もし,十分な観測を行わずに開けるとゲームオーバーになるので十分な回数の観測を行うことを推奨します.
+
+### その他
+普通のマインスイーパーをしたい場合,ソースコードを弄ることで一時的に出来ます.一応,以下の方法で出来ますが今後のプログラムの変更によって出来なくなる可能性があります.ご了承ください.
+1. ブラウザのデベロッパーツールを開き Sources タブを開く
+2. js/game.jsを開く
+3. ``GetBombCountMap()``を見つけだし
+   ```
+   const item = [GameItem.EMPTY, GameItem.BOMB];
+   ```
+   を
+   ```
+   const item = [GameItem.BOMB];
+   ```
+   にする
+4. 保存する

css/style.css

@@ -38,6 +38,25 @@ footer {
     margin: 1%;
 }
 
+#touch-menu {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+}
+
+#touch-menu.show {
+    display: flex;
+}
+
+#touch-menu .touch-group {
+    height: 24px;
+    width: 24px;
+    background-color: white;
+    border-radius: 50%;
+    text-align: center;
+    line-height:24px;
+}
+
 #field {
     display: inline-block;
     height: 180px;
@@ -54,6 +73,7 @@ footer {
     outline: black solid 1px;
     background: gainsboro;
     text-align: center;
+    font-weight: bold;
 }
 
 #field #cells.Open {

index.html

@@ -5,6 +5,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quantum minesweeper</title>
+    <meta name="keywords" content="web,game,minesweeper">
+    <meta name="og:title" content="Quantum minesweeper">
+    <meta name="og:description" content="Minesweeper, where bombs have become quantum entities.">
+    <meta name="og:url" content="https://yui10.github.io/quantum-minesweeper/">
+    <meta name="og:site_name" content="Quantum minesweeper">
     <link rel="stylesheet" href="./css/style.css">
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-MYVTYKBZTZ"></script>
@@ -41,6 +46,10 @@ <h1>Quantum minesweeper</h1>
             </div>
             <div id="GameMessage"></div>
             <div id="field"></div>
+            <div id="touch-menu">
+                <div class="touch-group" data-touch-menu="flag">🚩</div>
+                <div class="touch-group" data-touch-menu="click" style="color: blue; font-weight: bold;">1</div>
+            </div>
         </div>
     </main>
     <footer>

js/UI.js

@@ -7,6 +7,8 @@ const createUI = (game) => {
     const elemMessage = document.getElementById("GameMessage");
     const elemGameLevel = document.getElementById("gameLevel");
     const elemObservationButton = document.getElementById("observationButton");
+    const elemTouch_menu = document.getElementById("touch-menu");
+
     let cells = [];
     let startTime = new Date();
 
@@ -31,37 +33,55 @@ const createUI = (game) => {
         resize();
     };
 
-    const click = (event) => {
+    const click = (y, x, flag) => {
+        let result = OperationStatus.None;
+        let beforeGameStatus = game.GameStatus;
+        result = game.Click(y, x, flag);
+
+        switch (result) {
+            case OperationStatus.GameClear:
+            case OperationStatus.GameOver:
+                elemMessage.innerHTML = `<p>${result.description.toUpperCase()}!<p>`;
+            case OperationStatus.Success:
+                if (beforeGameStatus === GameStatus.INITIALIZED) {
+                    startTime = new Date();
+                }
+                cellStatusChange();
+                elemBombCounter.innerHTML = (game.BombCount - game.NowFlagCount).toString().padStart(3, "0");
+                break;
+        }
+    };
+
+    const mouse = (event) => {
+        event.preventDefault();
         if (event.target instanceof HTMLDivElement) {
             const x = parseInt(event.target.dataset.x);
             const y = parseInt(event.target.dataset.y);
-
-            let result = OperationStatus.None;
-            let beforeGameStatus = game.GameStatus;
             if (event.button == 0) { //左クリック
-                result = game.Click(y, x, false);
+                click(y, x, false);
             }
             else if (event.button == 1) { //中央
             }
             else if (event.button == 2) { //右クリック
-                result = game.Click(y, x, true);
+                click(y, x, true);
             }
 
-            switch (result) {
-                case OperationStatus.GameClear:
-                case OperationStatus.GameOver:
-                    elemMessage.innerHTML = `<p>${result.description.toUpperCase()}!<p>`;
-                case OperationStatus.Success:
-                    if (beforeGameStatus === GameStatus.INITIALIZED) {
-                        startTime = new Date();
-                    }
-                    cellStatusChange();
-                    elemBombCounter.innerHTML = (game.BombCount - game.NowFlagCount).toString().padStart(3, "0");
-                    break;
-            }
         }
     };
 
+    const touch = (event) => {
+        event.preventDefault();
+
+        elemTouch_menu.dataset.x = event.target.dataset.x;
+        elemTouch_menu.dataset.y = event.target.dataset.y;
+
+        const posX = event.touches[0].clientX;
+        const posY = event.touches[0].clientY;
+        elemTouch_menu.style.left = posX + 'px';
+        elemTouch_menu.style.top = posY + 'px';
+        elemTouch_menu.classList.add('show');
+    };
+
     const init = () => {
         window.addEventListener("resize", resize);
         elemObservationButton.addEventListener("mousedown", () => {
@@ -74,7 +94,22 @@ const createUI = (game) => {
         document.getElementById("NewGameButton").addEventListener("mousedown", levelChange);
 
         elemField.oncontextmenu = () => false;
-        elemField.addEventListener("mousedown", click);
+        elemField.addEventListener("mousedown", mouse);
+        elemField.addEventListener("touchstart", touch);
+        elemTouch_menu.addEventListener("click", (event) => {
+            if (event.target instanceof HTMLDivElement) {
+                const x = parseInt(elemTouch_menu.dataset.x);
+                const y = parseInt(elemTouch_menu.dataset.y);
+                click(y, x, (event.target.dataset.touchMenu == "flag"));
+            }
+        });
+
+        document.body.addEventListener('click', () => {
+            if (elemTouch_menu.classList.contains('show')) {
+                elemTouch_menu.classList.remove('show');
+                elemTouch_menu.dataset.x = elemTouch_menu.dataset.y = "";
+            }
+        });
 
         setInterval(timerEvent, 1000);
     };