hldy_app/component/public/game/joystick.vue

149 lines
3.0 KiB
Vue

<template>
<view class="move-circle">
<image v-show="key === 0" src="/static/index/keyimg/where10.png" class="container-img-up" />
<image v-show="key === 2" src="/static/index/keyimg/where10.png" class="container-img-down" />
<image v-show="key === 3" src="/static/index/keyimg/where10.png" class="container-img-left" />
<image v-show="key === 1" src="/static/index/keyimg/where10.png" class="container-img-right" />
<!-- 上 -->
<view class="up-container" @click="handleClick(0)">
<image :src="icons.up" class="container-img" />
</view>
<!-- 右 -->
<view class="right-container" @click="handleClick(1)">
<image :src="icons.right" class="container-img-shu" />
</view>
<!-- 下 -->
<view class="down-container" @click="handleClick(2)">
<image :src="icons.down" class="container-img" />
</view>
<!-- 左 -->
<view class="left-container" @click="handleClick(3)">
<image :src="icons.left" class="container-img-shu" />
</view>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const emit = defineEmits(['movecard'])
const icons = reactive({
up: '/static/index/keyimg/up1.png',
right: '/static/index/keyimg/where2.png',
down: '/static/index/keyimg/down1.png',
left: '/static/index/keyimg/where1.png'
})
const key = ref(-1)
// 保存当前定时器 ID
let resetTimer = null
function handleClick(dir: number) {
// 清除上一次定时器
if (resetTimer !== null) {
clearTimeout(resetTimer)
}
// 显示当前方向
key.value = dir
emit('movecard', dir)
// 重新开启 800ms 定时器
resetTimer = setTimeout(() => {
key.value = -1
resetTimer = null
}, 500)
}
</script>
<style lang="less" scoped>
.move-circle {
position: absolute;
bottom: 300rpx;
left: 0;
width: 330rpx;
height: 330rpx;
border-radius: 50%;
background: radial-gradient(circle at center,
/* 圆形渐变,中心点在元素正中 */
rgba(110, 149, 217, 0.2) 0%,
/* 中心处纯色 */
rgba(149, 177, 227, 0.2) 100%
/* 边缘颜色 */
);
border: 5rpx rgba(148, 181, 229, 0.5) solid;
// opacity: 0.1;
z-index: 9999;
}
.container-img-up {
position: absolute;
top: -48rpx;
left: 50rpx;
width: 220rpx;
height: 120rpx;
}
.container-img-down {
position: absolute;
bottom: -48rpx;
left: 50rpx;
transform: rotate(180deg);
width: 220rpx;
height: 120rpx;
}
.container-img-left {
position: absolute;
left: -97rpx;
top: 95rpx;
transform: rotate(270deg);
width: 220rpx;
height: 120rpx;
}
.container-img-right {
position: absolute;
right: -97rpx;
transform: rotate(90deg);
top: 95rpx;
width: 220rpx;
height: 120rpx;
}
.container-img {
width: 170rpx;
height: 70rpx;
}
.container-img-shu {
width: 70rpx;
height: 170rpx;
}
.up-container {
position: absolute;
top: 30rpx;
left: 75rpx;
}
.down-container {
position: absolute;
bottom: 30rpx;
left: 75rpx;
}
.right-container {
position: absolute;
top: 75rpx;
right: 30rpx;
}
.left-container {
position: absolute;
top: 75rpx;
left: 30rpx;
}
</style>