콩바구니의 그림일기

소개

예전에 머리가 좋아지는 스폰지에서 소개된바 있는, 카드를 뒤집는 게임 입니다. 한쌍의 같은 카드가 있는 여러장의 카드를 섞은후, 두장씩 뒤집으면서 뒤집은 두 카드가 같은카드이면 놔두고, 다른 카드면 도로 뒤집어두면서, 주어진 모든 카드를 전부 뒤집을때까지 카드를 뒤집은 횟수와 걸린 시간으로 기억력을 테스트하는, 그런 게임이였죠.
그것을 자바스크립트를 사용하여 웹게임으로 구현해보았습니다.
이 스크립트의 특징은, 난이도를 조절하기가 쉽고, DB와 연동하여 순위도 기록됩니다. 순위는 난이도별로 따로 출력됩니다.
카드 게임 하러 가기

가져가기

그런데 이 카드게임을 여러분의 블로그에도 설치할수 있습니다. 여러분이 맘에드는 카드로 바꿔치기도 가능합니다.
(단, 블로그에서 HTML 태그 입력이 가능해야 하고, 자바스크립트의 삽입이 가능해야 합니다. 서비스형 블로그는 대부분 자바스크립트 입력이 안되더군요. 티스토리는 가능합니다. 설치형 블로그는 거의 가능하다고 생각합니다.)
설치방법 어렵지 않습니다.
여러분이 준비해야 할 것은 카드로 사용할 몇장의 그림파일뿐입니다.

1. 다음의 코드를 포스팅할 블로그에 넣습니다.

1. <script type=”text/javascript” src=”http://kongbaguni.net/project/javascript-game/cardGame/cardgame.js”></script>
2. <script type=”text/javascript” src=”http://kongbaguni.net/project/javascript-game/cardGame/stylelink.js”></script>
3. <div id=“cardGame”>
   1. <img src=”card00.jpg” alt=”카드” />
   2. <img src=”card01.jpg” alt=”카드” />
   3. <img src=”card02.jpg” alt=”카드” />
   4. </div>

2. 이텔릭으로 표시된 부분이 카드의 그림을 넣는 곳입니다. 첫번째 그림은 카드의 뒷장이고, 두번째 부터는 앞면의 그림이 됩니다. 그림을 많이 등록하면 많이 등록할수록 게임의 난이도가 높아집니다. 카드의 겟수에는 제한이 없습니다.

3.카드의 크기는 가로 150px 세로 200px 을 추천합니다. 그보다 작아도 상관없지만, 크기가 가로 160px 세로 210px 보다 크면 카드가 잘려 보이게 됩니다.

다음은 워드프레스에 설치한 결과입니다.

당부의 말씀

이 게임을 가져가실때, 예제로 올린 그림파일을 직접 링크거는것은 삼가해주시길 바랍니다. 트래픽 문제가 생길수 있거든요. 그림파일을 다운로드 받아가시거나, 가급적 직접 준비한 그림파일을 사용하시길 바랍니다.

소스파일 다운로드

javasctipt-card-game

• Tags: javascript, 게임, 웹표준
• Permalink http://kongbaguni.net/wordpress/javascript-card-game/
• TrackBack URL http://kongbaguni.net/wordpress/javascript-card-game/trackback/