Skip to content

A
angel-angel-mini-game
Commit d0ad412c by Hantao
Options

feat(part4): 添加滤芯排序游戏页面和资源文件 

- 新增游戏起始页和主游戏页面，包含完整的交互逻辑
- 添加所有游戏所需的静态资源文件（.webp格式）
- 在pages.json中注册新的游戏页面路由
- 实现拖拽排序功能，包含进度跟踪和完成验证
- 添加游戏重置和完成弹窗功能
parent edf95011
Showing with 276 additions and 2 deletions
src/pages.json
...@@ -52,6 +52,18 @@ ...@@ -52,6 +52,18 @@
} }
}, },
{ {
"path": "pages/second/part4/start",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/second/part4/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/third/index", "path": "pages/third/index",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom"
......
src/pages/second/hooks/useDrag.js
...@@ -67,7 +67,7 @@ export function useDrag(options = {}) { ...@@ -67,7 +67,7 @@ export function useDrag(options = {}) {
} }
}; };
// Touch Event Handlers // 触摸事件处理程序
const handleTouchStart = (event, item) => { const handleTouchStart = (event, item) => {
if (event.touches && event.touches[0]) { if (event.touches && event.touches[0]) {
const { clientX, clientY } = event.touches[0]; const { clientX, clientY } = event.touches[0];
...@@ -86,7 +86,7 @@ export function useDrag(options = {}) { ...@@ -86,7 +86,7 @@ export function useDrag(options = {}) {
handleEnd(); handleEnd();
}; };
// Mouse Event Handlers // 鼠标事件处理程序
const handleMouseDown = (event, item) => { const handleMouseDown = (event, item) => {
handleStart(event.clientX, event.clientY, item); handleStart(event.clientX, event.clientY, item);
}; };
......
src/pages/second/part4/start.vue 0 → 100644
<script setup>
const ASSETS = Object.freeze({
bg: '/static/second/part4/start/bg.webp',
battery1: '/static/second/part4/start/1.webp',
battery2: '/static/second/part4/start/2.webp',
battery3: '/static/second/part4/start/3.webp',
battery4: '/static/second/part4/start/4.webp',
Info1: '/static/second/part4/start/1-info.webp',
Info2: '/static/second/part4/start/2-info.webp',
Info3: '/static/second/part4/start/3-info.webp',
Info4: '/static/second/part4/start/4-info.webp',
battery: '/static/second/part4/start/battery.webp',
dragBg: '/static/second/part4/start/drag-bg.webp',
right: '/static/second/part4/start/right.webp',
sz: '/static/sz.webp',
jt: '/static/second/part4/start/jt.webp',
});
</script>
<template>
<view class="container">
<image class="bg-img" :src="ASSETS.bg" mode="aspectFill" />
<view class="title">滤芯排序游戏</view>
<view class="info">
<view class="info-battery">
<image class="battery-item1" :src="ASSETS.battery1" mode="scaleToFill" />
<image class="info-icon1" :src="ASSETS.Info1" mode="scaleToFill" />
<image class="battery-item2" :src="ASSETS.battery2" mode="scaleToFill" />
<image class="info-icon2" :src="ASSETS.Info2" mode="scaleToFill" />
<image class="battery-item3" :src="ASSETS.battery3" mode="scaleToFill" />
<image class="info-icon3" :src="ASSETS.Info3" mode="scaleToFill" />
<image class="battery-item4" :src="ASSETS.battery4" mode="scaleToFill" />
<image class="info-icon4" :src="ASSETS.Info4" mode="scaleToFill" />
</view>
<!-- 右侧交互区域 -->
<image class="drag-battery" :src="ASSETS.battery" mode="scaleToFill" />
<image class="arrow-icon" :src="ASSETS.jt" mode="scaleToFill" />
<image class="finger-icon" :src="ASSETS.sz" mode="scaleToFill" />
<view class="battery-container"></view>
<image class="drag-bg" :src="ASSETS.dragBg" mode="scaleToFill" />
<view class="hint-text">拖到这里！</view>
<image class="right-icon" :src="ASSETS.right" mode="scaleToFill" />
</view>
<view class="desc">
<view class="desc-text">后置碳棒在第四层！</view>
<view class="desc-text">它能改善水的口感，让水更甘甜！</view>
<view class="desc-text">按照水流方向排列</view>
<view class="desc-text">每一层都很重要</view>
</view>
</view>
</template>
<style scoped lang="scss">
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.title {
margin-top: 228rpx;
margin-bottom: 30rpx;
justify-content: space-between;
align-items: center;
color: #2D4B5D;
font-size: 48rpx;
font-weight: 600;
text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;
z-index: 1;
}
.info {
width: 686rpx;
height: 720rpx;
background: #FFF;
border-radius: 24rpx;
border: 4rpx solid #000;
margin-top: 20rpx;
z-index: 1;
position: relative;
.info-battery {
margin: 32rpx auto 32rpx 10rpx;
border-radius: 12rpx;
width: 420rpx;
height: 654rpx;
background: #E4F6FD;
position: relative;
.battery-item1 {
position: absolute;
left: 40%;
transform: translateX(-50%);
top: -100rpx;
width: 364rpx;
height: 362rpx;
}
.battery-item2 {
position: absolute;
left: 38%;
transform: translateX(-50%);
top: 186rpx;
width: 312rpx;
height: 106rpx;
}
.battery-item3 {
position: absolute;
left: 38%;
transform: translateX(-50%);
top: 276rpx;
width: 330rpx;
height: 248rpx;
}
.battery-item4 {
position: absolute;
left: 40%;
transform: translateX(-50%);
top: 388rpx;
width: 356rpx;
height: 354rpx;
}
.info-icon1 {
position: absolute;
right: 20rpx;
top: 40rpx;
width: 70rpx;
height: 70rpx;
}
.info-icon2 {
position: absolute;
right: 20rpx;
top: 200rpx;
width: 72rpx;
height: 72rpx;
}
.info-icon3 {
position: absolute;
right: 20rpx;
top: 350rpx;
width: 66rpx;
height: 78rpx;
}
.info-icon4 {
position: absolute;
right: 16rpx;
top: 518rpx;
width: 74rpx;
height: 82rpx;
}
}
.drag-battery {
position: absolute;
right: 24rpx;
top: 24rpx;
width: 220rpx;
height: 200rpx;
z-index: 2;
}
.arrow-icon {
position: absolute;
right: 148rpx;
top: 176rpx;
width: 52rpx;
height: 148rpx;
z-index: 3;
}
.finger-icon {
position: absolute;
top: 100rpx;
right: 0;
width: 170rpx;
height: 170rpx;
z-index: 2;
}
.battery-container {
background: #B1B5B7;
box-shadow: 0 10rpx 0 0 #00000040 inset;
border: 4rpx solid #000;
border-radius: 12rpx;
position: absolute;
right: 24rpx;
top: 290rpx;
width: 184rpx;
height: 86rpx;
z-index: 2;
}
.drag-bg {
position: absolute;
right: 24rpx;
top: 408rpx;
width: 184rpx;
height: 86rpx;
z-index: 2;
}
.hint-text {
color: #000000;
font-weight: 600;
font-size: 32rpx;
position: absolute;
right: 30rpx;
top: 432rpx;
z-index: 3;
}
.right-icon {
position: absolute;
right: 58rpx;
top: 524rpx;
width: 140rpx;
height: 140rpx;
z-index: 3;
}
}
.desc {
margin-top: 28rpx;
row-gap: 12rpx;
border-radius: 24rpx;
border: 4rpx solid #000;
background: #E4F6FD;
width: 528rpx;
height: 260rpx;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.desc-text {
color: #2D4B5D;
font-size: 34rpx;
font-weight: 600;
text-shadow: 1rpx 1rpx 0 #FFF, -1rpx -1rpx 0 #FFF, 1rpx -1rpx 0 #FFF, -1rpx 1rpx 0 #FFF;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment