Vue.js로 러시안 룰렛 게임 만들기, vue asset import 방법

오늘은 Vue.js를 사용해 러시안 룰렛 게임을 만드는 방법을 함께 알아보도록 하겠습니다. 러시안 룰렛 다들 아시죠? 게임 규칙은 간단합니다. 화면의 총 이미지를 클릭하면 1/6 확률로 총소리가 나는 게임입니다.

먼저, 작성한 게임을 실제로 보려면 여기를 눌러주세요

그럼 본격적으로 코드를 살펴보도록 하죠.

<template>
  <div id="app">
    <img :src="gunImage" @click="playSound" class="fullscreen-image" />
  </div>
</template>

<script>
import gunImage from "@/assets/revolver.jpg";
import gunSound from "@/assets/gun_shot.mp3";
import misFireSound from "@/assets/jangjun.mp3";

export default {
  data() {
    return {
      gunImage,
      gunSound,
      misFireSound,
    };
  },
  methods: {

    playSound() {
      let sound;
      if (Math.random() < 1 / 6) {
        sound = new Audio(this.gunSound);
      } else {
        sound = new Audio(this.misFireSound);
      }
      sound.play();
    },
  },
};
</script>

이 코드는 크게 두 부분으로 나뉩니다. 첫 번째 부분은 템플릿으로, 사용자가 총 이미지를 클릭하면 알맞은 메소드를 호출하는 것을 볼 수 있습니다.

두 번째 부분은 스크립트로, 여기서는 총 이미지와 소리 파일을 불러오고, 필요한 메소드를 정의합니다. playSound 메소드는 총 이미지를 클릭했을 때 발생하며, 랜덤한 확률에 따라 총소리를 재생하거나 빗나간 소리를 재생합니다.

여기서 중요한 점은 import 구문을 통해 총 이미지와 두 가지 소리 파일을 로드하는 부분입니다. 이를 통해 Vue.js에서 에셋을 어떻게 관리하고 로드하는지 이해할 수 있습니다. 이미지 및 사운드는 “src/assets” 폴더 아래에 넣으면 됩니다.

결론

오늘은 Vue.js를 활용해 러시안 룰렛 게임을 만드는 방법을 알아보았습니다. 게임 자체는 간단하지만, 이를 통해 웹 애플리케이션에서 중요한 에셋 로딩에 대해 배울 수 있었습니다. 이러한 기본적인 기능을 이해하고 구현할 수 있다면, 훨씬 더 복잡한 웹 애플리케이션도 손쉽게 만들어낼 수 있을 것입니다.