[JS] Tic Tac Toe - 1
Tic Tac Toe
3 x 3の三目ゲームをしたいです.
今回は
1. MockUp
HTMLの要素をJavaScriptとして作成して追加する前に、ハードコーディングでディレクトリ更新データを作成します.
JavaScriptコードで一連のタグを作成しました.
JavaScriptで3 x 3版を実現するために,2次元配列を作成した.
3 x 3の三目ゲームをしたいです.
今回は
mark upではなく、domオブジェクトを使用してtagをjavascriptコードに1つずつ生成して追加します.1. MockUp
HTMLの要素をJavaScriptとして作成して追加する前に、ハードコーディングでディレクトリ更新データを作成します.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js" defer></script>
<title>Tic Tac Toe!</title>
<style>
td {
border: 1px solid black;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>JavaScriptコードで一連のタグを作成しました.
JavaScriptで3 x 3版を実現するために,2次元配列を作成した.
// 브라우저에 3x3 테이블 만들기위한 태그
let table = document.createElement('table');
// 자바스크립트에서 3x3의 데이터자료를 구현하기위한 2차원 배열
let tictactoe = [];
// init => table, tr, td를 만들어 화면에 표시하고, 2차원배열에 tr추가하기
(() => {
for (let i = 0; i < 3; i++) {
let row = document.createElement('tr');
let rowArray = [];
for (let j = 0; j < 3; j++) {
let coloum = document.createElement('td');
rowArray.push(coloum);
row.append(coloum);
}
tictactoe.push(rowArray);
table.append(row);
}
document.body.append(table);
})();
console.log(tictactoe);Reference
この問題について([JS] Tic Tac Toe - 1), 我々は、より多くの情報をここで見つけました https://velog.io/@wldns12378/JS-Tic-Tac-Toe-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol