Hangman (1) - Draw Hangman with SVG

이 포스트는 Udemy에 올라온

Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다!

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

1. 첫 화면

 

 

2. 목표

 

svg를 이용해서 그리려는 행맨!

마지막 다리까지 그려지만 자동으로 게임이 끝나서 ㅋㅋㅋㅋ

마지막 다리가 그려지기 전에 일단 캡쳐를 해봤다.

 

 

 

3. CSS

* {
  box-sizing: border-box;
}

body {
  background-color: #34495e;
  color: #fff;
}


.figure-container {
  fill: transparent;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linecap: round;
}

 

화면에 라인들이 제대로 그려지는지 확인하기 위해서

우선 body에 배경색을 주었다.

 

.figure-container는 말그대로 행맨이 들어갈 container <div>

fill은 원을 그렸을 때 내부가 어떤 색이 될지 -> transparent이기 때문에 body색 그대로

stroke은 말 그대로 붓질

stroke:#fff로 하면 흰색 라인

stroke-width는 라인의 굵기

stroke-linecap:round로 하면 라인의 시작과 끝부분이 둥글게 된다.

 

 

 

4. HTML

 

     <svg height="250" width="200" class="figure-container">
          <!-- Rod -->
          <line x1="60" x2="140" y1="20" y2="20" />
          <line x1="140" x2="140" y1="20" y2="60" />
          <line x1="60" x2="60" y1="20" y2="230" />
          <line x1="20" x2="100" y1="230" y2="230" />

          <!-- Head -->
          <circle cx="140" cy="80" r="20" />

          <!-- Body -->
          <line x1="140" x2="140" y1="100" y2="160" />

          <!-- Arms -->
          <line x1="140" x2="120" y1="110" y2="130" />
          <line x1="140" x2="160" y1="110" y2="130" />

          <!-- Legs -->
          <line x1="140" x2="120" y1="160" y2="180" />
          <line x1="140" x2="160" y1="160" y2="180" />
        </svg>

game container에 행맨을 걸 Rod와 행맨 머리, 행맨 팔, 행맨 다리 순으로 만들어 봤다.

 

svg는 캔버스 API와 비슷하다고 생각하면 된다.

우선 height와 width를 준다.

 

그 속 라인 x1은 x좌표 시작점, x2는 x좌표 끝나는 점

y1은 y좌표 시작점, y2는 y좌표 끝나는 점이다.

 

행맨 머리 같은 원을 만들 때는 <round> tag를 사용한다.

cx는 원의 중심 x좌표, cy는 원의 중심 y좌표 r은 반지름

 

 

 

*처음 Rod의 시작 x좌표를 잡고 x좌표, y좌표를 알아서 계산하며 ㅎㅎ 선이 잘 맞아 떨어지게 값을 넣어줘야 한다!

 

신나게 Hangman을 그려봤다 ㅎㅎ