[과제] 볼링게임(코드)
[ 테이블 생성 ]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bowling</title>
<style>
table {
border-collapse: collapse;
width: 600px;
}
td, th {
border: 1px solid black;
width: 20px;
height: 20px;
}
span{
border: 1px solid black;
}
</style>
</head>
<body>
</body>
<script>
// 테이블생성
document.write('<table border = "1">');
for (let i = 0; i < 3; i++) {
document.write('<tr>');
if(i===0){
for (let j = 0; j < 10; j++) {
document.write('<th>' + (j+1) + '</th>');
}
} else if(i===1){
for (let j = 0; j < 10; j++) {
document.write('<td class="score"><span class="firstScore"></span><span class="secondScore"></span><span class="bonusScore" data-value="'+j+'"></span></td>');
}
} else {
for (let j = 0; j < 10; j++) {
document.write('<td class="totalScore"></td>');
}
}
document.write('</tr>');
}
document.write('</table>');
</script>
</html>
다른 방법으로 생성
// 테이블 생성
let table = document.createElement('table');
table.classList.add('table');
for (let i = 0; i < 3; i++) {
let row = table.insertRow();
for (let j = 0; j < 10; j++) {
let cell = row.insertCell();
if(i===0){
cell.textContent = j+1;
} else if (i===1){
cell.classList.add("score");
let span1 = document.createElement('span');
span1.classList.add("firstScore");
cell.appendChild(span1);
let span2 = document.createElement('span');
span2.classList.add("secondScore");
cell.appendChild(span2);
let span3 = document.createElement('span');
span3.classList.add("bonusScore");
if(j===9){
cell.appendChild(span3);
}
} else {
cell.classList.add("totalScore");
}
}
}
document.body.appendChild(table);
let firstScore = document.getElementsByClassName("firstScore");
let secondScore = document.getElementsByClassName("secondScore");
let bonusScore = document.getElementsByClassName("bonusScore");
let totalScore = document.getElementsByClassName("totalScore");
위의 두 방식 모두 class 이름을 지정,
getElementsByClassName로 가져오게 되면 HTMLCollection 으로 반환한다.
반환된 HTMLCollection는 해당 클래스 이름을 가진 모든 요소를 포함하기 때문에 배열처럼 반복문을 사용해 값을 넣어줬다.
단, 유사배열이여서 배열과 비슷하게 동작하지만 하지만 배열은 아니기 때문에 배열메서드를 사용할 수 없다.
( 반복문 외부에서는 해당 클래스 이름을 가진 요소가 하나여도 innerHTML 사용이 안된다.)
따라서, 배열로 변환한 후 배열메서드를 사용해야 한다.
Array.from() 메서드 사용
[ 랜덤정수 ]
for (let n = 1; n <= 10; n++) {
let FrameNum = randomNum(n);
console.log(FrameNum);
}
function randomNum(n){
let FrameNum1 = Math.floor(Math.random() * 11);
let FrameNum2 = Math.floor(Math.random() * (11-FrameNum1));
let FrameNum = [FrameNum1, FrameNum2]
return FrameNum;
}
함수로 정리
// 랜덤정수생성(최댓값)
function randomNum(max){
let number = Math.floor(Math.random() * (max+1));
return number;
}
게임횟수 옵션 선택 (1~ )
버튼 클릭 => 선택한수만큼 실행 & 버튼 비활성화
옵션 재선택 => 초기화 & 버튼 활성화
버튼 클릭할때마다 테이블 생성 함수가 실행되도록 설정했는데
playing()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="playing.js"></script>
<link rel="stylesheet" type="text/css" href="bowling.css">
<title>Document</title>
</head>
<body>
<div id="container">
<label for="bowling">게임 횟수</label>
<select id="bowling" onchange="play(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button id="playButton">확인</button>
</div>
</body>
<script>
// 실행횟수
let optionValue = 1;
function play(option){
optionValue = option;
playbutton.disabled = false;
return optionValue;
}
// 버튼클릭
let playbutton = document.getElementById("playButton");
playbutton.addEventListener("click", showTable);
function showTable(){
let option = optionValue;
while(option > 0){
playing();
option--;
}
playbutton.disabled = true;
}
</script>
</html>
값을 넣기 위해 테이블 요소 선택을 getElementsByClassName 으로 했었다.
let firstScore = document.getElementsByClassName("firstScore");
let secondScore = document.getElementsByClassName("secondScore");
let bonusScore = document.querySelector(".bonusScore");
let totalScore = document.getElementsByClassName("totalScore");
let showTotal = document.querySelector(".showTotal");
그러면 이후에 여러개의 테이블이 생성되더라도 이전 테이블과 클래스 이름이 동일하기 때문에
새로 생성된 값들이 계속 첫번째 테이블에 덮어씌워진다.
버튼 클릭해서 테이블 생성 함수가 실행할 때 매개변수로 option값을 가져가도록 설정.
playing(option) 함수 실행 횟수(생성할 테이블 갯수)
function showTable(){
let option = optionValue;
while(option > 0){
playing(option);
option--;
}
playbutton.disabled = true;
}
테이블 생성함수가 실행되면서 테이블을 만들때 이 옵션값을 각 테이블의 클래스 이름으로 넣어줬다.
table.classList.add('table'+option);
첫번째 테이블 class 이름 : table1
두번째 테이블 class 이름 : table2
요런식으로
각 요소를 잡을때도 테이블 별로 구분해주면서 값이 덮어씌워지는 문제점 해결.
let firstScore = document.querySelectorAll(".table"+option+" td span:first-child");
let secondScore = document.querySelectorAll(".table"+option+" td span:nth-child(2)");
let bonusScore = document.querySelector(".table"+option+" .bonusScore");
let totalScore = document.querySelectorAll(".table"+option+" .totalScore");
let showTotal = document.querySelector(".table"+option+" .showTotal");
코드 다시 정리
볼링게임(코드2)
html, js, css 파일로 분리 [ bowling.html ] body부분 게임 횟수 선택 확인 reload script 부분 [ playing.js ] (사용한 함수들) randomNum(max) 입력값 => max정수값 출력값 => max까지의 랜덤숫자 createScore(n) 입력값 => n (
phyho.tistory.com