HTML5 CANVAS를 이용한 퍼즐 게임

소개글

다른 분 레포트 의뢰로 만든 퍼즐게임입니다.
HTML5 의 CANVAS 를 이용한 퍼즐게임이구요
난이도 3 * 3, 4 * 4, 5 * 5로 선택할 수 있습니다.

javascript 구현은 prototype을 이용한 객체 연결 방식으로 구현되어 있습니다.

HTML5로 구현되어 있기 때문에
IE (인터넷익스플로러) 9.0 버전 이상에서 확인이 가능하며,
그 외 다른 메이저브라우저 ( FF, Chrome, Safari 등) 의 최신 버전에서 돌아갑니다~

모든 함수에는 주석 설명이 붙어 있구요,
(코딩 습관상... 대부분의 설명 주석은 영어로 처리합니다 ;; 해석하기 어렵진 않아요 ... )
예)
/*********************************************************************************************************
// Game Ready (image Preivew)
//
// Function Name : ready
// Parameter : null
//
// description : Draw Image on Canvas
// 1. Random image resource extraction
// 2. When image Object is Loaded, calculate image's width & height
// 3. Set Canvas's width & height, Then Draw Image on Canvas
*********************************************************************************************************/
puzzle.prototype.ready = function(){
.....

컴파일 실행환경

Internet Explorer 9 이상, IE 외 메이저브라우저 최신버전

압축파일 내 파일목록

images/
images/bird.jpg
images/borakai.jpg
images/cat.jpg
images/glove.jpg
images/iu.jpg
images/jeju.jpg
images/monarisa.jpg
images/nalyu.jpg
images/news.jpg
images/praha.jpg
images/sulak.jpg
index.html
screenshot/
screenshot/1.jpg
screenshot/2.jpg
screenshot/3.jpg
screenshot/4.jpg
screenshot/5.jpg
script/
script/puzzle.js
style/
style/common.css
style/reset.css

전체 목록 보기

참고 자료

없음