- - [これ](https://note.com/shimakaze_soft/n/n5866efc58b3c#lcDDy)を使って勝敗判定を実装する
- - 横幅、縦幅を変更可能にする
- - 見た目をもうちょっといい感じにする
-
+ - [これ](https://note.com/shimakaze_soft/n/n5866efc58b3c#lcDDy)を使って勝敗判定を実装する\r
+ - 横幅、縦幅を変更可能にする\r
+ - 見た目をもうちょっといい感じにする\r
+\r
-<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
-<!DOCTYPE html>
-<html>
-<head>
-<title>flowchart.html</title>
-<meta charset="utf-8"/>
-</head>
-<body>
-<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"xml":"<mxfile host=\"app.diagrams.net\" modified=\"2021-10-08T08:16:56.541Z\" agent=\"5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36\" etag=\"Qyl0JX3lmr4w61HYsQpk\" version=\"15.4.3\" type=\"device\" pages=\"2\"><diagram id=\"s89m_YFMkeuFDUxKmkmU\" name=\"Page-1\">7V1Zc9s2EP41eIyH9/FISnKbjNNp6860eerQEiUxpUSVomK5v75YEOAFiERsiYfbTCYhQRIidr9vsbs4iPTZ7vxDGhy2n5NVGCNNWZ2RPkeaphqahuCvsnrJS2zdyQs2abSiN5UFj9E/IS1UaOkpWoXH2o1ZksRZdKgXLpP9PlxmtbIgTZPn+m3rJK7/6iHYhFzB4zKI+dLfo1W2zUsdzS7LfwyjzZb9smq5+ZVdwG6mLTlug1XyXCnSF0ifpUmS5Ue78yyMQXhMLvlz9xeuFi+WhvtM5gHLsZ/SffwQf8p+Wh3tP2eb7ekDE/O3ID7RFtO3zV6YCMIVlgg9TdJsm2ySfRAvylI/TU77VQi/o+Cz8p6HJDngQhUXfg2z7IWqNzhlCS7aZruYXuXbQpt3TE7pkr7Hdj5ffly/fNLU3ceH8/r8ef3L8gPDRJBuwqyloVQr0JbKD1BJ/RAmuzBLX/ANaRgHWfStrv2AgmhT3FfKGR9QUYvF3vbWFalHWIDnOyKShY4cDbkaWjjI85A3pyUO1pUV40b6Tyk+2sARWtwjf4YcBy0s5C6Qp6CFjXwTOQZ5SkX+faVCA/lz5M5YhcXjLqf0UqWgn+dtlIWPh4Co4hkzXVJ938I0C8+tAqdXTQpEaiZUnZ4/l6RTGZO2FcJZyo1U5EycGBpPjDYojoQYGi/1hYtci2DVRJ4NB5exqgyBVbNHqIqN+MShqktCVXNGhVWdE/sqXEf78O7rUWSohVY9t88O8hdgh0s7Py5rrLlDW2Nt6hg3JTFujQriZhvEB7bCRYjw0jgfDKTq1H0GS9ZnGJfTYAmcBmxJdXCIc5Pqu+AWuz7yWAn1j/E9Nj3wZvTAZweeUS9RwXDTA5cdLIhBd4hBN+HU9QY33xw1hrffk48zBYGm+MaRRZp8x/npEZAKrgeLET37x98+P1QQ7RL4O3CfSwpL7wU/eQ8OOT7ATotrjw7suj002FU+iiHy1axgB+3fPx0PpO2KZFEufc9iB8xkuawEB/z0EjNZkBEo1GlCzO/eU+X5CqnTImGVTazWnJnB3DC2qB9fwpXMSZZhDpU31Y+1ltV1HMTRZo+Pl1jHYYoLQLfRMog9emEXrVY5v8Nj9E/wRKoChh+SaJ8R7Zg+MudQF6b0MWc3VH3M0uSvcJbECa53vk/24ZX8X62OKYuHlK4IIKXdDFJ8sMFijOMh2NdUYP19gpyiD5r4QIWP+yQlDtdZeZUFJrPHx9cDky9qGBIHUOv4tAQgWO+Gc4uS95oAqQX0rLRhWFB522gE9U6RpteQVliqCtS0fqFm3Apqn4JvweMyjQ5ZxajdM2fLY5ZLr19SmW3K8ZNDi1k3Z14zc9icgZXEGFOQY7U6bSbA0jXLev7LqBP4h5rTK+h4H76CFqq1e/BcqvrX4C90UmrpovsMWU7htDMgUJ9fE+UQ36VaVUG/VbhL/ejV5Y0JpqfjId8CF8QxWe9QeJcOcufEOylclhl4Km1DH7ndYG5K4R4JLInZBIfL7I87u/BUHj0WdsOCSijIlPJHfRZzltGjUnmKb/JVBl7WURxfH0ZNj9oYPMMt8n6mFD2yzHXnMCVt10iCR41PaEX7KIPsX3/p7Ntg3BwwaBRqnk+1TgziLg9x8bCJMi6M8z0Uw/hl2EpkuG8D2wKnQyS9hbgVJF8nhVsGx27cjivpzd67IviPGLdRjEX0G3FG28Yg+Zh7fCaaw/rgWWydT6Yy79Gru3/YIXS6usa8hGgC3FED+R4JWrGH6ZLAJvce/YZam0oktXoq1DEBJQ7f0QqcmiEs1jrZZ/Siqr3NgmmyFkwflwXj0+RNCza+DtjUx2aUTL4jmFgPLDv/xxjX5AhdEJVCf0py3vnwCmQOTEhGumolGdA+Ns2nGdQyl0Dr0XG30Mw3CIbi8jwTm7es1RV23AYHuG933sDU7bt1nDwvt0Ga3cVY53/G0S7KLrDsRtQyJLoKUSr8dv29IBXeoeELmqGTcrWymx9QV6soDZdZlEAS8zk8ZrdRn6qITGOv+jN5MfdgCbEI05c/4Pk7k51+odWRk/m5dvZCz95gQWVjb2NcsbfOx95AK4/4ze/agtY9837sqSnKFfTLR17Ao/ZMDNncgDGu3IAhcAllRzkaC0UsMiAzzhSuYdbx7Zocvl0BvI1bwdtSOTH10d2co6zS2+CzL5UrZV8DJ6yr6b+LYgzpppI2LipdTvnIDBj6jErFwKNG0zUwhG3DfC2fTU8opjkUExYcYwq8swSjzP3yTv+fd1106ubduJJD7L2bvFPY0L3k1KFLA/4KmzqU93e05nUQH8P6dZU5iiqkZS/OHxkhL23BVDIRL+2b8dKcIi8Vo8rMD8qdoqsd9CRnP4dphOUGU4XeylnphJgxLs6KEmImdHAwJYfEdW7Vybzuuol+SOUIgqh+O7tBYqg3k0qtkkrFnOqZUoYspcxxUUqUgfyuSI6NDZZ9mQPjjj6hneNBYmQKtBPkgvulnTMe2inttMMnTeJUqajazf4NFNErGWUXwxr2uMgomKPVka78fzigmGIu2tGj3+zjMO7oK0O+a3NOdm0vy8mPhXOixb3VPm26+UrRtOp++zR+2tcEXMmaI9kziWxZEo0sMLOlSGQjF/PIJzvuzJGnVXxGC+7Mp6s5OFrjLekI+aUqkgmQmxHMltm1ZL/yYJ+6UhQyQ1edwKo02RQ0mZVJ44/+ws+wtKkUudXs5M2GKHNK0adKafIVuR0V5ZTjKiJqKZr9Bk0J0o3vS1NdAn6tpswme26tKZm1QKWmlnFwPEbLaSuLk7G0sppTAPpWlmgt8buiVXPSk6q+UlW23lXTrXUlswJpyrrqlvBrdWUoPatKZtFNhw0sXOpaZrbiX1/Fpb7enPRhMMJpVtrymr1BRLwn5ITWZbWthO1cMasOlrBve+2K2HdBtH+HK2aHXxQu3KhkShCXXjE7KoTzc3ZhCyFZdJOS8aN7+HW1U9pMstUwd1vwwUZ5Wt+7IvivJ/xqOyyBd2jHTZ2fNdvzgswJLWBrBXA30gcbW2l975suZ25qko1dZuS/Lgr0sk6iTghLkDUWEkJtuvTXYwTvRU6MEQLXRtzSwRZOtL735SXJ37H6fnzQtgf32YsmNFZU1idD1Hb2et1EX63cddIvVoXZdNdaxyTzNlyivu6NuIZbbF5Xn2MMrj7RdDSZboFXRGWdHha+Q0YdvequjY5oQ0cT/gX1Efb5vNb4ffwEqpHf2k9i7V65j4Oms3P6PnB9A8k3CqLjX2G23LIT9j2o1gTad+zaxuYKshCGB4tuCMByjb3/xGDh3YvGV45Uwl+y1R/2lcvN/9iws2AHm+JjMPkCGf8C6/XSIHjFvoBsb2SPn77fQe/mhKun4Bgt7wgQfg2X2SyI4+QEL0g+fKaCRskHz8jOHnTjR0isPuXQeXgSdwI1SFwETnPnkPpukgh2JoY/N7NKxXa0xTi7wCyJcrSvMEv4tPxCWp4bLb8zpy/+BQ==</diagram><diagram name=\"Page-2\" id=\"Fur2vRH3D3bimBpfmG0a\">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</diagram></mxfile>","toolbar":"pages zoom layers lightbox","page":1}"></div>
-<script type="text/javascript" src="https://app.diagrams.net/js/viewer-static.min.js"></script>
-</body>
-</html>
+<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->\r
+<!DOCTYPE html>\r
+<html>\r
+<head>\r
+<title>flowchart.html</title>\r
+<meta charset="utf-8"/>\r
+</head>\r
+<body>\r
+<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"xml":"<mxfile host=\"app.diagrams.net\" modified=\"2021-10-08T08:16:56.541Z\" agent=\"5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36\" etag=\"Qyl0JX3lmr4w61HYsQpk\" version=\"15.4.3\" type=\"device\" pages=\"2\"><diagram id=\"s89m_YFMkeuFDUxKmkmU\" name=\"Page-1\">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</diagram><diagram name=\"Page-2\" id=\"Fur2vRH3D3bimBpfmG0a\">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</diagram></mxfile>","toolbar":"pages zoom layers lightbox","page":1}"></div>\r
+<script type="text/javascript" src="https://app.diagrams.net/js/viewer-static.min.js"></script>\r
+</body>\r
+</html>\r
</form>\r
\r
<!-- ゲーム本体 -->\r
- <table id="maintable"></table>\r
+ <span id="p-table">\r
+ <table id="maintable" align="center"></table>\r
+ </span>\r
\r
<!-- メッセージが表示される場所 -->\r
<p id="msg"></p>\r
<!-- 設定 -->\r
<h2>設定</h2>\r
<form>\r
- <table>\r
- <tr>\r
- <td>縦方向のマス目の数</td>\r
- <td><input type="number" id="inputtablex"></td>\r
- </tr>\r
- <tr>\r
- <td>横方向のマス目の数</td>\r
- <td><input type="number" id="inputtabley"></td>\r
- </tr>\r
- <tr>\r
- <td>プレーヤーの人数</td>\r
- <td><input type="number" id="inputplayernumber"></td>\r
- </tr>\r
- </table>\r
+ <p>\r
+ 縦方向のマス目の数<br>\r
+ <input type="number" id="inputtablex">\r
+ </p>\r
+ <p>\r
+ 横方向のマス目の数<br>\r
+ <input type="number" id="inputtabley">\r
+ </p>\r
+ <p>\r
+ プレーヤーの人数<br>\r
+ <input type="number" id="inputplayernumber">\r
+ </p>\r
<input type="button" value="適用" id="apply">\r
</form>\r
\r
-// 配列の重複した値が指定回数以上ならTrueを返す
-// 使い方: CountArrayValue(配列, 回数)
-// 参考: https://teratail.com/questions/98451
-// https://teratail.com/questions/352619
-var CountArrayValue = function(array, number) {
- var count = {};
-
- //for (var i of array) {
- // count[i] = (count[i] || 0) + 1;
- // if (count[i] == number) return true;
- //}
-
- for (i=0; i<array.length; i++){
- count[array[i]] = ( count[array[i]] || 0 ) + 1;;
- if (count[array[i]] == number) return true;
- }
- return false;
-}
-
-
-
-// 勝敗の判定 ジャッジメントですの！
-var Judgement =function() {
- // プレーヤーごとに判定
- // プレーヤーIDでループし、変数pに今チェック対象のプレーヤーIDが代入される
- for (p=0; p < PlayerNumer; p++){
- // 判定を行う対象プレーヤーを表示
- console.log(p + "の勝敗判定を実行します")
-
- // チェックしたプレーヤーのIDが書き込まれたボックスの一覧を取得
- var elements = MainTable.querySelectorAll("[data-player]");
-
- // 今チェック中のプレーヤーのチェックしたボックスの座標
- CheckedByCurrentPlayerX = []; // X軸方向のチェックしたボックスのリスト
- CheckedByCurrentPlayerY = []; // Y軸方向のチェックしたボックスのリスト
- CheckedbyCurrentPlayerD = []; // 斜め方向のチェックしたボックスのリスト
-
- // 上で取得したボックスの一覧1つ1つで確認処理を行う
- //elements.forEach(function(e) {
- for(i=0; i<elements.length; i++){
- var e = elements[i];
- //if (e.dataset.player == p){ // もしいま確認しているボックスが今確認しているプレーヤーIDと一致したら
- if (e.getAttribute("data-player") == p){
- //console.log(e)
- // チェックされているボックスの座標を座標リストに追加する
- CheckedByCurrentPlayerX.push(e.getAttribute("data-x"));
- CheckedByCurrentPlayerY.push(e.getAttribute("data-y"));
- }
- };
-
- // 勝利時に実行する関数
- var WinExit = function(text){
- //Msg.innerText = p + "が" + text + "で勝ちました"
- Msg.innerText = PlayerMarks[p] + "が" + text + "で勝ちました"
- GameEnded = true;
- return;
- }
-
- // X座標の確認
- if (CountArrayValue(CheckedByCurrentPlayerX, TableYNumber)){
- // チェックした値がX座標で一致した→すなわち縦方向がそろった
- WinExit("縦方向");
- return true;
- }
-
- // Y軸方向の確認
- if (CountArrayValue(CheckedByCurrentPlayerY, TableXNumber)){
- // チェックした値がY座標で一致した→すなわち横方向がそろった
- WinExit("横方向");
- return true;
- }
-
-
- // 斜め方向の判定
- if (TableXNumber == TableYNumber){ // 正方形の場合のみ （X軸とY軸の大きさが一致）
-
- // 左上からの斜め方向の判定
- {
- for (i=0; i<TableXNumber; i++){
- var e = document.getElementById(i + "," + i)
- if (e.getAttribute("data-clicked") == "true" && e.getAttribute("data-player") == p){
- CheckedbyCurrentPlayerD.push(i + "," + i);
- }
- }
-
- if(CheckedbyCurrentPlayerD.length == TableXNumber){
- WinExit("左上からの斜め方向");
- return true;
- }
- }
-
- // 斜め方向の判定を初期化
- CheckedbyCurrentPlayerD.splice(0)
-
- // 右上からの斜め方向の判定
- {
- for(x=TableXNumber-1; x > -1; x--){
- var y = TableXNumber - x - 1;
- var e = document.getElementById(x + "," + y);
- if (e.getAttribute("data-clicked") == "true" && e.getAttribute("data-player") == p){
- CheckedbyCurrentPlayerD.push(x + "," + y);
- }
- }
- if(CheckedbyCurrentPlayerD.length == TableXNumber){
- WinExit("右上からの斜め方向");
- return true;
- }
- }
- }
-
- // ログ表示
- //console.log(p + "のチェック済みのX座標")
- //console.log(CheckedByCurrentPlayerX)
- //console.log(p + "のチェック済みのY座標")
- //console.log(CheckedByCurrentPlayerY)
-
-
- }
-
- // 終了
- return false;
-}
+// 配列の重複した値が指定回数以上ならTrueを返す\r
+// 使い方: CountArrayValue(配列, 回数)\r
+// 参考: https://teratail.com/questions/98451\r
+// https://teratail.com/questions/352619\r
+var CountArrayValue = function(array, number) {\r
+ var count = {};\r
+\r
+ //for (var i of array) {\r
+ // count[i] = (count[i] || 0) + 1;\r
+ // if (count[i] == number) return true;\r
+ //}\r
+\r
+ for (i=0; i<array.length; i++){\r
+ count[array[i]] = ( count[array[i]] || 0 ) + 1;;\r
+ if (count[array[i]] == number) return true;\r
+ }\r
+ return false;\r
+}\r
+\r
+\r
+\r
+// 勝敗の判定 ジャッジメントですの！\r
+var Judgement =function() {\r
+ // プレーヤーごとに判定\r
+ // プレーヤーIDでループし、変数pに今チェック対象のプレーヤーIDが代入される\r
+ for (p=0; p < PlayerNumer; p++){\r
+ // 判定を行う対象プレーヤーを表示\r
+ console.log(p + "の勝敗判定を実行します")\r
+\r
+ // チェックしたプレーヤーのIDが書き込まれたボックスの一覧を取得\r
+ var elements = MainTable.querySelectorAll("[data-player]");\r
+\r
+ // 今チェック中のプレーヤーのチェックしたボックスの座標\r
+ CheckedByCurrentPlayerX = []; // X軸方向のチェックしたボックスのリスト\r
+ CheckedByCurrentPlayerY = []; // Y軸方向のチェックしたボックスのリスト\r
+ CheckedbyCurrentPlayerD = []; // 斜め方向のチェックしたボックスのリスト\r
+\r
+ // 上で取得したボックスの一覧1つ1つで確認処理を行う\r
+ //elements.forEach(function(e) {\r
+ for(i=0; i<elements.length; i++){\r
+ var e = elements[i];\r
+ //if (e.dataset.player == p){ // もしいま確認しているボックスが今確認しているプレーヤーIDと一致したら\r
+ if (e.getAttribute("data-player") == p){\r
+ //console.log(e)\r
+ // チェックされているボックスの座標を座標リストに追加する\r
+ CheckedByCurrentPlayerX.push(e.getAttribute("data-x"));\r
+ CheckedByCurrentPlayerY.push(e.getAttribute("data-y"));\r
+ }\r
+ };\r
+\r
+ // 勝利時に実行する関数\r
+ var WinExit = function(text){\r
+ //Msg.innerText = p + "が" + text + "で勝ちました"\r
+ Msg.innerText = PlayerMarks[p] + "が" + text + "で勝ちました"\r
+ GameEnded = true;\r
+ return;\r
+ }\r
+\r
+ // X座標の確認\r
+ if (CountArrayValue(CheckedByCurrentPlayerX, TableYNumber)){\r
+ // チェックした値がX座標で一致した→すなわち縦方向がそろった\r
+ WinExit("縦方向");\r
+ return true;\r
+ }\r
+\r
+ // Y軸方向の確認\r
+ if (CountArrayValue(CheckedByCurrentPlayerY, TableXNumber)){\r
+ // チェックした値がY座標で一致した→すなわち横方向がそろった\r
+ WinExit("横方向");\r
+ return true;\r
+ }\r
+\r
+\r
+ // 斜め方向の判定\r
+ if (TableXNumber == TableYNumber){ // 正方形の場合のみ （X軸とY軸の大きさが一致）\r
+\r
+ // 左上からの斜め方向の判定\r
+ {\r
+ for (i=0; i<TableXNumber; i++){\r
+ var e = document.getElementById(i + "," + i)\r
+ if (e.getAttribute("data-clicked") == "true" && e.getAttribute("data-player") == p){\r
+ CheckedbyCurrentPlayerD.push(i + "," + i);\r
+ }\r
+ }\r
+\r
+ if(CheckedbyCurrentPlayerD.length == TableXNumber){\r
+ WinExit("左上からの斜め方向");\r
+ return true;\r
+ }\r
+ }\r
+\r
+ // 斜め方向の判定を初期化\r
+ CheckedbyCurrentPlayerD.splice(0)\r
+\r
+ // 右上からの斜め方向の判定\r
+ {\r
+ for(x=TableXNumber-1; x > -1; x--){\r
+ var y = TableXNumber - x - 1;\r
+ var e = document.getElementById(x + "," + y);\r
+ if (e.getAttribute("data-clicked") == "true" && e.getAttribute("data-player") == p){\r
+ CheckedbyCurrentPlayerD.push(x + "," + y);\r
+ }\r
+ }\r
+ if(CheckedbyCurrentPlayerD.length == TableXNumber){\r
+ WinExit("右上からの斜め方向");\r
+ return true;\r
+ }\r
+ }\r
+ } \r
+\r
+ // ログ表示\r
+ //console.log(p + "のチェック済みのX座標")\r
+ //console.log(CheckedByCurrentPlayerX)\r
+ //console.log(p + "のチェック済みのY座標")\r
+ //console.log(CheckedByCurrentPlayerY)\r
+\r
+\r
+ }\r
+\r
+ // 終了\r
+ return false;\r
+}\r
-// 最初にのみログを表示する
-window.addEventListener("load", function(){
- console.log(CurrentPlayer + "でゲームをスタートします")
-})
-
-// ボックスがクリックされたときの処理
-// init.jsでボタンがクリックされた場合にClickedBox関数を実行するように指示している
-var ClickedBox = function (e) {
- var MySelf = e.target // クリックされたボックスを取得する
-
- if (! GameEnded){ //もしゲームの状態が「終了」でなければ
- if (MySelf.getAttribute("data-clicked") != "true"){
- // クリックされたボックスの設定
- MySelf.innerText = PlayerMarks[CurrentPlayer]; //クリックされたボックスのテキストをクリックしたプレーヤーの記号にする
-
- //MySelf.dataset.clicked = "true"; //ボックスの状態を「クリック済み」にする
- //MySelf.dataset.player = CurrentPlayer; // チェックしたプレーヤーのIDをボックスに書き込む
-
- MySelf.setAttribute("data-clicked", true) //ボックスの状態を「クリック済み」にする
- MySelf.setAttribute("data-player", CurrentPlayer) // チェックしたプレーヤーのIDをボックスに書き込む
-
- // ログ
- //console.log(CurrentPlayer + "が " + MySelf.dataset.x + "," + MySelf.dataset.y + " をクリックしました")
- console.log(CurrentPlayer + "が " + MySelf.getAttribute("data-x") + "," + MySelf.getAttribute("data-y") + " をクリックしました")
-
- // 勝利判定を行う
- if (Judgement()){
- return;
- }
-
- // プレイヤーを変更する
- ChangePlayer();
-
- // 現在の情報を更新する
- UpdateCurrentConfig();
-
- // すべてチェックされた場合の処理
- CheckedBox++;
- if (CheckedBox == TableXNumber * TableYNumber){ // もしチェックされた数とマス目の数が等しいならば
- Msg.innerText = "終了" // メッセージに終了と表示
- GameEnded = true; // ゲームの状態を「終了」にする
- }
- }else{
- console.log("既にクリックされています")
- }
- }
-}
-
-// プレーヤーを変更する処理
-var ChangePlayer = function(){
- if (CurrentPlayer == PlayerNumer - 1){ // 今のプレーヤーが最後だったら
- CurrentPlayer = 0; //最初のプレーヤーに戻る
- }else{
- CurrentPlayer++; //次のプレーヤーにする
- }
- console.log("プレイヤー" + CurrentPlayer + "の番です") //ログを表示する
-}
-
-// 現在の設定を表示する関数
-var UpdateCurrentConfig = function() {
- // ゲーム設定を表示
- var p1 = document.createElement("p") //ゲーム設定を表示する枠を作成
- p1.innerText = "横: " + TableXNumber + "縦: " + TableYNumber // テキストを設定
-
- // プレーヤー情報を表示
- var p2 = document.createElement("p") // プレーヤー情報を表示する枠を作成
- p2.innerText = "人数: " + PlayerNumer + "人 現在: " + PlayerMarks[CurrentPlayer]
-
- // 作成した枠を文書に挿入
- CurrentConfig.innerHTML = "" ; // 枠の中の文書を削除
- CurrentConfig.appendChild(p1); // ゲーム設定を挿入
- CurrentConfig.appendChild(p2); // プレーヤー情報を挿入
-}
-
-// 初回起動時に現在の設定を表示
-window.addEventListener("load", UpdateCurrentConfig)
-
-// リセットボタンが押されたときの処理
-ResetButton.addEventListener("click", function(){
- location.reload();
-})
-
-// 初回起動時に設定のボックス内に初期設定を入れておく
-window.addEventListener("load", function(){
- InputTableX.value = TableXNumber;
- InputTableY.value = TableYNumber;
- InputPlayerNumber.value = PlayerNumer;
-})
-
-// 適用ボタンが押された時の処理
-ApplyButton.addEventListener("click", function(){
- // ゲームの状態をチェック
- if (CheckedBox != 0){
- Msg.innerText = "既にゲームが開始されています"
- return;
- }
-
- // それぞれの状態を初期化
- GameEnded = false;
- CheckedBox = 0;
- CurrentPlayer = 0;
- Msg.innerText = "";
-
- // 入力された内容を変数に反映
- PlayerNumer = parseFloat(InputPlayerNumber.value);
- TableXNumber = parseFloat(InputTableX.value);
- TableYNumber = parseFloat(InputTableY.value);
-
- // 数が整数でない場合にエラー
- var ChkInt = Number.isInteger
- if (! ChkInt(PlayerNumer) || ! ChkInt(TableXNumber) || ! ChkInt(TableXNumber)){
- Msg.innerText = "全ての設定で整数を指定してください"
- return;
- }
-
- // マス目の数が3以上ではない場合はエラー
- //if(InputTableX.value >= 3 && InputTableY.value >= 3){
- // TableXNumber = InputTableX.value;
- // TableYNumber = InputTableY.value;
- //}else{
- // Msg.innerText = "3以上の整数を指定してください"
- // return;
- //}
-
- if (TableXNumber < 3 || TableYNumber < 3){
- Msg.innerText = "3以上の整数を指定してください"
- return;
- }
-
- // プレーヤーの人数が定義されている数以上ならエラー
- if (PlayerMarks.length < PlayerNumer){
- Msg.innerText = "現在" + PlayerMarks.length + "以上の数は対応していません"
- return;
- }
-
-
- // プレーヤーの数が2未満ならエラー
- if (PlayerNumer < 2){
- Msg.innerText = "2以上の整数を指定してください"
- return;
- }
-
- // ゲーム全体の初期化と表示されている設定を更新
- InitilizeTable();
- UpdateCurrentConfig();
-})
+// 最初にのみログを表示する\r
+window.addEventListener("load", function(){\r
+ console.log(CurrentPlayer + "でゲームをスタートします")\r
+})\r
+\r
+// ボックスがクリックされたときの処理\r
+// init.jsでボタンがクリックされた場合にClickedBox関数を実行するように指示している\r
+var ClickedBox = function (e) {\r
+ var MySelf = e.target // クリックされたボックスを取得する\r
+\r
+ if (! GameEnded){ //もしゲームの状態が「終了」でなければ\r
+ if (MySelf.getAttribute("data-clicked") != "true"){\r
+ // クリックされたボックスの設定\r
+ MySelf.innerText = PlayerMarks[CurrentPlayer]; //クリックされたボックスのテキストをクリックしたプレーヤーの記号にする\r
+\r
+ //MySelf.dataset.clicked = "true"; //ボックスの状態を「クリック済み」にする\r
+ //MySelf.dataset.player = CurrentPlayer; // チェックしたプレーヤーのIDをボックスに書き込む\r
+\r
+ MySelf.setAttribute("data-clicked", true) //ボックスの状態を「クリック済み」にする\r
+ MySelf.setAttribute("data-player", CurrentPlayer) // チェックしたプレーヤーのIDをボックスに書き込む\r
+\r
+ // ログ\r
+ //console.log(CurrentPlayer + "が " + MySelf.dataset.x + "," + MySelf.dataset.y + " をクリックしました")\r
+ console.log(CurrentPlayer + "が " + MySelf.getAttribute("data-x") + "," + MySelf.getAttribute("data-y") + " をクリックしました")\r
+\r
+ // 勝利判定を行う\r
+ if (Judgement()){\r
+ return;\r
+ }\r
+\r
+ // プレイヤーを変更する\r
+ ChangePlayer();\r
+\r
+ // 現在の情報を更新する\r
+ UpdateCurrentConfig();\r
+\r
+ // すべてチェックされた場合の処理\r
+ CheckedBox++;\r
+ if (CheckedBox == TableXNumber * TableYNumber){ // もしチェックされた数とマス目の数が等しいならば\r
+ Msg.innerText = "終了" // メッセージに終了と表示\r
+ GameEnded = true; // ゲームの状態を「終了」にする\r
+ }\r
+ }else{\r
+ console.log("既にクリックされています")\r
+ }\r
+ }\r
+}\r
+\r
+// プレーヤーを変更する処理\r
+var ChangePlayer = function(){\r
+ if (CurrentPlayer == PlayerNumer - 1){ // 今のプレーヤーが最後だったら\r
+ CurrentPlayer = 0; //最初のプレーヤーに戻る\r
+ }else{\r
+ CurrentPlayer++; //次のプレーヤーにする\r
+ }\r
+ console.log("プレイヤー" + CurrentPlayer + "の番です") //ログを表示する\r
+}\r
+\r
+// 現在の設定を表示する関数\r
+var UpdateCurrentConfig = function() {\r
+ // ゲーム設定を表示\r
+ var p1 = document.createElement("p") //ゲーム設定を表示する枠を作成\r
+ p1.innerText = "横: " + TableXNumber + "縦: " + TableYNumber // テキストを設定\r
+\r
+ // プレーヤー情報を表示\r
+ var p2 = document.createElement("p") // プレーヤー情報を表示する枠を作成\r
+ p2.innerText = "人数: " + PlayerNumer + "人 現在: " + PlayerMarks[CurrentPlayer]\r
+\r
+ // 作成した枠を文書に挿入\r
+ CurrentConfig.innerHTML = "" ; // 枠の中の文書を削除\r
+ CurrentConfig.appendChild(p1); // ゲーム設定を挿入\r
+ CurrentConfig.appendChild(p2); // プレーヤー情報を挿入\r
+}\r
+\r
+// 初回起動時に現在の設定を表示\r
+window.addEventListener("load", UpdateCurrentConfig)\r
+\r
+// リセットボタンが押されたときの処理\r
+ResetButton.addEventListener("click", function(){\r
+ location.reload();\r
+})\r
+\r
+// 初回起動時に設定のボックス内に初期設定を入れておく\r
+window.addEventListener("load", function(){\r
+ InputTableX.value = TableXNumber;\r
+ InputTableY.value = TableYNumber;\r
+ InputPlayerNumber.value = PlayerNumer;\r
+})\r
+\r
+// 適用ボタンが押された時の処理\r
+ApplyButton.addEventListener("click", function(){\r
+ // ゲームの状態をチェック\r
+ if (CheckedBox != 0){\r
+ Msg.innerText = "既にゲームが開始されています"\r
+ return;\r
+ }\r
+\r
+ // それぞれの状態を初期化\r
+ GameEnded = false;\r
+ CheckedBox = 0;\r
+ CurrentPlayer = 0;\r
+ Msg.innerText = "";\r
+\r
+ // 入力された内容を変数に反映\r
+ PlayerNumer = parseFloat(InputPlayerNumber.value);\r
+ TableXNumber = parseFloat(InputTableX.value);\r
+ TableYNumber = parseFloat(InputTableY.value);\r
+\r
+ // 数が整数でない場合にエラー\r
+ var ChkInt = Number.isInteger\r
+ if (! ChkInt(PlayerNumer) || ! ChkInt(TableXNumber) || ! ChkInt(TableXNumber)){\r
+ Msg.innerText = "全ての設定で整数を指定してください"\r
+ return;\r
+ }\r
+\r
+ // マス目の数が3以上ではない場合はエラー\r
+ //if(InputTableX.value >= 3 && InputTableY.value >= 3){\r
+ // TableXNumber = InputTableX.value;\r
+ // TableYNumber = InputTableY.value;\r
+ //}else{\r
+ // Msg.innerText = "3以上の整数を指定してください"\r
+ // return;\r
+ //}\r
+\r
+ if (TableXNumber < 3 || TableYNumber < 3){\r
+ Msg.innerText = "3以上の整数を指定してください"\r
+ return;\r
+ }\r
+\r
+ // プレーヤーの人数が定義されている数以上ならエラー\r
+ if (PlayerMarks.length < PlayerNumer){\r
+ Msg.innerText = "現在" + PlayerMarks.length + "以上の数は対応していません"\r
+ return;\r
+ }\r
+\r
+\r
+ // プレーヤーの数が2未満ならエラー\r
+ if (PlayerNumer < 2){\r
+ Msg.innerText = "2以上の整数を指定してください"\r
+ return;\r
+ }\r
+ \r
+ // ゲーム全体の初期化と表示されている設定を更新\r
+ InitilizeTable();\r
+ UpdateCurrentConfig();\r
+})\r
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="ja">\r
+<body>\r
+ <h2>Σを無理やり処理させてみよう</h2>\r
+ <img src="./siki.png" alt="">\r
+<code>\r
+<pre>\r
+ // 初期化\r
+ var answer=0\r
+ var count\r
+ \r
+ // 初項 第5項まで 1を加える\r
+ for (count=1; count<=5; count++){\r
+ console.log(answer + "+=" + "4 * " + count)\r
+ answer+= 4 * count;\r
+ // 4kの部分\r
+ }\r
+</pre>\r
+</code>\r
+ <p id="main"></p>\r
+\r
+ <h2>シグマを展開して計算させてみる（確認）</h2>\r
+ <p id="confirm"></p>\r
+ <script>\r
+ // 5\r
+ // Σ 4k を計算します\r
+ // k=1\r
+\r
+ // 4・1 + 4・2 + 4・3 + 4・4 + 4・5\r
+\r
+ // 初期化\r
+ var answer=0\r
+ var count\r
+ \r
+ // 初項 第5項まで 1を加える\r
+ for (count=1; count<=5; count++){\r
+ console.log(answer + "+=" + "4 * " + count)\r
+ answer+= 4 * count;\r
+ // 4kの部分\r
+ }\r
+\r
+ // 画面に表示\r
+ document.getElementById("main").innerText=answer\r
+\r
+ // 確認用の式\r
+ document.getElementById("confirm").innerText=`4・1 + 4・2 + 4・3 + 4・4 + 4・5 = ${4*1+4*2+4*3+4*4+4*5}`\r
+\r
+\r
+ </script>\r
+</body>\r
+</html>\r
body{\r
margin: 0; /* 外側の空白を0にする */\r
min-width: 320px; /* 最初の横幅を設定 （これを設定しないとスマホで表示が崩れてしまう）*/\r
+ width: 500px; /* 横幅を50%にする */\r
+\r
+ /* 左右を中央揃え */\r
+ margin-left: auto; \r
+ margin-right: auto;\r
+ text-align: center;\r
}\r
\r
html{\r
color: black; /* 文字色を黒にする */\r
}\r
\r
-/* ゲーム本体の見た目 */\r
-\r
-#maintable tr{\r
- width: 50%; /*ゲーム本体の横幅を画面の半分に設定*/\r
-}\r
-\r
/* ボックス1つ1つの見た目 */\r
#maintable td{\r
background-color: #b5f7f3; /* 背景の色を青に設定 */\r
color: orange; /* 文字の色をオレンジにする*/\r
font-weight: bolder; /* 文字を太くする*/\r
\r
- margin: 50px; /* ボックス同士の空白を画面のドット50個分に設定 */\r
-\r
width: 100px; /* ボックスの幅を画面のドット100個に設定 */\r
height: 100px; /* ボックスの高さを画面のドット100個に設定 */\r
\r
text-align: center; /* 文字を左右中央に配置 */\r
}\r
\r
-\r
-\r
OSDN Git Service
