forked from version1-workspace/ws-0300-js-tic-tac-toe
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.
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
add Feature function.js (feature-function.js) #2
Merged
Merged
Changes from 16 commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
b37a5dc
add baseをコーディング中(feature-base)
yko-git cd6cb91
fix ベースの実装中
yko-git 1e2527a
add function.js
yko-git 8581561
fix function.js (itemsにdata-set追加)
yko-git a0ce287
fix function.js (pointer-events追加)
yko-git 3803f7b
fix function.js (処理を分けた書き方に直し中)
yko-git e7405a4
fix function.js (click後の値を取得する検証)
yko-git 61bb46c
fix function.js (function.js検証中)
yko-git 01841a9
fix function.js
yko-git d0ec25e
fix function.js
yko-git feb0a51
fix function.js (○を変更)
yko-git 3ee17ce
fix function.js (draw判定修正)
yko-git 73d4a87
fix function.js (setクラス追加)
yko-git dd7fcde
fix function.js (関数型プログラミング検証中)
yko-git a572aa0
fix function.js (クロージャーの検証中、countの値を条件分岐したい)
yko-git 99cb851
fix function.js (クロージャー検証中)
yko-git f048822
fix function.js
yko-git 065d0fc
fix function.js
yko-git ef45915
fix function.js (終了判定を変数に変更)
yko-git d274444
fix function.js (判定をsomeメソッドで実装に変更)
yko-git b1a45a2
fix function.js(someメソッド内の記述をシンプルに変更)
yko-git File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
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 win = [ | ||
[0, 1, 2], | ||
[3, 4, 5], | ||
[6, 7, 8], | ||
[0, 3, 6], | ||
[1, 4, 7], | ||
[2, 5, 8], | ||
[0, 4, 8], | ||
[2, 4, 6], | ||
]; | ||
|
||
jsCell.forEach(function (cell) { | ||
cell.addEventListener("click", () => { | ||
addChild(cell); | ||
|
||
addClass(itemsItem); | ||
|
||
judge(jsCell); | ||
}); | ||
}); | ||
|
||
// let clickCount = 0; | ||
|
||
const countFunc = (() => { | ||
let count = 0; | ||
|
||
return { | ||
inner: () => { | ||
return count++; | ||
}, | ||
}; | ||
})(); | ||
|
||
// セルをクリックすると○とバツが交互に出力される | ||
const addChild = (targetChild) => { | ||
countFunc.inner(); | ||
// clickCount++; | ||
|
||
if (countFunc.inner() % 2 === 0) { | ||
targetChild.innerHTML = "×"; | ||
targetChild.classList.add("set"); | ||
} else { | ||
targetChild.innerHTML = "○"; | ||
targetChild.classList.add("set"); | ||
} | ||
}; | ||
|
||
// 判定 | ||
const judge = (judgeCell) => { | ||
for (let i = 0; i < win.length; i++) { | ||
if ( | ||
judgeCell[win[i][0]].innerHTML === "○" && | ||
judgeCell[win[i][1]].innerHTML === "○" && | ||
judgeCell[win[i][2]].innerHTML === "○" | ||
) { | ||
return message("○"); | ||
} else if ( | ||
judgeCell[win[i][0]].innerHTML === "×" && | ||
judgeCell[win[i][1]].innerHTML === "×" && | ||
judgeCell[win[i][2]].innerHTML === "×" | ||
) { | ||
return message("×"); | ||
} | ||
} | ||
// 揃わずに全てのセルが埋まったら メッセージをdrawに | ||
if (countFunc.inner() === 9) { | ||
state.innerHTML = "draw"; | ||
} | ||
}; | ||
|
||
// セルをクリックするごとにitemsのactiveを切り替える | ||
const addClass = (items) => { | ||
for (let item of items) { | ||
item.classList.toggle("is-active"); | ||
} | ||
}; | ||
|
||
// どちらかが揃ったら メッセージをwinに | ||
const message = (mark) => { | ||
state.innerHTML = `${mark} win`; | ||
board.classList.add("set"); | ||
}; | ||
|
||
//リセットボタンでリロード | ||
jsReset.addEventListener("click", () => { | ||
location.reload(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
*, *:before, *:after | ||
box-sizing: border-box |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
$background-color: red | ||
$background-color: white | ||
$font-stack: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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;
だと動きませんでした。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
すみません。 ご指摘のように
が正しいです。
ここを直しても全ては動かず他にも誤りがありますね。。。
ちょうど良いデバックの教材かと思いますので、どこが良くないのか見つけて修正できると良いと思います。ポイントとしては、「Jiro がここを触っていたからここかな?」という探し方よりはdebugger を使って、「この行ではこの値がこうなっているからここが間違っている」というように原因を特定できると良いです。