룰렛 자바스크립트(원판 회전) - jQueryRotate.js

   룰렛게임 자바스크립트 (with. 제이쿼리, jqueryrotate library)

 

※ 경고. 연구용도를 제외한 소스와 결과물의 '상업적 이용'을 절대 금합니다.

 

수정 : 2015.06.18

 

룰렛 회전을 구현하기 위해서는 ccs3의 속성을 이용하면 되지만, 브라우저의 가장 큰 문제는 호환성이기에,

 

jqueryrotate plugin 을 이용하여 구현해보는 방법을 알아보자.

 

이 라이브러리의 소개는 다음과 같다.

 

https://code.google.com/p/jqueryrotate/

 

http://beneposto.pl/jqueryrotate/

 

This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects) by a given angle on web pages. 

An experimental version 3 tries to rotate all objects, but with some small issues. 

You can find 3rd version in here

 

Description:

This is a simple plugin to allow you to rotate images (any angle) directly on client side 

(for ex. user generated content), and animate them using own functions. 

Main focus is to unify this behavior across different browsers.

 

Supported Browsers:

Internet Explorer 6.0 >

Firefox 2.0 >

Safari 3 >

Opera 9 >

Google Chrome

 

Notices:

Include script after including main jQuery. 

Whole plugin uses jQuery namespace and should be compatible with older version (unchecked).

 

Please put all issues into a ISSUES page. 

If you want - you can also checkout repository and path the code on your own. 

If you do that please send me patch so I can apply it into trunk.

 

Implementation:

To support so many old browsers there are few techniques being used:

 

For modern browsers (Safari, Chrome, Opera, IE 9) plugin uses native CSS3 attributes (-ms-transform, -transform-property, -webkit-transform, -o-transform).

 

For older browsers with CANVAS support image is being replaced by a CANVAS component that can be easily rotated using internal canvas methods,

 

For older IE browsers VML is being used,

 

- 간략한 해석을 덧붙이자면 :

 

HTML의 IMG 개체를 회전하는 jQuery기반의 플러그인.

 

버전 3부터는 모든 개체를 회전가능하지만 몇 가지 작은 문제가 있으므로 참고할 것 (테스트필요)

 

- 지원되는 브라우저 :

인터넷 익스플로러 6.0 >
파이어 폭스 2.0 >
사파리 3 >
오페라 9 >
구글 크롬

 

 

- 주요사항 :

 

jQuery 를 포함하여야 하기 때문에 네임 스페이스를 사용하여 이전 버전과 호환되어야 한다.

일단 신형 브라우저에서는 CSS3를 기반으로 하지만 구형 브라우저는 Canvas및 VML(구형IE)로 

내부구현을하기 때문에 대체되어 사용된다.

 

 

   Download

 

http://beneposto.pl/jqueryrotate/

 

THX to Wilq32 :)

 

   API

 

 

 

 

 

 

 

   룰렛 구현

 

간단하게 % 모듈러스 연산과 원의 각도인 360도를 사용하여 구현하였다.

이미지가 정교하지 못해서 각도의 오차를 18도 정도 주었다.

소스 코드 상으로 보면 n%360 +18; 정도를 추가하였다.

실무에서는 이미지에 따라서 각도의 범위(오차)만 손봐주면 더욱 정교한 판정이 가능하다. 

 

 

   TODO

 

룰렛 이미지 대신에, 룰렛을 제작하는 값을 입력받아서, 이를 SVG로 그리는 기능을 추가하면 훨씬 편할 것 같다.