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

100시간 절약...

이 양식을 작성하면 100시간을 절약할 수 있다고 하니 그래 해보자.

당신의 아이디어(한 줄짜리)는 무엇입니까? 멀티플레이어 영화 상식/퀴즈 게임

기회의 규모는 얼마입니까? 0$

타겟 청중은 누구입니까? 없음, 아니면 나..?

문제가 무엇입니까? 나

해결책은 무엇입니까? 나도

어떻게 수익을 창출합니까? 안해요

다른 대안은 무엇입니까? Netflix에서 한국 드라마를 시청하세요.

그래, 그건 몇 초밖에 안 걸렸어, 처음부터 했어야 했어... 지금은 시간을 너무 많이 아껴서 남은 저녁 시간을 Netflix에서 한국 드라마를 보면서 보낼 수 있어.

새로운 날, 새로운 데블로그

그래서 어제부터 쓰기 시작해서 저녁에 주로 한국 드라마를 봤습니다 ;) .. 그런데 저도 리팩토링을 좀 했습니다.. 제 아들 중 하나가 코드가 못생겼다고 불평해서 제거했습니다 일부 중첩된 if's n put 일부 초기 반환 n 항목 대신.

소켓으로 작업할 때 오류 방지 항목을 더 만들었으며 사용자가 연결을 끊었지만 여전히 코드를 실행 중이면 언제든지 정의되지 않을 수 있으므로 쉽게 충돌이 발생합니다.
나는 그것을 당기기 전에 가능한 한 많이 방지하고 싶습니다.

process.on("uncaughtException", function (err) {
console.log("Keep it alive!!: ", err);
});

일부 기능이 완료되지 않을 때 서버 충돌을 방지하기 위해!

새로운 기능!

글쎄, 나는 "퀴즈 게임 엔진"을 더 보편적으로 만들기 위해 계속 노력했습니다.
그래서 새로운 유형의 질문을 쉽게 정의할 수 있는 방법이 필요했습니다.

클래스는 분명한 대답이었습니다. 저는 메서드와 데이터를 하나의 엔터티로 캡슐화할 수 있는 방식으로 클래스를 좋아합니다.

그래서 공통 필드와 메서드가 이미 정의되어 있는 기본 클래스를 만들었고 자신만의 질문 유형을 만들고 사용자 지정하기 위해 이를 확장하고 원하는 것을 재정의할 수 있습니다.

현재 구현 .. 더 많은 것을 추가해야 할 경우 약간 변경 될 것입니다.

기본 질문

module.exports = class BaseQuestion {
    constructor({ type = 'pic-one', title = 'pick one', question = 'question text', correctAnswer = 'correct answer', answers = ['correct answer', 'wrong answer'] } = {}) {
        if (this.constructor == BaseQuestion) throw new Error("Abstract classes can't be instantiated.");

        this.type = type;
        this.title = title;

        this.question = question; //question text
        this.correctAnswer = correctAnswer; //correct answer
        this.answers = answers; //array of answer alternatives
    }

    isAnswerCorrect(answer) {
        return answer === this.correctAnswer;
    }
    calculateScore(answer, time) {
        if (this.isAnswerCorrect(answer)) return 100 + time * 10;
        else return 0;
    }
};

또한 확장하여 새로운 클래스를 만들고 점수 시스템을 변경했습니다.

const BaseQuestion = require('./BaseQuestion');
module.exports = class PickOne extends BaseQuestion {
    constructor(...args) {
        super(...args);
    }
    calculateScore(answer, time) {
        if (this.isAnswerCorrect(answer)) return 100 + time * 100;
        else return 0;
    }
};

그리고 테스트를 위해 하드 코딩된 질문을 사용하는 대신 다른 질문 공급자를 쉽게 구현할 수 있는지 확인하고 싶었습니다. 2초 동안 Google에서 찾은 결과open trivia database ..

generateQuestions() 함수에서 일부 코드를 함께 던졌습니다.

const axios = require('axios');
const he = require('he');
const PickOne = require('../questions/PickOne');
const { shuffleArray } = require('./functions');

module.exports = async function generateQuestions(no) {
    try {
        const { data } = await axios.get(`https://opentdb.com/api.php?amount=${no}&type=multiple`);

        const selectedQuestions = [];

        data.results.forEach((element) => {
            const answers = shuffleArray(element.incorrect_answers.concat(element.correct_answer));
            selectedQuestions.push(new PickOne({ question: he.decode(element.question), answers: answers, correctAnswer: element.correct_answer, type: 'pick-one' }));
        });
        return selectedQuestions;
    } catch (error) {
        console.log(error);
        return [];
    }
};

그 중 오류 처리는 없지만 누가 신경 쓰는지는 빠른 테스트였습니다 ..

n.. 보세요.. 이제 실제 퀴즈 게임이 진행됩니다..




BTW, 시간이 다 떨어지기 전에 bz가 스크린 샷을하고 있었기 때문에 질문을 읽지 않고 무작위 답변에 마우스를 클릭하여 정답을 얻었습니다 .. 기술 또는 운 ?? ;)

예, 여전히 CSS n 정크 작업이 필요하지만 예, 나중에.. 지금은 중요하지 않습니다.. 핵심 기능을 계속 구현할 것입니다.

다음은:

게임 브라우저, 참여할 수 있는 게임 목록 및 통계

게임을 만들기 위한 설정입니다. 프런트엔드 코드만, 백엔드는 이미 준비됨

게임 결과를 표시합니다.

채팅 기능, 게임 내 채팅 및 글로벌 채팅을 부스로 생각할 수 있습니다. 적어도 구현하기 어렵지는 않습니다. 아마 2줄의 코드 또는 백엔드의 무언가(하나는 전역용이고 다른 하나는 게임용 ;) )

물건이 bz..일 때 프런트엔드에 표시할 수 있는 로더 구성 요소입니다.

하지만 예, 느낌이 있다면 현재 CSS의 일부를 다시 실행할 수 있습니다.