어떻게 위 챗 애플 릿 에서 행운 의 룰렛 게임 을 실현 합 니까?

저 는 주로 위 챗 애플 릿 에서 행운 의 룰렛 을 개발 하 는 방법 을 소개 합 니 다.그 중에서 자 바스 크 립 트 와 css 문법 을 사용 하면 간단 한 행운 의 룰렛(6 개의 상품 구역 을 예 로 들 면)을 쉽게 실현 할 수 있 습 니 다.
머리말
이번 튜 토리 얼 은 자 바스 크 립 트 와 css 기초 지식 을 일 정량 습득 해 야 하 며,애플 릿 개발 경험 이 필요 합 니 다.구체 적 으로 지식 을 습득 해 야 합 니 다.
css 의 position,transform,transition,overflowjavascript 기본 랜 덤 알고리즘
wxs 문법

애플 릿 에 애니메이션 api 가 내장 되 어 있 습 니 다

효과 도

애플 릿 개발 아이디어
개발 방향 은 세 부분 이 있 는데 첫 번 째 부분 은 css 로 룰렛 배경 을 그 리 는 것 이 고 두 번 째 부분 은 wxs 문법 을 이용 하여 응답 식 스타일 을 실현 하 는 것 이다.세 번 째 부분 은 애플 릿 에 애니메이션 api 를 설치 하여 룰렛 의 회전 을 실현 하고 js 를 통 해 무 작위 적 으로 실현 하 는 것 이다.
저 는 주로 창작 의 방향 을 소개 합 니 다.다음은 제 설명 을 시작 하 겠 습 니 다.
어떻게 삼각형 을 그립 니까?
처음에는 기본 적 인 wxml 프레임 워 크 를 써 야 합 니 다.

<view class="turntable">
  <view class="wrapper">
    <view class="item" >
	  <view class="item-inner">
		<text>10 </text>
	  </view>
	</view>
  </view>
</view>

나 는 두 개의 크기 가 같은 장방형 을 그 렸 는데 길이 와 너 비 는 각각 300 rpx 와 600 rpx 이 고 position css 속성 을 이용 하여 두 개의 장방형 을 합 쳤 다.

.turntable {
  display: block;
  width: 100%;
  height: 600rpx;
}
.turntable .wrapper{
  position: relative;
  transform-origin: center;
  width: 100%;
  height: 600rpx;
}

합병 한 후에 저 는 두 개의 장 방 체 를 분리 해서 빨간색 장 방 체 를 반원형 으로 만들어 야 합 니 다.파란색 장 방 체 는 시간 에 따라 60 도 를 흔 들 고 빨간색 장 방 체 는 30 도 를 거 슬러 야 합 니 다.왜 이렇게 돌려 야 합 니까?파란색 은 원래 빨간색 을 거 슬러 30 도 를 흔 들 었 고 삼각형 의 내각 은 60 도 입 니 다.이 60 도의 협각 을 형성 하기 위해 서 입 니 다.나 는 빨간색 을 다 놓 은 후에 파란색 을 60 도 이동 시 켜 이렇게 60 도 협각 을 만들어 야 한다.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  transform-origin: left center;
  transform: rotate(-30deg);
}
.turntable .wrapper .item .item-inner {
  text-align: center;
  width: 300rpx;
  height: 600rpx;
  transform: translateX(-300rpx) rotate(60deg); 
  transform-origin: right center;
  border-radius: 300rpx 0 0 300rpx;
  font-size: 32rpx;
}

다음 키 는 아 이 템 에 추가  overflow:hidden 속성,삼각형 하나 가 나 오고 글꼴 의 위 치 를 조정 합 니 다.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  overflow: hidden;
  transform-origin: left center;
}
.turntable .wrapper .item .item-inner text {
  display: block;
  transform-origin: center;
  transform: translateY(100rpx) translateX(43rpx) rotate(-30deg);
}

하나의 삼각형 을 그린 후 6 개의 같은 크기 의 삼각형 을 한데 묶 어 하나의 원반 으로 만 들 수 있 도록 각자 삼각형 의 회전 각 도 를 수정 하면 된다.

.turntable .wrapper .item:nth-child(1) {
  transform: rotate(-30deg);
}

.turntable .wrapper .item:nth-child(2) {
  transform: rotate(-90deg);
}

.turntable .wrapper .item:nth-child(3) {
  transform: rotate(-150deg);
}

.turntable .wrapper .item:nth-child(4) {
  transform: rotate(-210deg);
}

.turntable .wrapper .item:nth-child(5) {
  transform: rotate(-270deg);
}

.turntable .wrapper .item:nth-child(6) {
  transform: rotate(-330deg);
}

응답 스타일 구현
서로 다른 업무 수요 에 더욱 잘 적응 하기 위해 저 는 룰렛 의 스타일 을 응답 식 으로 바 꾸 면 외부 에서 들 어 오 는 prize 데이터 의 길이 에 따라 서로 다른 스타일 을 설정 할 수 있 습 니 다.저 는 이 단계 의 판단 을 wxs 모듈 에 두 었 습 니 다.

<wxs module="computed">
	var rotate = function (index, length) {
		var inital = - (360 / length / 2)
		var averageRotate = 360 / length
		var deg = inital - averageRotate * index
		return 'transform: rotate(' + deg + 'deg);'
	}
	var inner = function (length) {
		var averageRotate = 360 / length
		return 'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);'
	}
	var text = function (length) {
		var distance = 0
		var rotate = 0
		switch (length) {
			case 6:
				distance = 43
				rotate = 30
				break
			case 8:
				distance = 72
				rotate = 30
				break
			case 4:
				distance = -20
				rotate = 40
				break
		}
		return 'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);'
	}
	module.exports = {
		rotate: rotate,
		inner: inner,
		text: text
	}
</wxs>

애니메이션 시스템 과 당 첨 시스템
설 정 된 당 첨 률 을 하나의 원 을 360 도로 계산 해 0-360 의 당 첨 범 위 를 얻어 무 작위 로 얻 은 수 를 어느 구간 값 에 속 하 는 지 판단 하고,구간 값 리 워드 로 원반 이 움 직 이 는 각 도 를 결정 한다.사고방식 은 대략 이렇다.다음은 주요 한 사고방식 을 설명 하기 시작한다.
원반 을 돌 릴 각도=reward*원 하 나 를 6 조각 으로 나 누 는 평균 값  + 3 * 360
우선 6 개 상품 구역 의 당 첨 률 winning 을 설정 해 야 합 니 다.이 당 첨 률 은 1 로 합 쳐 초기 화 된 데 이 터 를 6 자리 수의 배열 로 구성 요소 밖으로 전달 해 야 합 니 다.

prize: [{
        'name': '1 ',
        'winnning': 0.2,
        'count': 1
      },
      {
        'name': '    ',
        'winnning': 0.5,
        'count': 0
      }, {
        'name': '5 ',
        'winnning': 0.05,
        'count': 5
      }, {
        'name': '7 ',
        'winnning': 0.05,
        'count': 7
      }, 
      {
        'name': '3 ',
        'winnning': 0.1,
        'count': 3
      }, 
      {
        'name': '4 ',
        'winnning': 0.1,
        'count': 4
      }
    ],

하나의 원 을 360 도로 0-360 의 당 첨 수치 범 위 를 계산 하 다.

getRange(winning) {
   let temp = []
     winning.forEach((item, index) => {
       if (index === 0) {
         temp.push(item['winnning'] * 360)
       } else {
         temp.push(parseInt(temp.slice(-1)) + item['winnning'] * 360)
       }
      })
      return temp
    },

무 작위 정 수 를 만 드 는 것 은 물론 이 수 는 0-360 이 어야 한다.그렇지 않 으 면 360 을 초과 하거나 0 보다 작 으 면 의미 가 없다.

let random = Math.round(Math.random() * 360)

무 작위 수 를 획득 한 후 어느 상품 범위 내 에 있 는 지 판단 하고 해당 구간 값 에 응답 수 reward 를 부여 합 니 다.

for (let i in winningRange) {
    let currentwinning = winningRange[i] //     
       if (random < currentwinning) {
          this.setData({
            reward: i
          })
          break
      } else {
        if (i == 0) {
           continue
        }
        if (random >= winningRange[i - 1] && random <= currentwinning) {
           this.setData({
              reward: i
           })
           break
       }
     }
}

시작 을 클릭 한 주 함 수 를 onPoint()에 두 고 함수 가 시 작 될 때 추첨 기회 가 있 는 지 판단 하고 애니메이션 을 실행 할 때 함수 가 애니메이션 을 실행 하 는 것 을 방지 해 야 합 니 다.계산 에 필요 한 각 도 는 위 챗 애플 릿 의 애니메이션 api animation 을 통 해 원반 을 움 직 이게 합 니 다.애니메이션 이 끝 난 후에 당 첨 정 보 를 사용자 정의 구성 요소 트리거 사건 을 통 해 구성 요소 외부 감독 에 게 들 려 줍 니 다.

onPoint() {
      //    
      const averageRotate = 360 / this.properties.prize.length
      //        
      if (this.properties.chance === 0) {
        this.triggerEvent('none')
        return
      }
      //            
      if (!this.data.onRotation) {
        this.setData({
          onRotation: true
        })
        this.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360  //   3   
        this.animate('.wrapper', [{
            rotate: 0,
            ease: 'ease-in-out'
          },
          {
            rotate: deg,
            ease: 'ease-in-out'
          }
        ], 5000, function () {
          this.setData({
            onRotation: false
          })
          //          
          this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(this))
      }
    },

마지막 으로 애니메이션 을 실행 하기 전에 애니메이션 리 셋 동작 을 먼저 실행 해 야 애니메이션 이 다음 에 정확 한 각도 로 돌아 갈 수 있다 는 것 을 잊 지 마 세 요.물론 나 는 구성 요소 밖에서 도 이 함 수 를 사용 할 수 있 도록 함수 안에 넣 었 다.

onClear(){
   this.clearAnimation('.wrapper')
}

마지막.
전체적인 생각 이 이 정도 입 니 다.어 떻 습 니까?아주 간단 하지 않 습 니까?실현 의 관건 적 인 단 계 는 원반 을 그 리 는 것 이다.이 단계 가 잘 되면 다른 것 은 매우 간단 할 것 이다.애니메이션 이 그 부분 을 실현 하기 때문에 위 챗 애플 릿 은 이미 우 리 를 모두 도와 주 었 다.마지막 으로 더 좋 은 방법 이 있다 면 댓 글 에서 토론 해 보 세 요.
특히 이 룰렛 항목 은 제 위 챗 애플 릿 인 스 턴 스 에서 실 행 됩 니 다.여러분 은 애플 릿 을 스 캔 하여 홈 페이지 맨 아래 에서 입구 포트 를 볼 수 있 습 니 다.
룰렛 코드 창고:turntable
위 챗 애플 릿 에서 행운 의 돌 림 판 미니 게임 을 어떻게 실현 하 는 지 에 관 한 글 은 여기까지 입 니 다.더 많은 관련 애플 릿 행운 의 돌 림 판 미니 게임 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!