【腾讯云 HAI域探秘】借助高性能应用服务HAI快速开发一款“看图识成语“益智游戏，领略成语之韵，感受汉字之美

	<div class="game">
		<div class="levelTitle">第{{ levelTitle }}关</div>

		<div class="problemBox">
			<img :src="problemImg" class="img" mode="widthFix" />
		</div>
		<div class="answer">
			<div class="answerBox" v-for="(item, index) in answerStr" :key="index" @click="clearAnswer(index)">
				<div class="answerText">
					<div class="text">{{ item.text }}</div>
				</div>
			</div>
		</div>
		<div class="btnBox">
			<div class="btn" @click="promptAnswer"><text class="title">提示</text></div>
			<div class="time">
				<image src="../../static/time.png" class="timeImg"></image>
				<div class="countdown">{{ countdownNum }}s</div>
			</div>
		</div>

		<div class="optionalAnswer">
			<div class="answerBox" v-for="(item, index) in optionalAnswer" :key="index" @click="selectAnswer(index)">
				<div class="answerText" v-if="item != ''">
					<div class="text">{{ item }}</div>
				</div>
			</div>
		</div>

		<!-- 成功失败提示 -->
		<SuccessModal :text="description" @next="nextCheckpoint" v-if="checkResult == 'success'" />
		<FailModal @continue="continueCheckpoint" @jump="jumpCheckpoint" v-if="checkResult == 'error'" />

	</div>

	methods: {
		//解析数据
		parsingData() {
			this.countdownNum = 10
			this.promptNum = 0
			this.checkResult = 'await'

			this.levelTitle = Number(this.proBlemIndex) + 1
			// this.proBlemIndex=Number(this.proBlemIndex)-1
			this.problemImg = `/static/problemImgNew/${appData[this.proBlemIndex].problem}`
			console.log(this.proBlemIndex, '当前第几关')
			console.log(this.problemImg, '当前关的图片')

			let arr = []
			for (let i = 0; i < appData[this.proBlemIndex].answer.length; i++) {
				arr.push({ index: -1, text: '' })
			}
			this.answerStr = arr

			let tmpArr = []
			let disturbStr = appData[this.proBlemIndex].disturb
			for (let i = 0; i < disturbStr.length; i++) {
				tmpArr.push(disturbStr[i])
			}
			this.optionalAnswer = _.shuffle(tmpArr)
			this.description = appData[this.proBlemIndex].description

			this.countdown()
		},

		//填充答案
		selectAnswer(pickIndex) {


			let newList = this.answerStr
			try {
				newList.forEach((item, index) => {
					if (item.text == '') {
						newList[index].text = this.optionalAnswer[pickIndex]
						newList[index].index = pickIndex
						this.optionalAnswer[pickIndex] = ''
						throw new Error("EndIterative");
					}
				})
			} catch (error) {
				if (error.message != "EndIterative") throw error;
			}
			this.answerStr = newList
			this.checkAnswer()
		},

		//清除答案
		clearAnswer(index) {

			let newList = this.answerStr
			this.optionalAnswer[newList[index].index] = newList[index].text
			newList[index].text = ''
			newList[index].index = -1
			this.answerStr = newList
		},

		//检测答案
		checkAnswer() {
			let result = ''
			this.answerStr.find((item) => {
				result += item.text
			})

			if (result.length != appData[this.proBlemIndex].answer.length) {
				this.checkResult = 'await'
				return
			}
			if (result == appData[this.proBlemIndex].answer) {

				this.checkResult = 'success'
				clearInterval(countdownTime)
				console.log('回答正确')
			} else {

				console.log('回答错误')
				clearInterval(countdownTime)
				this.checkResult = 'error'
			}
		},

		//下一关
		nextCheckpoint() {

			if (this.proBlemIndex >= appData.length - 1) {
				alert('全部通关了')
				setTimeout(() => {
					this.$router.push({
						url: '/game'
					})
				}, 2000)
				return
			}
			this.proBlemIndex++
			sessionStorage.setItem('checkpint', this.proBlemIndex)
			this.parsingData()
		},

		//继续游戏
		continueCheckpoint() {
			this.checkResult = 'await'
			this.parsingData()
		},

		//跳过本关
		jumpCheckpoint() {

			this.nextCheckpoint()
		},

		//提示答案 
		promptAnswer() {
			this.optionalAnswer.forEach((item, index) => {
				if (item == appData[this.proBlemIndex].answer[this.promptNum]) {
					this.clearAnswer(this.promptNum)
					this.selectAnswer(index)
				}
			})
			this.promptNum++
		},

		//倒计时
		countdown() {
			if (countdownTime) {
				clearInterval(countdownTime)
			}
			countdownTime = setInterval(() => {
				this.countdownNum--
				if (this.countdownNum <= 0) {
					clearInterval(countdownTime)

					this.checkResult = 'error'
				}

			}, 2000)
		}

	},