가위바위보 게임을 만들어 보았다. 이미지는 이미지스프라이트와 객체 딕션너리를 이용해 보았다. 그리고 다양한 객체들을 이용하여 시간차를 조절해 보았다.
1. 이미지 좌표와 딕셔너리 및 객체 배열로 바꿔주기
var 이미지좌표 = 0;
var 가위바위보 ={
바위: '0',
가위: '-142px',
보: '-284px'
};
function 바꿔주기(이미지좌표){
return Object.entries(가위바위보).find(function(v){
return v[1] === 이미지좌표;
})[0];
};
이미지 스프라이트를 사용하기 위해 우선 이미지 좌표를 만들어 주었다. 그 후 가위바위보 객체를 만들어 이미지에 맞게 이미지 좌표 값을 잡아 주었다.
그후 함수를 만들어 주었는데 Object.entries를 통하여 객체 값을 2차원 배열로 바꿔주었고 find를 이용하여 값을 찾으면 함수를 중단하게 만들었다.
2. setInterval & clearInterval & setTimeout 사용
var 랜덤;
function 랜덤시간(){
랜덤 = setInterval(function(){
if(이미지좌표 === 가위바위보.바위 ){
이미지좌표 = 가위바위보.가위;
}
else if(이미지좌표 === 가위바위보.가위){
이미지좌표 = 가위바위보.보;
}
else{
이미지좌표 = 가위바위보.바위;
}
document.querySelector('#computer').style.background =
'url(https://en.pimg.jp/023/182/267/1/23182267.jpg)' + 이미지좌표 + ' 0';
}, 100);
};
랜덤시간();
document.querySelectorAll('.btn').forEach(function(i){
i.addEventListener('click', function(){
var 나의선택 = this.textContent;
clearInterval(랜덤);
setTimeout(function (){
랜덤시간();
},1000);
console.log(나의선택, 바꿔주기(이미지좌표));
var 랜덤 변수를 만든 랜덤에 setInterval을 저장한 후에 나중에 clearInterval에 넣기 위해서고 함수를 만든 이유는 이미지를 랜덤하게 계속해서 돌아가기 하기 위해서 이다. 그리고 url을 사용한 이후 ' 0'을 사용한 이유는 띄어쓰기를 안하면 이미지좌표0 이렇게 붙어버리기 때문이다. 함수를 선언한 이후 랜덤시간(); 함수를 실행시켜 주었다.
querySelectorAll이후 forEach을 사용한이유는 DOM선택자에서 class를 사용하였기 때문에 forEach을 사용하였고 clearInterval(랜덤); 과 setTimeout을 통해 이미지를 1초간 멈추었다가 다시 실행되게 만들었다.
사용 메소드
3. 가위바위보 승리 체크
if(나의선택 === '가위'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("비겼습니다.");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("컴퓨터가 이겼습니다.");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("본인승리");
}
}
if(나의선택 === '바위'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("본인승리");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("비겼습니다.");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("컴퓨터가 이겼습니다.");
}
}
if(나의선택 === '보'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("컴퓨터가 이겼습니다.");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("본인승리");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("비겼습니다.");
}
if문을 사용하여 승리를 체크 할 수 있게 만들었다.
4. 전체코드
var 이미지좌표 = 0;
var 가위바위보 ={
바위: '0',
가위: '-142px',
보: '-284px'
};
function 바꿔주기(이미지좌표){
return Object.entries(가위바위보).find(function(v){
return v[1] === 이미지좌표;
})[0];
};
var 랜덤;
function 랜덤시간(){
랜덤 = setInterval(function(){
if(이미지좌표 === 가위바위보.바위 ){
이미지좌표 = 가위바위보.가위;
}
else if(이미지좌표 === 가위바위보.가위){
이미지좌표 = 가위바위보.보;
}
else{
이미지좌표 = 가위바위보.바위;
}
document.querySelector('#computer').style.background =
'url(https://en.pimg.jp/023/182/267/1/23182267.jpg)' + 이미지좌표 + ' 0';
}, 100);
};
랜덤시간();
document.querySelectorAll('.btn').forEach(function(i){
i.addEventListener('click', function(){
var 나의선택 = this.textContent;
clearInterval(랜덤);
setTimeout(function (){
랜덤시간();
},1000);
console.log(나의선택, 바꿔주기(이미지좌표));
if(나의선택 === '가위'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("비겼습니다.");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("컴퓨터가 이겼습니다.");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("본인승리");
}
}
if(나의선택 === '바위'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("본인승리");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("비겼습니다.");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("컴퓨터가 이겼습니다.");
}
}
if(나의선택 === '보'){
if(바꿔주기(이미지좌표)=== '가위'){
console.log("컴퓨터가 이겼습니다.");
}
else if(바꿔주기(이미지좌표)==='바위'){
console.log("본인승리");
}
else if(바꿔주기(이미지좌표) === '보'){
console.log("비겼습니다.");
}
}
});
});
5. 부족했던 부분
clearInterva 부분에 변수로 지정해서 넣어야하는데 setInterval을 함수로 만들고 변수로 넣는 과정에서 조금 시간이 걸렸다.
if문 부분을 더 간단히 만들 수있었는데 이 부분을 규칙을 찾아 리팩토링 해야될 꺼 같다.