인터랙티브 스크래치 카드 웹 게임 제작

소개

이 프로젝트에서는 간단한 웹 기반 스크래치 카드 게임을 만드는 과정을 안내해 드립니다. 이 게임은 사용자가 회색 오버레이를 긁어내어 "당첨" 또는 "다시 시도" 메시지를 표시하는 기본 이미지를 드러내는 방식으로 진행됩니다. 구조를 위해 HTML 을, 스타일 지정을 위해 CSS 를, 상호 작용을 위해 JavaScript 를 사용합니다.

👀 미리보기

🎯 과제

이 프로젝트를 통해 다음을 배우게 됩니다:

HTML, CSS 및 JavaScript 를 사용하여 기본적인 웹 프로젝트를 설정하는 방법
HTML5 canvas 를 조작하여 상호 작용 효과를 만드는 방법
마우스 클릭 및 움직임과 같은 사용자 상호 작용을 처리하기 위해 JavaScript 를 사용하는 방법
동적으로 이미지를 로드하고 표시하는 것을 포함하여 웹 개발에서 이미지 작업 방법
사용자에게 결과를 무작위로 결정하는 간단한 게임 로직을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

웹 기반 게임 및 대화형 애플리케이션을 위한 HTML5 canvas 와 그 기능에 대한 확실한 이해를 보여줍니다.
동적 콘텐츠를 생성하고 사용자 입력을 처리하기 위해 JavaScript 를 사용하는 능숙함을 보여줍니다.
완전하고 기능적인 웹 애플리케이션을 만들기 위해 다양한 웹 기술을 통합합니다.
웹 기반 게임을 위한 간단하지만 매력적인 사용자 인터페이스를 설계합니다.
무작위 결과 및 사용자 상호 작용과 같은 기본적인 게임 개발 개념을 적용합니다.

HTML 구조 생성

이 단계에서는 index.html에서 웹 페이지의 기본 구조를 설정합니다. 여기에는 DOCTYPE 선언, html 요소, head 및 body 섹션이 포함됩니다. 범용 문자 인식을 위해 문자 집합을 UTF-8 로 정의하고 반응형 디자인을 위해 뷰포트를 설정하여 스크래치 카드 애플리케이션이 다양한 크기의 장치에서 보기 좋게 표시되도록 합니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scratch Card</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        Feeling Lucky? Try!
        <a href="#" onclick="window.location.reload()">Try Again</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

body 내부에는 애플리케이션의 컨테이너 역할을 하는 "main" id를 가진 div 요소를 생성합니다. 이 컨테이너 내에는 사용자가 행운을 시험해 보도록 초대하는 재미있는 메시지를 표시하기 위해 "msg" 클래스가 있는 div를 포함합니다. 이 메시지에는 클릭 시 페이지를 다시 로드하는 링크도 포함되어 있어 사용자가 브라우저를 수동으로 새로 고칠 필요 없이 스크래치 카드를 다시 시도할 수 있습니다.

마지막으로, 스크래치 카드 효과가 구현될 canvas 요소를 포함하고, 애플리케이션의 로직이 위치할 "main.js"라는 외부 JavaScript 파일을 연결합니다.

이 HTML 구조는 텍스트와 스크래치 가능한 표면이 표시될 영역을 정의하여 스크래치 카드 애플리케이션에 필요한 기반을 제공합니다.

✨ 솔루션 확인 및 연습

Canvas 스타일 지정

main.js JavaScript 파일에서 canvas 요소를 선택하고 몇 가지 초기 스타일을 적용하는 것으로 시작합니다.

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

backgroundColor를 "transparent"로 설정하여 canvas 배경이 웹 페이지의 어떤 부분도 가리지 않도록 합니다. position을 "absolute"로 설정하면 필요한 경우 canvas 를 다른 요소 위에 배치하는 데 더 많은 유연성을 얻을 수 있습니다.

이 단계는 canvas 요소를 준비하는 데 매우 중요하며, 웹 페이지의 나머지 디자인과 원활하게 통합되고 이후 단계에서 추가할 동적 요소를 준비하는 데 필수적입니다.

✨ 솔루션 확인 및 연습

스크래치 이미지 로드

여기서는 스크래치 카드 배경으로 사용할 임의의 이미지를 로드합니다.

// Continue in main.js

// Array of possible images to reveal
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// Create a new Image object and set the source
const img = new Image();
img.src = selectedImage;

// Once the image is loaded, adjust canvas size and background
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

가능한 이미지 파일 이름을 포함하는 images라는 배열을 생성합니다. 그런 다음 Math.floor(Math.random() * images.length)를 사용하여 이 배열에서 이미지를 무작위로 선택합니다.

새로운 Image 객체를 생성하고 해당 소스 (src) 를 선택한 이미지로 설정합니다. onload 이벤트 리스너는 이미지가 완전히 로드된 후에만 스크립트의 나머지 부분을 진행하도록 하여, 완전히 다운로드되지 않은 이미지를 조작하려는 시도로 인해 발생할 수 있는 문제를 방지합니다.

이 단계는 스크래치 카드의 동적 특성에 매우 중요하며, 애플리케이션이 로드되거나 새로 고쳐질 때마다 변동성과 놀라움을 제공합니다. 임의의 이미지를 로드함으로써 실제 스크래치 카드의 불확실한 결과를 시뮬레이션하여 사용자 경험을 향상시킵니다.

✨ 솔루션 확인 및 연습

스크래치 레이어 준비

canvas 에 선택한 이미지를 로드한 후, 스크래치 레이어를 준비해야 합니다. 이는 전체 canvas 를 회색 사각형으로 덮음으로써 수행됩니다. 이 회색 레이어는 사용자가 그 아래의 이미지를 드러내기 위해 상호 작용할 수 있는 스크래치 가능한 표면 역할을 합니다.

// Continue in main.js

// Cover the canvas with a gray rectangle to act as the scratch layer
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// Prepare the canvas for the scratching effect
ctx.globalCompositeOperation = "destination-out";

이 단계에서는 채우기 스타일을 회색으로 설정하고 전체 canvas 를 덮는 사각형을 그려 선택한 이미지 위에 스크래치 오프 레이어를 생성합니다. globalCompositeOperation을 "destination-out"으로 설정하면 canvas 에 새로운 그림이 그려질 때마다 기본 레이어가 투명해져 사용자가 스크래치하는 모든 부분에서 아래 이미지가 드러나도록 합니다.

✨ 솔루션 확인 및 연습

스크래치 기능 생성

스크래치 효과를 구현하기 위해 사용자가 canvas 와 상호 작용할 때마다 호출될 draw 함수를 정의합니다. 이 함수는 사용자가 현재 그림을 그리고 있는지 (isDrawing 플래그) 확인한 다음 canvas 를 기준으로 커서 또는 터치의 위치를 계산합니다. 그런 다음 이 위치에 회색 레이어를 투명하게 만드는 합성 연산을 사용하여 원을 그립니다. 그러면 아래 이미지가 드러납니다.

// Continue in main.js

let isDrawing = false;

// Define the function to simulate scratching
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // Draw a circle at the cursor or touch position
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

이 함수는 먼저 isDrawing 플래그가 true 인지 확인하여 사용자가 스크래치 동작을 시작했음을 나타냅니다. 그런 다음 스크래치가 발생하는 정확한 위치를 계산하고 해당 위치에 원을 그려 회색 레이어를 효과적으로 스크래치하여 기본 이미지의 일부를 드러냅니다.

✨ 솔루션 확인 및 연습

스크래치 액션 이벤트 리스너 추가

마지막으로, 사용자가 스크래치 효과를 트리거하기 위해 canvas 에서 작업을 수행할 때를 감지해야 합니다.

// Continue in main.js

  // Event listeners to handle mouse and touch interactions
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

mousedown, mousemove, mouseup, touchstart, touchmove, 및 touchend에 대한 이벤트 리스너를 추가합니다. 이러한 리스너는 isDrawing 플래그를 설정하고 draw 함수를 적절하게 호출하여 대화형 스크래치 효과를 생성합니다.

사용자가 마우스 버튼을 누르거나 화면을 터치하면 (mousedown 또는 touchstart), isDrawing을 true 로 설정하고 스크래치 효과를 생성하기 위해 움직임을 추적하기 시작합니다. 버튼을 놓거나 화면 터치를 멈추면 (mouseup 또는 touchend), isDrawing을 false 로 설정하여 스크래치 동작을 중지합니다. mousemove 및 touchmove 이벤트는 isDrawing이 true 인 동안 계속해서 draw 함수를 호출하여 사용자가 마우스나 손가락을 canvas 위로 움직일 때 회색 레이어를 스크래치하여 아래 이미지를 드러낼 수 있도록 합니다.

다음 효과를 보려면 WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하고 "Web 8080" 탭으로 전환하십시오.

✨ 솔루션 확인 및 연습

요약

이 프로젝트에서는 사용자가 레이어를 스크래치하여 숨겨진 메시지를 드러낼 수 있는 간단한 스크래치 카드 게임을 만들었습니다. HTML 구조를 설정하고, JavaScript 에서 canvas 를 초기화하고, 이미지를 로드하고 표시했으며, canvas API 를 사용하여 스크래치 효과를 구현했습니다. 이 프로젝트는 웹 페이지에 재미있는 추가 요소가 될 수 있으며, 더 많은 이미지 추가, 디자인 개선 또는 더 큰 게임에 통합하는 등 다양한 방식으로 확장할 수 있습니다.

스크래치 카드 웹 게임 만들기

소개

👀 미리보기

🎯 과제

🏆 성과

HTML 구조 생성

Canvas 스타일 지정

스크래치 이미지 로드

스크래치 레이어 준비

스크래치 기능 생성

스크래치 액션 이벤트 리스너 추가

요약