application [child-coding-miniapp] view page [pages/game] development

apps/child-coding-miniapp/src/pages.json

@@ -29,6 +29,12 @@
 			"style": {
 				"navigationBarTitleText": "关卡列表"
 			}
+		},
+		{
+			"path": "pages/game",
+			"style": {
+				"navigationBarTitleText": "游戏页面"
+			}
 		}
 	],
 	"globalStyle": {

apps/child-coding-miniapp/src/pages/game.vue

@@ -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>