[Javascript] 2차원 배열 만들기
위와 같은 3 * 3 표를 이용한 자바스크립트 틱택토 게임을 만들려면 어떻게 해야할까?
틱택토 게임은 오목의 축소판인 삼목이다.
자바스크립트로 틱택토 게임을 만들려면 이차원 배열을 만들 줄 알아야한다.
배열 안에 배열이 있을 때 그것을 이차원 배열이라고 한다. 배열이 몇번 중첩되었는느냐에 따라 몇 차원 배열인지 정해진다. 표와 비슷한 모양이기 때문에 실무에서 많이 사용된다.
이차원 배열로 데이터를 관리하는 동시에,
배열 데이터를 HTML 화면에 그대로 표시하는 코드를 짜보자.
1. 이차원 배열 만들어보기
6* 3을 만들어보자. 배열의 요소는 모두 0 이다.
2차원 배열은 아래와 같은 모양이 나와야 한다.
arr = [
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0]
]
const array = [];
for(let i = 0; i < 3; i++){
const cells = [];
for(let j = 0; j < 6 j++){
cells.push(0);
}
array.push(cells);
}
console.log(array);
2. 이차원 배열을 화면에 표시해보기
화면에 동적으로 table 요소를 그리고 이차원 배열(3 * 3)에 테이블 요소인 td 들을 담아 보자.
html
<div id="container">
</div>
script
const $container = document.querySelector('#container');
const array = [];
const $table = document.createElement('table');
for(let i = 0; i < 3; i++){
const $tr = document.createElement('tr');
const cells = [];
for(let j = 0; j < 3; j++){
const $td = document.createElement('td');
$tr.append($td);
cells.push($td);
}
$table.append($tr);
array.push(cells);
}
$container.append($table);
console.log(array);
크게 두가지로 나눠서 생각하면 되는데, 하나는 배열에 요소를 담는 행위,
다른 하나는 화면에 나타내는 행위이다.
$tr.append($td);
...
$table.append($tr);
...
$container.append($table)
는 화면에 나타내기 위한 코드이고
const array = [];
...
const cells = [];
...
cells.push($td);
...
array.push(cells);
는 배열에 담기 위한 행위이다.
위의 코드를 출력해보면 화면에는 33 표가 생기고,
console 에는 33 이차원 배열의 모양을 띈 Array 가 찍힌다.
Author And Source
이 문제에 관하여([Javascript] 2차원 배열 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@favorcho/Javascript-2차원-배열-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)