实现点击事件

.hbuilderx/launch.json

+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "remote"
+            }
+        }
+    ]
+}

pages.json

@@ -6,9 +6,7 @@
 		}
 	}],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
+		"navigationStyle":"custom",
 		"backgroundColor": "#F8F8F8",
 		"app-plus": {
 			"background": "#efeff4"

pages/index/index.vue

 <template>
-	<view class="container">
+	<view class="page">
+		<view class="hearder">
+			<text>摇骰子</text>
+		</view>
+		<!-- 路线区域 -->
+		<view class="path">
+
+		</view>
+		<!-- 骰子 -->
+		<view class="play">	
+		<view class="img1">
+				<image :src=imgSrc></image>
+		</view>
+				<image @touchstart="playGame()" @touchend="move()" id="img" class="img2"  src="../../static/＜编组＞.png"></image>
+		</view>
 
-		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
-		<text class="intro">详见：</text>
-		<uni-link :href="href" :text="href"></uni-link>
 	</view>
 </template>
 
@@ -11,19 +22,109 @@
 	export default {
 		data() {
 			return {
-				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
+				imgSrc:"../../static/运行 拷贝 2.png",
+				timer:0, //长按标识
+				isMove: false
+
 			}
 		},	
 		methods: {
+			// 1s 2-4变成黄色
+			// 2-4s 5-7变成黄色
+			// 5-6s 7-9变成黄色
+			// 7-9  9-12
+			// 10-12 2-4 循环
+			move(){
+				this.isMove = true;
+			},
+			playGame() {
+				let num = 0;
+				let timer;
+				this.isMove = false;
+				if(!this.isMove){
+					timer = setInterval(() => {
+						if(!this.isMove)
+						{ 
+							num+=1;
+							console.log(num)
+							switch(num) {
+								case 1:
+								this.imgSrc = "../../static/运行 拷贝.png"
+								break
+								case 2:
+								this.imgSrc = "../../static/运行.png"
+								break
+								case 5:
+								this.imgSrc = "../../static/运行 拷贝 3.png"
+								break
+								case 7:
+								this.imgSrc = "../../static/运行 拷贝 4.png"
+								break
+								case 9:
+								num = 0
+								break											
+							}					
+						}
 						
+						else
+						{
+							clearInterval(timer)
+						}
+					}, 1000)
+				}
 			}
+			},
 			}
 </script>
 
 <style>
-	.container {
-		padding: 20px;
-		font-size: 14px;
-		line-height: 24px;
+	.page {
+		padding: 0;
+		margin: 0;
+		display: block;
+		width: 805rpx;
+		height: 1335rpx;
+		background-image: url(https://img0.baidu.com/it/u=3494859686,2348700425&fm=26&fmt=auto&gp=0.jpg);
+	}
+	.hearder {
+		display: flex;
+		height: 10%;
+		justify-content: center;
+		align-items: center;
+		background-color: #7CB1FF;
+	}
+
+	.path {
+		height: 50%;
+	}
+	.play {
+		width: 100%;
+		height: 500rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		text-align: center;
+	}
+	.play .img1 {
+		position: absolute;
+		width: 450rpx;
+		height:450rpx;
 	}
+	.play .img1 image {
+		width: 100%;
+		height: 100%;
+	}
+	.play .img2 {
+		position: absolute;
+		width: 200rpx;
+		height:200rpx;
+		z-index: 10;
+		transition: all 0.6s;
+	}
+	.play .img2:hover {
+		transform: scale(1.2);
+	}
+
+	
 </style>