2021. 1. 19. 12:31ㆍFront-end/Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>겜블링 게임</title>
<style>
#numberbox{
font-size: 100px;
border : 1px solid rosybrown;
background-color: pink;
display: flex;
width: 250px;
justify-content: space-around;
color: blue;
}
#resultArea{
margin-top: 20px;
font: italic bold 20px consolas,sans-serif;
color: magenta;
}
</style>
<script>
var clickNumberA=0;
var clickNumberB=0;
var clickNumberC=0;
var n1 = Math.floor(Math.random()*3);
var n2 = Math.floor(Math.random()*3);
var n3 = Math.floor(Math.random()*3);
function changeA(obj){
if(clickNumberA == 0)
{
obj.innerHTML = n1;
clickNumberA = 1;
obj.style.color = "yellow";
}else{
alert("첫번째 숫자는 이미 클릭 되었습니다.");
}
};
function changeB(obj){
if(clickNumberA == 1){
if(clickNumberB == 0)
{
obj.innerHTML = n2;
clickNumberB = 1;
obj.style.color="yellow";
}else{
alert("두번째 숫자는 이미 클릭 되었습니다.");
}
}else{
alert("첫번째 숫자부터 클릭해주세요!");
}
}
function changeC(obj){
if(clickNumberA == 1 && clickNumberB == 1){
if(clickNumberC == 0){
obj.innerHTML = n3;
clickNumberC = 1;
obj.style.color="yellow";
}else{
alert("눌렀당꼐");
}
var resultText = document.getElementById("resultArea");
if(n1 === n2 && n1 === n3){
resultText.innerHTML = "Success(click here to do again)";
}
else{
resultText.innerHTML = "fail(click here to do again)";
}
}else if(clickNumberA == 0){
alert("첫번째 숫자부터 클릭해주세요!");
}else if(clickNumberB == 0){
alert("두번째 숫자부터 클릭해주세요!");
}
}
function replay(){
location.reload();
}
</script>
</head>
<body>
<h3>겜블링 게임</h3>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.</p>
<hr>
<div id="numberbox">
<div id="num1" onclick="changeA(this)">0</div>
<div id="num2" onclick="changeB(this)">0</div>
<div id="num3" onclick="changeC(this)">0</div>
</div>
<div id="resultArea" onclick="replay()"></div>
</body>
</html>문제에 나와있는 기능말고 내가 직접 더 추가해보았다.
처음 숫자가 0으로 세팅되어 있는데 클릭을 했는데도 만약 0이면 이게 클릭이 된건지 아닌지 잘 모르겠어서
클릭이 안 된 숫자는 파란색, 이미 클릭된 숫자는 노란색으로 표시하게 했고
클릭 횟수를 나타내는 변수를 지정하여 한 숫자는 한 번만 클릭이 가능하도록 두번째 클릭부터는 alert 창이 뜨도록 했다.
그리고 각각의 숫자들은 나란히 정렬해야 하므로 div 안에 span으로 놓을 수도 있었지만,CSS에서 flex를 배웠던게 생각나서 한 번 사용해 보았는데 justify-content를 space-around를 통해 간격을 예쁘게 잘 줄 수 있었고 매우 편리했다.
책이나 강의에 나온 예제를 따라 치는 것은 쉬웠지만 문제를 직접 해결해보니 부족함이 많이 존재했다.
지역변수와 전역변수에 대한 학습이 제대로 되어있지 않은 것 같았다. 처음에는 n1,n2,n3 변수를 모르고 함수 안에다가 선언했었는데 changeC 함수에서 n1과 n2를 n3과 비교하려 하니 지역변수여서 안됐었다. 그래서 전역변수로 블록 바깥에 선언을 하고 나니 해결이 되었다. 그래도 비교적 빠른 시간 안에 왜 코드가 작동하지 않는지 스스로 문제점을 찾을 수 있어서 뿌듯했다.
+) 순서대로 눌러야 하는데 순서에 맞지 않게 눌렀을 경우 클릭이 적용이 되지 않고 경고창이 뜨도록 하는 코드를 추가했다.
(예를 들어 첫번째숫자-두번째숫자-세번째숫자 순으로 눌러야 하는데
처음부터 두번째숫자 혹은 세번째 숫자를 눌렀을 경우 "첫번째 숫자부터 눌러주세요"하는 코드가 실행되도록 하고,
첫번째 숫자를 누른 후 바로 세번째 숫자를 눌렀을 경우 "두번째 숫자부터 눌러주세요" 코드가 나오도록 함)
*** 위의 코드는 모범 답안이 아니라 개인이 직접 작성한 것으로 부족함이 존재할 수 있고
보다 더 깔끔하고 정확한 코드가 있을 수 있습니다.
'Front-end > Javascript' 카테고리의 다른 글
| [객체]2. HTML DOM 객체 - querySelector() , querySelectorAll() (0) | 2021.01.19 |
|---|---|
| [함수] 함수 - var, let, const (0) | 2021.01.19 |
| [객체] 2. HTML DOM 객체 - 4) HTML 문서의 동적 구성 (0) | 2021.01.18 |
| [객체] 2. HTML DOM 객체 - 3) document 객체 (0) | 2021.01.18 |
| [객체] 2. HTML DOM 객체 - 2) DOM 객체 다루기 (0) | 2021.01.18 |