Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add Feature function.js (feature-function.js) #2

Merged
merged 21 commits into from Apr 1, 2024
Merged

add Feature function.js (feature-function.js) #2

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b37a5dc
add baseをコーディング中(feature-base)
yko-git Mar 19, 2024
cd6cb91
fix ベースの実装中
yko-git Mar 20, 2024
1e2527a
add function.js
yko-git Mar 20, 2024
8581561
fix function.js (itemsにdata-set追加)
yko-git Mar 20, 2024
a0ce287
fix function.js (pointer-events追加)
yko-git Mar 20, 2024
3803f7b
fix function.js (処理を分けた書き方に直し中)
yko-git Mar 21, 2024
e7405a4
fix function.js (click後の値を取得する検証)
yko-git Mar 21, 2024
61bb46c
fix function.js (function.js検証中)
yko-git Mar 23, 2024
01841a9
fix function.js
yko-git Mar 23, 2024
d0ec25e
fix function.js
yko-git Mar 23, 2024
feb0a51
fix function.js (○を変更)
yko-git Mar 23, 2024
3ee17ce
fix function.js (draw判定修正)
yko-git Mar 23, 2024
73d4a87
fix function.js (setクラス追加)
yko-git Mar 24, 2024
dd7fcde
fix function.js (関数型プログラミング検証中)
yko-git Mar 25, 2024
a572aa0
fix function.js (クロージャーの検証中、countの値を条件分岐したい)
yko-git Mar 26, 2024
99cb851
fix function.js (クロージャー検証中)
yko-git Mar 27, 2024
f048822
fix function.js
yko-git Mar 29, 2024
065d0fc
fix function.js
yko-git Mar 29, 2024
ef45915
fix function.js (終了判定を変数に変更)
yko-git Mar 30, 2024
d274444
fix function.js (判定をsomeメソッドで実装に変更)
yko-git Mar 30, 2024
b1a45a2
fix function.js(someメソッド内の記述をシンプルに変更)
yko-git Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 54 additions & 11 deletions index.html
View file
Open in desktop
@@ -1,14 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tic Tac Toe</title>
<link href="stylesheets/index.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<!-- write your html -->
</div>
<script type="text/javascript" src="js/function.js"></script>
</body>
<head>
<meta charset="utf-8" />
<title>Tic Tac Toe</title>
<link
href="stylesheets/index.css"
rel="stylesheet"
type="text/css"
media="all"
/>
</head>
<body>
<div class="l-container">
<!-- write your html -->
<main class="l-main">
<header>
<h1>TIC TAC TOE</h1>
</header>
<div class="items">
<div class="items-item circle is-active">○</div>
<div class="items-item cross">×</div>
</div>
<div class="l-board">
<table class="table js-table">
<tbody>
<tr class="row">
<td class="cell js-cell" data-key="1"></td>
<td class="cell js-cell" data-key="2"></td>
<td class="cell js-cell" data-key="3"></td>
</tr>
<tr class="row">
<td class="cell js-cell" data-key="4"></td>
<td class="cell js-cell" data-key="5"></td>
<td class="cell js-cell" data-key="6"></td>
</tr>
<tr class="row">
<td class="cell js-cell" data-key="7"></td>
<td class="cell js-cell" data-key="8"></td>
<td class="cell js-cell" data-key="9"></td>
</tr>
</tbody>
</table>
</div>

<div class="l-footer">
<div class="state js-state">starting...</div>
<div>
<a class="btn btn-restart">RESTART</a>
</div>
</div>
</div>
</main>
</div>
<script type="text/javascript" src="js/function.js"></script>
</body>
</html>
108 changes: 108 additions & 0 deletions js/function.js
View file
Open in desktop
@@ -0,0 +1,108 @@
const itemsItem = document.querySelectorAll(".items-item");
const board = document.querySelector(".l-board");
const jsCell = document.querySelectorAll(".js-cell");
const state = document.querySelector(".js-state");
const jsReset = document.querySelector(".btn-restart");
let done = false;
const winPatterns = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];

const cells = ["", "", "", "", "", "", "", "", ""];

const countFunc = (() => {
let count = 0;

return {
inner: () => {
return count++;
},
};
})();

// イベントの登録
jsCell.forEach(function (cell, index) {
cell.addEventListener("click", () => {
// セルの中身がある、もしくはdoneがtrueだったら処理せずそのまま
if (cells[index] || done) {
return;
}
// countFunc関数をcountへ代入
const count = countFunc.inner();

// countの値の奇数判定
const circleTurn = count % 2 === 0;
// 奇数だったら⚪︎そうでなければ×
const inputValue = circleTurn ? "○" : "×";

cell.innerHTML = inputValue;

// 判定結果をinnerHTMLで出力
cells[index] = inputValue;

// itemsItemにtoggleTurn関数を実行
toggleTurn(itemsItem);

// cellsを引数にしたjudgeをjudgedに代入
const judged = judge(cells);

// judgedの結果で判定
if (judged) {
message(inputValue);
done = true;
} else if (count === 8) {
// 揃わずに全てのセルが埋まったら メッセージをdrawに
state.innerHTML = "draw";
}
});
});

// 判定
const judge = (judgeCell) => {
const judgeInner = winPatterns.some((line) => {
if (
judgeCell[line[0]] === "○" &&
judgeCell[line[1]] === "○" &&
judgeCell[line[2]] === "○"
) {
return true;
}
if (
judgeCell[line[0]] === "×" &&
judgeCell[line[1]] === "×" &&
judgeCell[line[2]] === "×"
) {
return true;
}
yko-git marked this conversation as resolved.
Show resolved Hide resolved
});
return judgeInner;
};

// セルをクリックするごとにitemsのactiveを切り替える
const toggleTurn = (items) => {
for (let item of items) {
item.classList.toggle("is-active");
}
};

// const doneFunc = (target) => {
// debugger;
// target.classList.add("set");
// };

// どちらかが揃ったら メッセージをwinに
const message = (mark) => {
state.innerHTML = `${mark} win`;
};

//リセットボタンでリロード
Copy link

@version-1 version-1 Mar 27, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

const itemsItem = document.querySelectorAll(".items-item");
const board = document.querySelector(".l-board");
const jsCell = document.querySelectorAll(".js-cell");
const state = document.querySelector(".js-state");
const jsReset = document.querySelector(".btn-restart");
const winPatterns = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6],
];

const cells = ['', '', '', '', '', '', '', '', '']

const countFunc = (() => {
  let count = 0;

  return {
    inner: () => {
      return count++;
    },
  };
})();

// イベントの登録
jsCell.forEach(function (cell, index) {
  cell.addEventListener("click", () => {
    if (cells[index]) {
       return
    }
    
    const count = countFunc.inner();
    
    const circleTurn = count % 2 !== 0
    const inputValue = circleTurn ? '◯' : 'x'
    
    ele.innerHTML = inputValue
    cells[index] = inputValue
    
    toggleTurn(itemsItem);

    const judged = judge(cells);
    
    if (judged) {
       message(inputValue)
    }
    
     // 揃わずに全てのセルが埋まったら メッセージをdrawに
     if (countFunc.inner() === 9) {
       state.innerHTML = "draw";
     }
  });
});

// 判定
const judge = (judgeCell) => {
  for (let i = 0; i < winPatterns.length; i++) {
    if (
      judgeCell[winPatterns[i][0]] === "○" &&
      judgeCell[winPatterns[i][1]] === "○" &&
      judgeCell[winPatterns[i][2]] === "○"
    ) {
      return true;
    }
    
    if (
      judgeCell[winPatterns[i][0]] === "×" &&
      judgeCell[winPatterns[i][1]] === "×" &&
      judgeCell[winPatterns[i][2]] === "×"
    ) {
      return true;
    }
  }
  
  return false
};

// セルをクリックするごとにitemsのactiveを切り替える
const toggleTurn = (items) => {
  for (let item of items) {
    item.classList.toggle("is-active");
  }
};

// どちらかが揃ったら メッセージをwinに
const message = (mark) => {
  state.innerHTML = `${mark} win`;
};

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@version-1 相談させていただけますでしょうか。
ele.innerHTML = inputValue
はどういった意図で設定しているのかわからず教えていただけますでしょうか。
eleはjsCellのforEachの引数celをイメージしているのですが、
cell.innerHTML = inputValue;
だと動きませんでした。

Copy link

@version-1 version-1 Mar 29, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すみません。 ご指摘のように

cell.innerHTML = inputValue

が正しいです。

ここを直しても全ては動かず他にも誤りがありますね。。。

ちょうど良いデバックの教材かと思いますので、どこが良くないのか見つけて修正できると良いと思います。ポイントとしては、「Jiro がここを触っていたからここかな？」という探し方よりはdebugger を使って、「この行ではこの値がこうなっているからここが間違っている」というように原因を特定できると良いです。

jsReset.addEventListener("click", () => {
location.reload();
});
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -17,6 +17,9 @@
},
"homepage": "https://github.com/version-1/js-tic-tac-toe#readme",
"devDependencies": {
"sass": "^1.57.1"
"sass": "^1.72.0"
},
"dependencies": {
"destyle.css": "^4.0.1"
}
}
1 change: 1 addition & 0 deletions stylesheets/index.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions stylesheets/index.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions stylesheets/sass/base.sass
View file
Open in desktop
@@ -0,0 +1,11 @@
@use 'variable' as v

html
background: v.$background-color
font: 100% v.$font-stack
font-size: 15px
line-height: 1.5

h1
font-size: 1.2rem
text-align: center
7 changes: 4 additions & 3 deletions stylesheets/sass/index.sass
View file
Open in desktop
@@ -1,4 +1,5 @@
@use 'reset'
@use 'variable' as v

html
background: v.$background-color
@use 'base' as b
@use 'layout' as l
@use 'modules' as m
12 changes: 12 additions & 0 deletions stylesheets/sass/layout.sass
View file
Open in desktop
@@ -0,0 +1,12 @@
.l-container
display: flex
flex-direction: column
align-items: center
justify-content: center
height: 100vh

.l-board
padding: 16px

.l-footer
text-align: center
39 changes: 39 additions & 0 deletions stylesheets/sass/modules.sass
View file
Open in desktop
@@ -0,0 +1,39 @@
.items
width: 100%
padding: 8px 16px
display: flex
justify-content: flex-start
font-size: 1.5rem
text-align: center
&-item
width: 100%
flex-grow: 1
padding: 8px
.is-active
border-bottom: 4px solid black

.table
background: #000
border: 2px solid #fefefe
margin: 0 auto
.cell
background: #fefefe
height: 48px
width: 48px
cursor: pointer
text-align: center
font-size: 2rem

.state
padding: 8px

.btn
display: inline-block
width: 100%
&-restart
border: 2px solid #000
border-radius: 4px
font-weight: bold
cursor: pointer
.set
pointer-events: none
2 changes: 2 additions & 0 deletions stylesheets/sass/reset.sass
View file
Open in desktop
@@ -0,0 +1,2 @@
*, *:before, *:after
box-sizing: border-box
3 changes: 2 additions & 1 deletion stylesheets/sass/variable.sass
View file
Open in desktop
@@ -1 +1,2 @@
$background-color: red
$background-color: white
$font-stack: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif