【Svelte】やさしい神経衰弱ゲームを作ってみた

普段フロントエンドをReactやVueで書くことが多い私ですが、先日SvelteKit 1.0が発表されたので、記念に触ってみようと思い神経衰弱を作ってみました。

遊び方は普通の神経衰弱と同じです。最初に答えの絵柄を表示してシャッフルしているので、「やさしい神経衰弱」というタイトルにしました。瞬間記憶が得意な方は簡単かも。

※PCのChromeブラウザ推奨

リポジトリも載せておくので気になる方はご覧ください。

解説

このゲームの特徴であるシャッフル動作について解説します。この動きはアニメーション機能のflip関数を利用しています。

コードの書き方は簡単で、そもそもカードは配列のループで表示させているのですが、DOMでanimate:flip属性を追加して、元の配列の順番をランダムに入れ替えるだけです。後はSvelteが良しなに動かしてくれます。

ただし注意なのはシャッフルの際に、表示の動作時間を考慮する点です。1回毎にシャッフル時間+200ミリ秒待つことでスムーズな動作を表現しています。

<script lang="ts">
  // シャッフル
  for (let _ of [...new Array(SHUFFLE_COUNT)]) {
    cardList = arrayShuffle(cardList)
    // シャッフルの動作を待つ
    await new Promise(resolve => setTimeout(resolve, SHUFFLE_DURATION + 200))
  }
</script>

<div class="box card-board">
  {#each cardList as card (card.id)}
    <div animate:flip="{{ duration: SHUFFLE_DURATION }}">
      <!-- 省略（カードの画像） -->
    </div>
  {/each}
</div>

まとめ

初めてSvelteでコードを書いたため、Svelteの良さを活かしきれていないかもしれませんが、今回のシャッフルの動きをflipだけで実現できるのはSvelteの良さかなと思います。Svelteはドキュメントやチュートリアルが充実しており、初心者の方でも勉強しやすいので試してみてはいかがでしょうか。

参考サイト

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。