application [child-coding-miniapp] view page [pages/game] development
This commit is contained in:
NVWA Code Agent
@@ -29,6 +29,12 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "关卡列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/game",
|
||||
"style": {
|
||||
"navigationBarTitleText": "游戏页面"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
290
apps/child-coding-miniapp/src/pages/game.vue
Normal file
290
apps/child-coding-miniapp/src/pages/game.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="game-container">
|
||||
<view class="level-info">
|
||||
<text class="title">{{ level?.title }}</text>
|
||||
<text class="description">{{ level?.description }}</text>
|
||||
</view>
|
||||
|
||||
<view class="game-area">
|
||||
<view class="code-blocks">
|
||||
<text class="section-title">可用代码块</text>
|
||||
<scroll-view class="blocks-list" scroll-y>
|
||||
<view
|
||||
v-for="(block, index) in level?.codeBlocks"
|
||||
:key="index"
|
||||
class="code-block"
|
||||
@touchstart="startDrag(block)"
|
||||
@touchmove="moveDrag"
|
||||
@touchend="endDrag"
|
||||
>
|
||||
{{ block }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="workspace" @touchend="dropBlock">
|
||||
<text class="section-title">工作区</text>
|
||||
<view class="workspace-blocks">
|
||||
<view
|
||||
v-for="(block, index) in userCode"
|
||||
:key="index"
|
||||
class="code-block placed"
|
||||
@click="removeBlock(index)"
|
||||
>
|
||||
{{ block }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="controls">
|
||||
<button @click="runCode" :disabled="!userCode.length">运行代码</button>
|
||||
<button @click="resetCode">重置</button>
|
||||
</view>
|
||||
|
||||
<view class="result" v-if="result">
|
||||
<text>{{ result }}</text>
|
||||
</view>
|
||||
|
||||
<view class="progress" v-if="progress">
|
||||
<text>已完成！得分: {{ progress.score }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { entities } from '@/lib/nvwa'
|
||||
import { auth } from '@/lib/nvwa'
|
||||
|
||||
const levelId = ref<number | null>(null)
|
||||
const level = ref<any>(null)
|
||||
const userCode = ref<string[]>([])
|
||||
const result = ref<string>('')
|
||||
const progress = ref<any>(null)
|
||||
const draggingBlock = ref<string | null>(null)
|
||||
const dragStartX = ref(0)
|
||||
const dragStartY = ref(0)
|
||||
|
||||
onMounted(async () => {
|
||||
const pages = getCurrentPages()
|
||||
const currentPage = pages[pages.length - 1]
|
||||
levelId.value = currentPage.options?.levelId ? parseInt(currentPage.options.levelId) : null
|
||||
|
||||
if (levelId.value) {
|
||||
await loadLevel()
|
||||
await loadProgress()
|
||||
}
|
||||
})
|
||||
|
||||
const loadLevel = async () => {
|
||||
if (!levelId.value) return
|
||||
const { data } = await entities.from('level').select('*').eq('id', levelId.value).single()
|
||||
level.value = data
|
||||
}
|
||||
|
||||
const loadProgress = async () => {
|
||||
if (!levelId.value) return
|
||||
const user = await auth.currentUser()
|
||||
if (!user) return
|
||||
|
||||
const { data } = await entities.from('user_level_progress')
|
||||
.select('*')
|
||||
.eq('user_id', user.id)
|
||||
.eq('level_id', levelId.value)
|
||||
.single()
|
||||
|
||||
if (data) {
|
||||
progress.value = data
|
||||
if (data.completed) {
|
||||
result.value = '关卡已完成！'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const startDrag = (block: string) => {
|
||||
draggingBlock.value = block
|
||||
// 获取起始位置，实际中可能需要更精确的位置
|
||||
dragStartX.value = 0
|
||||
dragStartY.value = 0
|
||||
}
|
||||
|
||||
const moveDrag = (e: any) => {
|
||||
// 在移动中可以更新拖拽位置，但简化
|
||||
}
|
||||
|
||||
const endDrag = (e: any) => {
|
||||
// 如果在工作区内，添加块
|
||||
// 简化：假设总是添加，如果需要精确位置检查
|
||||
if (draggingBlock.value) {
|
||||
userCode.value.push(draggingBlock.value)
|
||||
draggingBlock.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const dropBlock = () => {
|
||||
if (draggingBlock.value) {
|
||||
userCode.value.push(draggingBlock.value)
|
||||
draggingBlock.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const removeBlock = (index: number) => {
|
||||
userCode.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const resetCode = () => {
|
||||
userCode.value = []
|
||||
result.value = ''
|
||||
}
|
||||
|
||||
const runCode = () => {
|
||||
// 简单模拟执行
|
||||
let output = '执行结果: '
|
||||
for (const block of userCode.value) {
|
||||
output += block + ' -> '
|
||||
}
|
||||
output += '完成'
|
||||
result.value = output
|
||||
|
||||
// 检查解决方案
|
||||
if (level.value?.solution && JSON.stringify(userCode.value) === JSON.stringify(level.value.solution)) {
|
||||
completeLevel()
|
||||
} else {
|
||||
result.value += ' (不正确，请重试)'
|
||||
}
|
||||
}
|
||||
|
||||
const completeLevel = async () => {
|
||||
const user = await auth.currentUser()
|
||||
if (!user || !levelId.value) return
|
||||
|
||||
const score = 100 // 简单得分
|
||||
const timeTaken = 60 // 秒
|
||||
|
||||
if (progress.value) {
|
||||
// 更新
|
||||
await entities.from('user_level_progress').update({
|
||||
completed: true,
|
||||
score,
|
||||
timeTaken,
|
||||
code_snapshot: userCode.value,
|
||||
completed_at: new Date()
|
||||
}).eq('id', progress.value.id)
|
||||
} else {
|
||||
// 插入
|
||||
await entities.from('user_level_progress').insert({
|
||||
user_id: user.id,
|
||||
level_id: levelId.value,
|
||||
completed: true,
|
||||
score,
|
||||
time_taken: timeTaken,
|
||||
attempts: 1,
|
||||
code_snapshot: userCode.value,
|
||||
completed_at: new Date()
|
||||
})
|
||||
}
|
||||
|
||||
progress.value = { score }
|
||||
result.value = '恭喜完成关卡！'
|
||||
uni.showToast({ title: '关卡完成！', icon: 'success' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.game-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ff9a9e, #fecfef);
|
||||
}
|
||||
|
||||
.level-info {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.game-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.code-blocks, .workspace {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.blocks-list {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
background: #4ecdc4;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.code-block.placed {
|
||||
background: #45b7aa;
|
||||
}
|
||||
|
||||
.workspace-blocks {
|
||||
min-height: 100px;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.result, .progress {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user