socket.io, svelte 및 node를 사용하여 멀티플레이어 영화 퀴즈/퀴즈 게임을 만들어 봅시다. 데블로그 #12

돌아 가지!!

지난 시간에 "뒤로 버튼"의 구현에 대해 이야기했으므로 항상 게임에서 빠져나와 처음으로 돌아갈 수 있습니다.

서버 측 코드는 여전히 동일하며 if 문만 추가되었으므로 현재 게임에 있지 않은 경우 코드를 실행할 필요가 없으므로 설정에서 돌아가기로 선택하면 플레이어로 검사를 수행할 필요가 없습니다. 게임에있을 수 없습니다.

Svelte 구성 요소는 단순히 답장을 말하는 버튼으로, 나중에 아이콘이나 다른 것을 넣을 것입니다. 지금은 충분합니다.

구성 요소는 앱에 직접 있으며 "시작 화면"에 없는 경우 표시됩니다.

<script>
    export let socket;
    import { activeComponent, gameProps } from '../lib/stores';

    const back = () => {
        if ($gameProps?.id) {
            socket.emit('leave-room', $gameProps.id);
            $gameProps.id = '';
        }
        activeComponent.set('Start');
    };
</script>

<button class="back" on:click={back}>Back</button>

<style>
    button {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100px;
        padding: 10px;
    }
</style>

영감을 얻으셨나요?

그래서 마침내 UI가 어때야 하는지, 적어도 최종 게임 구성 요소가 되어야 하는지에 대한 영감을 얻었습니다.

처음에는 표로 해봤는데 잘 안맞아서 그냥 리스트처럼 만들어서 사용했습니다.

지금은 이렇게 생겼습니다.


텍스트 n 이미지가 모바일에서 축소되도록 반응형으로 만들었습니다. 결과를 목록으로 표시하는 이 방법은 너무 뻔해서 전에는 생각조차 하지 못했습니다.

마지막 라운드 결과도 나중에 넣을 것입니다.

또한 라운드 결과와 비슷한 것을 추가하여 누가 게임의 선두에 있는지 확인할 수 있다고 생각하지만 네, 나중에 할 것입니다.

여전히 채팅을 넣을 위치를 파악해야 합니다. 화면 오른쪽에 배치하고 모바일을 사용하는 경우 일부 토글을 추가하여 화면에 표시할 것이라고 생각합니다.

예, 지난번 이후로 많은 일이 없었지만 일부는 진행 중입니다 ...