자바스크립트 스터디를 시작하면서 만든 가위바위보 게임이다!
너무 유명한 토이프로젝트이기도 하고, 다른 사람들에게는 너무 간단한 구현일 것 같아서..
잠시 고민했지만, 그래도 기록하는 것이 스스로에게 좋을 것 같아서 올려본다.😊
-
게임 규칙 (기본 기능)
- 사용자가 가위바위보 중 한가지 값을 선택한다.
- 컴퓨터에서 랜덤으로 가위바위보 중 하나의 값이 출력된다.
- 두개의 값을 비교하여 점수가 업데이트 된다.
-
구현 기능
- 컴퓨터에서 랜덤으로 가위바위보 중 하나의 값이 출력된다.
- 사용자가 선택한 값과 컴퓨터가 선택한 값을 비교하여 점수가 업데이트 된다.
- 이긴 쪽의 backgroundColor 가 변경되어, 사용자가 쉽게 파악할 수 있도록 하였다.
- reset 버튼을 누르면 초기상태로 변경된다.
-
아쉬운 점
- 컴퓨터 화면에서 가위바위보 그림이 순서대로 변하고 있는 화면을 구현하지 못하였다.
- 버튼을 누른 후, 결과가 나오기 전에 버튼 기능을 정지하는 것을 생각하지 못하였다.
✅ event.target.value
function btn_Click () {
for(var i = 0; i < btn.length; i ++) {
btn[i].onclick = function(e) {
if(e.target.value==3) {
u_item.innerText = "?";
com_item.innerText="?";
user_score.innerText=0;
com_score.innerText=0;
document.getElementById("userbackground").style.backgroundColor="white";
document.getElementById("computerbackground").style.backgroundColor="white";
}
else{
com_random();
User(e.target.value);
user_num = e.target.value;
setTimeout(() => {
result(user_num, randomNum);
}, 500);
}
}
}}사용자가 어떤 버튼을 눌렀는지 구분 할 수있게 하는것이 첫번째 문제였다.
처음에는 버튼들 마다 각각 변수들을 다르게 해서 if문을 이용해서 구현을 할려고했지만, 코드가 불필요하게 길어지는 것 같았다. 그래서 처음에는 버튼들을 모두 받아와서, i값에 따라 구분하여 구현하는 것을 계획으로 세웠지만, 뭔가 value 값을 따로 주어 이것을 이용해서 구현하면 어떨까 하는 생각이 들었다. 이것과 관련해 책 예제들을 찾아보던 중에 event.target 을 발견했다.
event.target 은 이벤트가 발생한 대상 객체를 가리킨다고 생각을 하면된다. (MDN 에 있는 예시를 통해 조금 더 쉽게 이해가 가능하다.)
event.target.value 를 통해 버튼의 value 값을 가져올 수 있었고, 좀 더 쉽게 구현이 가능했다.
✅ style.backgroundColor
구현을 마무리하고 나서 든 생각이 '누가 이겼는지 쉽게 구분 되지 않는다.' 였다.
물론 바뀌는 점수들을 통해 알 수 있었지만, 한 눈에 구분이 되었으면 좋겠다! 하는 생각이 들었다. 이긴 쪽의 배경색상이 바뀌면 좋겠다는 생각이 들었고, style.backgroundColor 을 이용하여 색상변경 효과를 주었다.
처음으로 자바스크립트를 배우고 있는 나에게는 어려운 토이프로젝트였다..😭
하지만, 토이프로젝트를 하면서 배운것들을 한번 더 써보게 되고, 많은 것들을 배우게 되는 것 같다. 앞으로도 꾸준히 열심히 해야겠다는 생각이 들었다! 💪
