[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로 하면 안되는지 알게되면 추후에 설명을 추가 해야겠다

구현된 화면(느리게)