uniapp实现简单的忍者必须死

先看效果图（大佬勿喷）

首先是页面部分

<template>
	<view class="content">
		<view class="conBox">
			<view class="pingixngxian">
				<image :class="zhenzheStatue==1?'renImg img1':'renImg img2'" :src="iconRenzhe" mode=""></image>
			</view>
			<view class="button" @click="dianBtn" ref="sss">
				跳
			</view>
			<view class="zhangaiBox">
				<view class="xian">
				</view>
				<view class="imageBox" :style="{left:leftnumber}">
					<image :class="item.shangxia?'icon icon1':'icon icon2'" v-for="(item,index) in zangaiBox" :key="index" :style="{left:item.marginLeft}" :src="item.icon" mode=""></image>
				</view>
			</view>
		</view>
		<view v-if="status" class="cuowu">
			<view class="text">
				失败
			</view>
			<button @click="chongkai()">重来</button>
			<button @click="hui()">退出</button>
		</view>
		<view v-if="statuss" class="cuowu">
			<view class="text">
				成功
			</view>
			<button @click="hui()">退出</button>
		</view>
	</view>
</template>

接下来是逻辑代码以及依赖数据部分（数据有点多）

<script>
	export default {
		data() {
			return {
				iconRenzhe:require('../../static/renzhe.png'),
				statusId:0,
				zhenzheStatue:1,
				leftnumber:'0px',
				status:false,
				statuss:false,
				left:0,
				nandu:5,
				zangaiBox:[
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'300px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'450px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'600px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'750px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'900px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1050px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1200px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1450px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1600px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1750px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1900px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2050px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2200px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2350px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2500px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2650px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2800px',
						shangxia:false,
					}
				],
				trime:null,
				wei:0,
				nanduArr1:[
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'300px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'410px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'520px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'630px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'740px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'850px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'960px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1070px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1180px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1290px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1400px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1510px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1620px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1730px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1840px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1950px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2060px',
						shangxia:false,
					}
				],
				nanduArr2:[
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'300px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'410px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'520px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'630px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'740px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'850px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'960px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1070px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1180px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1290px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1400px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1510px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1620px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1730px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1840px',
						shangxia:true,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'1950px',
						shangxia:false,
					},
					{
						icon:require('../../static/zhangai.png'),
						marginLeft:'2060px',
						shangxia:true,
					}
				]
			}
		},
		methods: {
			dianBtn(){
				if(this.zhenzheStatue==1){
					this.zhenzheStatue=2
				}else{
					this.zhenzheStatue=1
				}
				this.getViewXY()
			},
			toLeft(){
				 this.trime  = setInterval(()=>{
					 this.left = this.left - this.nandu
					 this.leftnumber = `${this.left - this.nandu}px`
				},150)
			},
			getViewXY(){
				this.$nextTick(() => {
				                uni.createSelectorQuery().in(this).selectAll('.icon').boundingClientRect().exec(rect => {
				                    
									this.panduan(rect)
				                });
				            })
			},
			geshistatus(){
				this.wei = parseInt(this.zangaiBox[this.zangaiBox.length-1].marginLeft)
			},
			panduan(arr){
				arr[0].forEach((item,index)=>{
					if(item.left<230 && item.left>170){
						if(!this.zangaiBox[index].shangxia){
							if(this.zhenzheStatue==1){
								clearInterval(this.trime)
								this.status=true
							}
						}else{
							if(this.zhenzheStatue!=1){
								clearInterval(this.trime)
								this.status=true
							}
						}
					}
				})
			},
			hui(){
				uni.navigateTo({
					url:'/pages/home/index'
				})
			},
			chongkai(){
				if(this.statusId==1){
					this.zangaiBox=this.nanduArr1
					this.nandu = 8
				}else if(this.statusId==2){
					this.zangaiBox=this.nanduArr2
					this.nandu = 10
				}
				this.left=0
				this.leftnumber='0px'
				this.zhenzheStatue = 1
				this.status=false
				this.toLeft()
			}
		},
		watch:{
			left:{
				handler:function(newval,oldval){
					if(Math.abs(this.left) >= this.wei){
						this.statuss = true
						clearInterval(this.trime)
					}
					this.getViewXY()
				},
				immediate:true
			}
		},
		mounted() {
			this.geshistatus()
			this.toLeft()
			this.status=false
			this.statuss=false
		},
		onLoad(ops) {
			if(ops.id){
				this.statusId=ops.id
				if(ops.id==1){
					this.zangaiBox=this.nanduArr1
					this.nandu = 8
				}else if(ops.id==2){
					this.zangaiBox=this.nanduArr2
					this.nandu = 10
				}
			}
		}
	}

接下来是样式部分

.content{
		background-image: url('../../static/beijing.jpg');
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		position: relative;
		.conBox{
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
			.pingixngxian{
				width: 100%;
				height: 6px;
				background-color:black;
				position: relative;
				.renImg{
					width: 80px;
					height: 100px;
					position: absolute;
					left: 150px;
					transition: all .5s;
				}
				.img1{
					top: -100px;
				}
				.img2{
					top: 5px;
					transform: rotateX(180deg);
				}
			}
			.button{
				position: absolute;
				top: 240px;
				right: 100px;
				width: 80px;
				height: 80px;
				line-height: 80px;
				text-align: center;
				font-size: 70px;
				font-family: '隶书';
				border-radius: 50%;
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, .5);
				z-index: 10;
			}
			.zhangaiBox{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				.xian{
					width: 100%;
					height: 6px;
					background-color: black;
					position: relative;
					
				}
				.imageBox{
					height: 100%;
					width: 100%;
					position: absolute;
					display: flex;
					align-items: center;
					.icon{
						position: absolute;
						width: 30px;
						height: 100px;
						
					}
					.icon1{
						top: calc(100vh / 2);
					}
					.icon2{
						top: calc(100vh / 2 - 100px);
						transform: rotateX(180deg);
					}
				}
			}
		}
		.cuowu{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 50px 0;
			z-index: 10;
			.text{
				color: #FFFFFF;
				font-size: 100px;
				font-family: '隶书';
			}
			>button{
				width: 30%;
				background-color: rgba(118, 118, 118, 0.5);
				color: #FFFFFF;
				font-size: 20px;
			}
		}
	}