티스토리 뷰
최근 javascript를 매우 효과적으로 사용할 수 있게 해주는 라이브러리인 jQuery를 공부하고 있습니다. 프로그래밍 연습에는 역시 직접 목적이 있는 프로그램을 만들어보는 것이 최고입니다. 제가 좋아하는 게임인 블랙잭을 웹에서 할 수 있는 게임으로 만들어보면서 javascript와 jQuery를 사용해보는 과정을 적어볼까 합니다. 코드 소스는 Color Scripter 사이트를 이용해서 첨부하였습니다.
만드는 방식은 간단한 것부터 끊임없이 "테스트"해가면서 완성을 향해 갑니다. 한꺼번에 모든 게임 소스를 작성하고 테스트하는 것이 아닙니다. (그러면 수백개의 실들이 엉켜있는 실뭉치를 풀어야하는 기분을 느낄 수는 있겠습니다만...)
Version 0.1 : 기본적인 index.html 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <title>My Web Game Programs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <h1>Black Jack Game</h1> </body> </html> | cs |
우선은 가장 기본적으로 모바일에서 쾌적하게 볼 수 있는 기본 웹페이지를 만듭니다. 참고로 원하는 휴대폰에서 쾌적하게 보이는지 확인은 다음카카오의 트로이에서 확인하시면 편합니다.
4번째 줄: 브라우저 탭에 표시될 페이지 제목 설정입니다.
5번째 줄: 웹페이지 가로폭을 휴대폰 해상도를 기준으로 맞춥니다.
7번째 줄: 아직 사용하진 않았지만 미리 jQuery를 사용할 수 있게 셋팅해둔 것입니다.
11번째 줄: 화면에 "Black Jack Game"이라고 가장 큰 제목으로 뜨게 합니다.
두번째 단계를 가봅시다. 우선 블랙잭 게임이기 때문에 카드 그림이 필요합니다. 아래는 제가 찾아본 카드 그림입니다.
출처 : http://tekeye.biz/free-resources/graphics/small_playing_cards
이 카드 그림을 우선 화면에 출력해봅시다. 보통 html에서 그림을 이용할 때는 <img src="주소">를 이용합니다. 하지만 여기서 우리는 이 카드를 통채로 쓰려고 하지 않고, 부분들을 잘라서 사용하려고 하니 <div>를 만들어서 배경이미지로 불러봅시다.
Version 0.1.1 : 사용할 카드 이미지 불러오기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title>My Web Game Programs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body bgcolor="#ffffff"> <h1>Black Jack (Made by Lazini)</h1> <div style="width: 820px; height: 281px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"></div> </body> </html> | cs |
앞의 소스에서 12번째 줄만 추가되었습니다.
12번째 줄: <div>라는 요소를 추가했고, 이 요소의 크기는 820x281로 설정하고, 배경 그림으로 위의 카드 그림을 불러왔습니다.
이제 우리가 원하는 것은 저 요소 전체를 불러오는 것이 아니라 한 장의 카드만 보이게 하는 겁니다.
Version 0.1.2 : 카드 한 장만 따로 보여주기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>My Web Game Programs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body bgcolor="#ffffff"> <h1>Black Jack (Made by Lazini)</h1> <div style="width: 820px; height: 281px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"> <div id='diamondA' style="width: 43px; height: 63px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"></div> </body> </html> | cs |
13번 줄: <div>를 하나 새로 만들었고, id를 diamondA라고 붙여줬습니다. 크기는 43x63으로 딱 저 카드 그림에서 한 장 사이즈입니다.
이번엔 하트 2를 보여주도록 해봅시다. 하트 2는 다이아몬드 A보다 한 칸 우측, 한 칸 아래줄에 있습니다.
Version 0.1.3 : 하트 2 카드 추가로 보여주기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>My Web Game Programs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body bgcolor="#ffffff"> <h1>Black Jack (Made by Lazini)</h1> <div style="width: 820px; height: 281px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"> <div id='diamondA' style="width: 43px; height: 63px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"></div> <div id='heart2' style="width: 43px; height: 63px; background-position: -52px -73px; background-image: url(http://tekeye.biz/wp-content/uploads/2013/01/small_playing_cards.png);"></div> </body> </html> | cs |
14번째 줄: 여기서 사용한 것은 <div>의 배경 이미지의 위치를 조정한 것입니다. 테스트해보니 배경 그림을 좌측으로 52픽셀, 위로 73픽셀 움직이면 하트 2가 <div> 틀 속에 들어갑니다. 이런 작업을 이미지 스트라이트라고 하는 것 같은데, 여러개의 그림을 불러오는 것보다 하나의 그림 파일 속에 필요한 요소들을 모두 넣어두고 필요한 부분만 이용하는 방식입니다. 한 번 불러온 파일을 계속 재사용하는 효율적인 방식이죠.
다음 번에는 위의 원리를 가지고 각 카드들을 어떻게 조작할지 자바스크립트와 jQuery를 이용해보겠습니다.
'기타' 카테고리의 다른 글
| 꾸준함과 흥미 유지 (3) | 2015.06.22 |
|---|---|
| 華(화) (오지은) (4) | 2015.06.14 |
| 마중 나갈게 (숨의숲) & 울지마 (윤기타) (0) | 2015.05.25 |
| 오월의 노래 (최민지) (4) | 2015.05.20 |
| 임을 위한 행진곡 (요조, 루빈) (2) | 2015.05.18 |