사다리타기 게임 만들기 (JavaScript 구현)

이 예제는 HTML Canvas와 JavaScript를 활용하여 만든 사다리타기 게임입니다. 인원수를 입력하고 결과 항목을 설정하면, 자동으로 사다리가 생성되고 각 참가자의 이동 경로를 애니메이션으로 확인할 수 있습니다.

Canvas 위에 세로선과 가로선을 그리고, JavaScript로 경로를 계산하여 참가자가 어떤 결과에 도착하는지 보여주는 구조입니다.

사용 방법

1. 인원수를 입력합니다. 최소 2명부터 최대 10명까지 설정할 수 있습니다.
2. 사다리 생성 버튼을 누르면 인원수에 맞게 결과 입력칸이 만들어집니다.
3. 각 입력칸에 선물, 벌칙, 메뉴, 팀 이름 등 원하는 결과를 입력합니다.
4. 1번부터 시작 버튼을 누르면 1번 참가자부터 순서대로 사다리를 타기 시작합니다.
5. 각 참가자의 이동 경로가 색상 선으로 표시되고, 도착한 결과가 팝업으로 나타납니다.
6. 모든 참가자가 완료되면 버튼이 전부 완료 상태로 바뀝니다.

결과를 다시 정하고 싶다면 인원수나 결과 항목을 수정한 뒤 사다리 생성 버튼을 다시 누르면 됩니다.

활용 예시

• 점심 메뉴 정하기
• 벌칙 정하기
• 선물 추첨하기
• 팀 배정하기
• 발표 순서 정하기

사다리타기 게임은 단순한 놀이처럼 보이지만, JavaScript의 배열 처리, Canvas 그리기, 이벤트 처리, 애니메이션 로직을 함께 학습할 수 있는 좋은 예제입니다.

웹 개발을 처음 배우는 분들도 이 구조를 따라가면 인터랙티브한 웹 도구를 만드는 흐름을 이해할 수 있습니다.

HTML5 Canvas로 테트리스 게임 만들기

이 글에서는 JavaScript와 Canvas를 활용하여 테트리스 게임을 구현하는 방법을 설명합니다. 블록 이동, 회전, 충돌 판정, 점수 계산 등 게임의 핵심 로직을 직접 구현할 수 있습니다.

아래 게임을 직접 실행해보면서 동작 원리를 확인해보세요.

핵심 로직

1. createMatrix()
게임판 배열을 생성하는 함수입니다.
테트리스 게임판은 10칸 × 20줄 구조이며, 각 칸은 0 또는 블록 번호를 저장합니다.
0은 빈 칸을 의미하고, 1~7은 서로 다른 테트리스 블록 색상을 의미합니다.

2. drawBoard()
canvas 위에 현재 게임판을 다시 그리는 함수입니다.
먼저 기존 화면을 지우고, 격자선을 그린 다음, 고정된 블록과 현재 떨어지고 있는 블록을 함께 출력합니다.

3. collide()
현재 블록이 벽, 바닥, 기존 블록과 충돌했는지 확인합니다.
블록이 이동하거나 회전할 때마다 이 함수를 사용하여 가능한 움직임인지 검사합니다.

4. merge()
떨어지던 블록이 더 이상 내려갈 수 없을 때, 해당 블록을 게임판 배열에 고정합니다.
이후 새로운 블록이 생성됩니다.

5. sweep()
가로 한 줄이 모두 채워졌는지 검사하고, 채워진 줄을 제거합니다.
줄이 제거되면 점수가 올라가고, 일정 줄 수 이상이 되면 레벨이 증가합니다.

6. update()
게임 루프를 담당하는 함수입니다.
requestAnimationFrame()을 이용해 화면을 계속 갱신하고, 일정 시간이 지나면 블록이 자동으로 한 칸씩 내려가도록 처리합니다.

테트리스 구현 핵심 정리

테트리스는 2차원 배열을 활용하여 블록의 위치를 관리하며, 충돌 감지와 회전 알고리즘을 통해 동작합니다.

이러한 구조를 이해하면 다양한 게임이나 인터랙티브 웹 기능으로 확장할 수 있습니다.

이미지 용량 줄이기 · 배경 투명 변환기 — 브라우저에서 바로 처리

이미지 파일을 선택하거나 드래그&드롭하면 용량 압축·포맷 변환·배경 투명 처리를 브라우저에서 바로 실행합니다.
이미지가 서버로 전송되지 않아 개인 사진이나 업무 자료도 안심하고 사용할 수 있습니다.

• 용량 압축 — 최대 크기(px)와 품질(%) 조절로 파일 크기 대폭 감소
• 포맷 변환 — WEBP · JPG · PNG 세 가지 포맷으로 자유롭게 변환
• 배경 투명 처리 — 단색 배경을 지정 색상·오차 범위로 제거해 투명 PNG/WEBP 생성
• 다중 파일 지원 — 여러 이미지를 한 번에 선택해 일괄 변환
• 드래그&드롭 — 파일 탐색기에서 직접 끌어다 놓기 가능
• 완전 로컬 처리 — 이미지가 외부 서버로 전송되지 않아 개인정보 안전

이미지 용량 줄이기 , 배경 투명

이미지는 서버로 업로드되지 않고, 내 브라우저에서만 변환됩니다.

사용 방법

1. 파일 선택 버튼으로 이미지를 고르거나, 드래그&드롭 영역에 파일을 끌어다 놓습니다.
2. 최대 크기(px)를 설정합니다. 가로·세로 중 긴 쪽이 이 값을 넘지 않도록 자동 축소됩니다.
3. 품질(%) 슬라이더로 압축 강도를 조절합니다. 낮을수록 용량이 작아지고 화질이 떨어집니다.
4. 저장할 포맷(WEBP·JPG·PNG)을 선택합니다. 가장 작은 용량을 원한다면 WEBP를 추천합니다.
5. 배경을 투명하게 만들고 싶다면 배경 투명 체크 후 제거할 색상과 오차 범위를 설정합니다.
6. 변환 시작을 누르면 결과 표에 원본·결과 용량·절감량이 표시되고 다운로드 버튼이 나타납니다.

포맷별 특징 비교

자주 묻는 질문 (FAQ)

빈 줄 제거기 — 공백 줄 · 숨겨진 특수 문자 자동 정리

텍스트를 붙여넣으면 불필요한 빈 줄(공백 줄)을 자동으로 제거하고, 눈에 보이지 않는 제로폭 공백 같은 숨겨진 특수 문자까지 함께 정리해주는 도구입니다.
블로그 글 편집, 문서 정리, 코드 클린업 등 빈 줄이 많아진 텍스트를 빠르게 다듬을 때 유용합니다.

• 빈 줄 자동 제거 — 연속된 빈 줄·공백만 있는 줄을 한 번에 정리
• 제로폭 공백 제거 — 눈에 보이지 않는 Zero-width 특수 문자(U+200B 등) 자동 삭제
• 실시간 자동 변환 — 체크 옵션으로 입력 즉시 결과 반영
• 결과 복사 — 변환된 텍스트를 클립보드에 바로 복사
• 전체 삭제 — 입력·출력 칸을 한 번에 초기화

사용 방법

1. 왼쪽 변환할 텍스트 칸에 정리할 텍스트를 붙여넣습니다(Ctrl+V).
2. 자동 변환 체크가 켜져 있으면 입력 즉시 오른쪽 변환 결과 칸에 결과가 나타납니다.
3. 복사 버튼을 누르면 변환된 텍스트가 클립보드에 복사됩니다(Ctrl+C로도 가능).
4. 다시 시작하려면 삭제 버튼으로 입력·출력 칸을 모두 초기화하세요.

제거되는 항목

자주 묻는 질문 (FAQ)