[vue]가위바위보 게임 만들기[1]
프론트엔드 공부로 많이들 해보는 가위바위보 게임, 나도 할 수 있지 않을까 ? 하고 냅다 도전한 기록...
목표
-가위바위보가 순서대로 변하고 있는 화면에서 세개의 가위바위보 버튼중 하나를 누르면 움직이던 가위바위보가 멈추고 비교하여 이김, 비김, 짐을 표기하게 하기
-총횟수, 승률보이게 하기
1.일단 움직이는 가위바위보를 나오게 하자
나의생각- 배열에 가위,바위,보 넣어두고 태그엔 배열의 인덱스를 바인딩해서 보여주되 1초마다 setTimeout을 이용해서 배열의 인덱스가 0,1,2로 바뀌도록 하면 되지 않을까? 처음부터 가위바위보가 움직여야되니 mounted()에 함수를 넣자,,!
<template>
<Layout :isFooter="false">
<div class="c-inner">
<span class="rival">{{ list[moveindex] }}</span>
</div>
</Layout>
</template>
<script>
export default {
data() {
return {
list: ["✌️", "✊", "🖐"],
index: 0,
};
},
methods: {
change() {
this.index++;
console.log(this.index);
if(this.index<this.list.length-1){
setTimeout(()=>{this.change()},100)
}
else{
this.index=-1
setTimeout(()=>{this.change()},100)
}
}
},
mounted() {
this.change();
},
computed:{
moveindex(){
if(this.index==0){
return 0
}
else if(this.index==1){
return 1
}
else{
return 2
}
}
}
};
</script>
<style lang="scss">
.rival{
font-size: 40px;
}
</style>
알게된점
setTimeout()만으로는 가위바위보가 계속 바뀌도록 할수 없어서 인덱스를 ++하는 함수를 만들고
인덱스가 무한으로 늘면 안되니까 인덱스가 this.list.length-1 보다 작을때까지(0,1,2) ++하고
인덱스가 3이되면 다시 처음으로 돌아갈수 있도록 this.index=-1로 만들게 했다
각각의 if ,else에 setTimeout((this.change())=>{},100)재귀함수개념을 처음으로 써봤다..!
를 넣어줘서 .1초마다 다시 함수를 실행하게 만들었다..! 이로써 무한반복을 만들었다~!
태그에 {{list[index]}}를 바로 넣으니 바뀌긴 바뀌는데 index=2일때 보자기가 나와야 되는데 안나와서 computed로 this.index값이 바뀔때마다 감지해서 값을 바꿔넣을 수 있도록 했더니 해결이 되었다
왜 index로 하면 안되는지 알게되면 추후에 설명을 추가 해야겠다
구현된 화면(느리게)
Author And Source
이 문제에 관하여([vue]가위바위보 게임 만들기[1]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qkrtnfks128/vue가위바위보-게임-만들기1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)