查看朋友圈

src/game/game.ts

@@ -5,8 +5,6 @@ import PlayScene2 from '@/game/scenes/PlayScene2'
 function launch(containerId: string) {
     return new Phaser.Game({
         type: Phaser.CANVAS,
-        width: 1024,
-        height: 1024,
         parent: containerId,
         backgroundColor: '#090A20',
         physics: {
@@ -18,8 +16,7 @@ function launch(containerId: string) {
         },
         scale: {
             mode: Phaser.Scale.ENVELOP,
-            // autoCenter: Phaser.Scale.CENTER_BOTH,
-            width: 1024,
+            width: 800,
             height: 1024
         },
         scene: [BootScene, PlayScene2]

src/game/scenes/PlayScene2.ts

@@ -1,4 +1,6 @@
 import { Scene } from 'phaser'
+import { fetchChatRoles } from '@/api'
+import { emitter } from '@/plugins'
 
 enum Direction {
     LEFT = 'l',
@@ -17,6 +19,7 @@ interface Person {
     wait: boolean
     sprite: null | any
     paths: Array<Path>
+    chatRole?: null | any
 }
 
 function getRandom(num = 1) {
@@ -148,6 +151,90 @@ export default class PlayScene2 extends Scene {
         this.map.createLayer('dress', [Atlas], 0, 0)
         this.map.createLayer('sign', [Atlas], 0, 0)
 
+        // console.log(this.personInfo)
+
+        const width = (Math.floor(window.innerHeight / 100) - 6) * 50 + 2270
+        this.cameras.main.setBounds(0, 0, width, 1024)
+        this.cameras.main.fadeIn(1000)
+        setTimeout(() => {
+            this.cameras.main.pan(650, 512, 300)
+            this.personInfo = {}
+
+            fetchChatRoles(20).then((res: any) => {
+                console.log(res)
+                res.forEach((item: any) => {
+                    this.personInfo[item.playerName] = <Person>{
+                        wait: false,
+                        sprite: null,
+                        paths: [],
+                        chatRole: item
+                    }
+                })
+
+                this.setPerson()
+            })
+        }, 1000)
+
+        // this.cameras.main.fadeIn(1000)
+
+        // this.cameras.main.once('camerapancomplete', (camera: any) => {
+        //     camera.pan(620, 512)
+        // })
+
+        const cam = this.cameras.main
+        this.input.on('pointermove', (p: any) => {
+            if (!p.isDown) return
+
+            cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom
+            // if (cam.scrollX < -220) {
+            //     cam.scrollX = -220
+            // }
+            // if (cam.scrollX > 1290) {
+            //     cam.scrollX = 1290
+            // }
+        })
+    }
+
+    update() {
+        Object.keys(this.personInfo).forEach((key: string) => {
+            const info = this.personInfo[key]
+            if (info.sprite) {
+                if (!info.wait) {
+                    switch (info.direction) {
+                        case 'l':
+                            info.sprite.x -= 1
+                            break
+                        case 'r':
+                            info.sprite.x += 1
+                            break
+                        case 'u':
+                            info.sprite.y -= 1
+                            break
+                        case 'd':
+                            info.sprite.y += 1
+                            break
+                    }
+                    const walkName = {
+                        [Direction.LEFT]: key + '-left-walk',
+                        [Direction.RIGHT]: key + '-right-walk',
+                        [Direction.UP]: key + '-up-walk',
+                        [Direction.DOWN]: key + '-down-walk'
+                    }
+                    const x = info.sprite.x
+                    const y = info.sprite.y
+                    info.paths.forEach((path: Path) => {
+                        if (x === path.postion.x && y === path.postion.y) {
+                            const direction = path.directions[getRandom(path.directions.length)]
+                            info.sprite.play(walkName[direction], true)
+                            info.direction = direction
+                        }
+                    })
+                }
+            }
+        })
+    }
+
+    setPerson() {
         Object.keys(this.personInfo).forEach((key: string, index: number) => {
             this.personInfo[key].paths = [...this.map.objects][index].objects.map((obj: any) => {
                 return {
@@ -159,9 +246,6 @@ export default class PlayScene2 extends Scene {
                 }
             })
         })
-
-        console.log(this.personInfo)
-
         const anims = this.anims
         Object.keys(this.personInfo).forEach((key: string) => {
             const left_walk_name = key + '-left-walk'
@@ -247,59 +331,9 @@ export default class PlayScene2 extends Scene {
                     info.wait = false
                     info.sprite.play(info.sprite.anims.currentAnim.key)
                 }, 1000)
-            })
-        })
-
-        this.cameras.main.setBounds(0, 0, 512 * 5, 1024)
-
-        const cam = this.cameras.main
-        this.input.on('pointermove', (p: any) => {
-            if (!p.isDown) return
-
-            cam.scrollX -= (p.x - p.prevPosition.x) / cam.zoom
-            // if (cam.scrollX < -220) {
-            //     cam.scrollX = -220
-            // }
-            // if (cam.scrollX > 1290) {
-            //     cam.scrollX = 1290
-            // }
-        })
-    }
 
-    update() {
-        Object.keys(this.personInfo).forEach((key: string) => {
-            const info = this.personInfo[key]
-            if (!info.wait) {
-                switch (info.direction) {
-                    case 'l':
-                        info.sprite.x -= 1
-                        break
-                    case 'r':
-                        info.sprite.x += 1
-                        break
-                    case 'u':
-                        info.sprite.y -= 1
-                        break
-                    case 'd':
-                        info.sprite.y += 1
-                        break
-                }
-                const walkName = {
-                    [Direction.LEFT]: key + '-left-walk',
-                    [Direction.RIGHT]: key + '-right-walk',
-                    [Direction.UP]: key + '-up-walk',
-                    [Direction.DOWN]: key + '-down-walk'
-                }
-                const x = info.sprite.x
-                const y = info.sprite.y
-                info.paths.forEach((path: Path) => {
-                    if (x === path.postion.x && y === path.postion.y) {
-                        const direction = path.directions[getRandom(path.directions.length)]
-                        info.sprite.play(walkName[direction], true)
-                        info.direction = direction
-                    }
-                })
-            }
+                emitter.emit('chooseRole', info.chatRole)
+            })
         })
     }
 }

src/views/page/HomeView.vue

@@ -4,15 +4,49 @@
         <div @click="enterMoments" class="enter-btn animate__tada animate__animated animate__infinite">
             <img src="@/assets/enter.png" alt="" />
         </div>
+
+        <n-modal :show="show" @update:show="newValue => updateShow(newValue)" transform-origin="center">
+            <div class="box flex flex-col" :style="{ height: boxHeight + 'px' }">
+                <div class="top flex justify-between" :style="{ backgroundImage: `url(${topImg})` }">
+                    <img src="@/assets/game/left-top.png" alt="" />
+                    <img src="@/assets/game/right-top.png" alt="" />
+                </div>
+                <div class="content flex-1 flex overflow-hidden">
+                    <div class="left" :style="{ backgroundImage: `url(${leftImg})` }"></div>
+                    <div class="center flex-1 p-4 overflow-auto flex flex-col">
+                        <div class="text1 text-black text-base font-semibold">{{ showInfo.name }}:</div>
+                        <div class="text2 text-black mt-1 indent-8 text-sm">
+                            {{ showInfo.describe }}
+                        </div>
+                        <div class="flex-1"></div>
+                        <div class="flex justify-end mt-2">
+                            <n-button color="#394466" size="small" @click="chat">看看他的动态</n-button>
+                        </div>
+                    </div>
+                    <div class="right" :style="{ backgroundImage: `url(${rightImg})` }"></div>
+                </div>
+                <div class="bottom flex justify-between" :style="{ backgroundImage: `url(${bottomImg})` }">
+                    <img src="@/assets/game/left-bottom.png" alt="" />
+                    <img src="@/assets/game/right-bottom.png" alt="" />
+                </div>
+            </div>
+        </n-modal>
     </div>
 </template>
 <script setup lang="ts">
 import robot1Img from '@/assets/robot1.gif'
 import Game from '@/components/game/Game.vue'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import '@/styles/animate.css'
 import { useUserStore } from '@/store'
 import { useRouter } from 'vue-router'
+import { NModal, NButton } from 'naive-ui'
+import { emitter } from '@/plugins'
+import topImg from '@/assets/game/top.png'
+import bottomImg from '@/assets/game/bottom.png'
+import leftImg from '@/assets/game/left.png'
+import rightImg from '@/assets/game/right.png'
+
 onMounted(() => {
     const splash = document.getElementById('splash-screen')
     if (splash) {
@@ -31,6 +65,45 @@ function enterMoments() {
         router.push({ name: 'moments' })
     }
 }
+
+const show = ref(false)
+function updateShow(val: boolean) {
+    show.value = val
+}
+
+const boxHeight = ref(32)
+
+const showInfo = ref({
+    id: 0,
+    name: '',
+    describe: ''
+})
+emitter.on('chooseRole', (info: any) => {
+    boxHeight.value = 32
+    updateShow(true)
+    showInfo.value = info
+    setTimeout(() => {
+        boxHeight.value = 500
+    }, 1000)
+})
+
+function chat() {
+    if (!userStore.userInfo.id) {
+        router.push({
+            name: 'login',
+            query: {
+                angentId: showInfo.value.id
+            }
+        })
+    } else {
+        router.push({
+            name: 'agent',
+            query: {
+                id: showInfo.value.id
+            }
+        })
+    }
+}
 </script>
 
 <style lang="less" scoped>
@@ -52,8 +125,46 @@ function enterMoments() {
     left: 50%;
     margin-left: -50px;
 
-    img{
+    img {
         width: 100px;
     }
 }
+
+.box {
+    width: 300px;
+    max-height: 50vh;
+    transition: height ease-in-out 1s;
+    overflow: hidden;
+    height: 500px;
+
+    .top {
+        background-repeat: repeat-x;
+        background-size: contain;
+        img {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .bottom {
+        background-repeat: repeat-x;
+        background-size: contain;
+        margin: 0 2px;
+        img {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .left,
+    .right {
+        width: 16px;
+        background-repeat: repeat-y;
+        background-size: contain;
+    }
+
+    .center {
+        background-color: #ebd4aa;
+    }
+}
 </style>

src/views/page/LoginView.vue

@@ -9,7 +9,7 @@
         <n-el class="text-xs mt-2 text-gray-400 dark:text-gray-500">未注册手机验证后自动注册登录</n-el>
 
         <div class="py-9">
-            <login-form @success="$router.replace({ name: 'moments' })"></login-form>
+            <login-form @success="success"></login-form>
         </div>
     </n-el>
 </template>
@@ -18,5 +18,27 @@
 import { NIcon, NEl } from 'naive-ui'
 import { ChevronLeft } from '@vicons/tabler'
 import { LoginForm } from '@/components/common'
+import { useRoute, useRouter } from 'vue-router'
+import { ref } from 'vue'
 
+const route = useRoute()
+const angentId = ref('')
+
+if (route.query.angentId) {
+    angentId.value = route.query.angentId as string
+}
+
+const router = useRouter()
+function success() {
+    if (angentId.value) {
+        router.replace({
+            name: 'agent',
+            query: {
+                id: angentId.value
+            }
+        })
+    } else {
+        router.replace({ name: 'moments' })
+    }
+}
 </script>