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
Changes from 18 commits
b37a5dc
cd6cb91
1e2527a
8581561
a0ce287
3803f7b
e7405a4
61bb46c
01841a9
d0ec25e
feb0a51
3ee17ce
73d4a87
dd7fcde
a572aa0
99cb851
f048822
065d0fc
ef45915
d274444
b1a45a2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
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", (e) => { | ||
// debugger; | ||
// セルの中身があったらそのまま | ||
if (cells[index]) { | ||
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); | ||
doneFunc(board); | ||
} else if (count === 8) { | ||
state.innerHTML = "draw"; | ||
} | ||
|
||
// 揃わずに全てのセルが埋まったら メッセージを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"); | ||
} | ||
}; | ||
|
||
const doneFunc = (target) => { | ||
target.classList.toggle("set"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ゲームが終わっているかは dom に情報を残すのではなく、変数で定義してあげると良いかと思います。 |
||
}; | ||
|
||
// どちらかが揃ったら メッセージをwinに | ||
const message = (mark) => { | ||
state.innerHTML = `${mark} win`; | ||
}; | ||
|
||
//リセットボタンでリロード | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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`;
}; There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @version-1 相談させていただけますでしょうか。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. すみません。 ご指摘のように cell.innerHTML = inputValue が正しいです。 ここを直しても全ては動かず他にも誤りがありますね。。。 ちょうど良いデバックの教材かと思いますので、どこが良くないのか見つけて修正できると良いと思います。ポイントとしては、「Jiro がここを触っていたからここかな?」という探し方よりはdebugger を使って、「この行ではこの値がこうなっているからここが間違っている」というように原因を特定できると良いです。 |
||
jsReset.addEventListener("click", () => { | ||
location.reload(); | ||
}); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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 |
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 |
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 |
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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
*, *:before, *:after | ||
box-sizing: border-box |
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 |
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.
コメントの場所が違いますね。