Svelte로 영어 발음 미니 게임 만들기!

레포 링크: Here
실시간으로 보기: Here

현재 게임은 포르투갈어(pt-BR) UI만 있지만 이것으로도 조금은 테스트하고 플레이할 수 있으면 좋겠습니다!

미니 게임은 임의의 영어 단어를 보여주고 한 단어에 대한 사용자 발음을 듣는 방식으로 작동합니다. 일치하면 사용자는 점수를 받고 새 단어를 받고, 일치하지 않으면 사용자는 점수를 얻지 못합니다.

이것은 Svelte와의 두 번째 프로젝트였으며 제가 어떻게 개발했는지 약간의 과정을 보여드리겠습니다.

Vite를 사용하여 기본 Svelte 템플릿으로 시작하여 설정 방법을 자세히 알아볼 수 있습니다here.

이 게임에는 하나의 주요 구성 요소만 있습니다(아마도 가장 조직적인 방법은 아니지만 3시간 프로젝트였습니다).

이 프로젝트를 더 쉽게 진행할 수 있도록 몇 가지 작은 단계로 나누었습니다. 이러한 사소한 단계는 다음과 같습니다.

임의의 영어 단어를 가져옵니다

.

사용자 화면에 영어 단어 표시

한 단어의 사용자 발음 듣기

일치하는지 확인하고 일치하면 점수 카운터를 높입니다

.

그래서 첫 번째 단계(임의의 영어 단어 가져오기)를 위해 인터넷에서 내가 원하는 데이터(이 경우 임의의 영어 단어)를 가져올 수 있는 API를 찾았습니다. 이 APIhere를 사용했습니다.

그런 다음 기본 가져오기 메커니즘을 구성했습니다.

let word;
let loadWord = () => {
    return fetch(`https://random-word-api.herokuapp.com/word?number=1`)
      .then((r) => r.json())
      .then((data) => {
        word = data[0];
      });
  };

이제 첫 번째 단계를 시작할 준비가 모두 끝났습니다. 다음 단계로 넘어가면 Svelte의 기본 반응성이 다시 렌더링 프로세스를 처리하므로 이에 대한 준비도 모두 마쳤습니다.

이제 한 단어에 대한 사용자 발음을 얻는 큰 단계가 있습니다. 이를 위해 Webkit Speech Recognition API 을 사용했습니다.
정말 간단합니다. 기본적으로 webkitSpeechRecognition()의 새 인스턴스를 만들고 이를 사용하여 원하는 항목을 수집합니다! 또한 이 모든 것을 함수로 캡슐화하여 사용자가 버튼을 클릭하여 나중에 게임을 시작할 수 있도록 했습니다.

const start = () => {
    const recognition = new webkitSpeechRecognition();
    recognition.interimResults = false;
    recognition.lang = "en-US";
    recognition.continuous = false;
    recognition.start();
    // This event happens when you talk in the microphone
    recognition.onresult = function (event) {
      const content = event.results[0][0].transcript.trim();
      output = content;
    };
    recognition.onspeechend = () => {
      setTimeout(() => checkResult(word, output), 800);
      setTimeout(() => startGame(), 2000);
    };
  };

그 외에도 이 API로 수집할 수 있는 모든 문장 부호 및 기타 정크에 대해 사용자가 말한 단어를 정리해야 합니다. 억양 등도 감지하기 때문입니다.
이를 위해 간단한 청소 기능이 작동해야 합니다.

const clean = (word) => {
const cleanedWord = word
      .toString()
      .toLowerCase()
      .replace(/\s+/g, "")
      .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()?']/g, "");
    return cleanedWord;
  };

단어가 깨끗하고 사용자의 말을 수집한 후 마지막 단계는 이들을 비교하고 점수를 높이는 것입니다.

  const checkResult = (loadedWord, listenedWord) => {
    if (clean(listenedWord).includes(clean(loadedWord))) {
      correct = true;
      setTimeout(() => (correct = false), 2000);
      coinSound.play();
      count++;
    }
  };

마지막으로 UI를 만들기 위해 단어가 이미 로드되었는지 여부에 따라 조건부로 몇 가지 문구를 렌더링했습니다. Svelte에서 쉽게:

<div class="container">
  {#if word === undefined}
    <h1>Vamos jogar!</h1>
  {:else if gameStart}
    <h1>{clean(word)}</h1>
  {/if}
  {#if output === ""}
    <h1>Começar!</h1>
  {:else}
    <h1>{clean(output)}</h1>
  {/if}
  {#if correct}
    <h2>Você acertou!</h2>
  {/if}
  {#if count !== 0}
    <h2>Acertos: {count}</h2>
  {/if}
</div>
{#if !gameStart}
  <button on:click={startGame}> Vamos lá! </button>
{/if}

그리고 그게 다야! 우리의 영어 발음 미니 게임이 끝났습니다! 예를 들어 UI에 더 많은 언어를 만들거나 단순히 달성한 최고 점수의 추적기를 만들어 이를 실제로 많이 개선할 수 있습니다!

이것이 여러분에게 깨달음이 되었기를 바랍니다. 그게 전부입니다.