커피 스크립트에서 행복한 휴일

이 축제 HTML5/Coffeescript Application Application은 휴일 응원을 브라우저에 가져옵니다! 눈송이가 떨어지는 눈송이, 깜박임 조명 및 징글 벨 음악으로 완성 된 애니메이션 겨울 장면을 만듭니다. 간단하게 보이지만 더 복잡한 프로젝트에 적용 할 수있는 강력한 HTML5 및 커피 스크립트 기술을 선보입니다. 이 기사는 웹 페이지 내에서 응용 프로그램의 구조, 컴파일 및 임베딩을 안내합니다. 첨부 파일에는 소스 코드와 CoffeeScript 코드를 설명하는 상세한 PDF가 포함됩니다. 참고 : 이 응용 프로그램은 Chrome, Firefox, Internet Explorer 9, Opera 및 Safari 데스크톱 브라우저에서 테스트되었습니다. hhfcs 소개

Coffeescript (HHFCS)의 해피 홀리데이는 HTML5 Canvas API를 사용하여 야간 겨울 숲 장면을 렌더링합니다. 떨어지는 눈송이와 반짝이는 화환은 전경을 애니메이션하는 반면 휴일 메시지는 징글 벨 (HTML5 오디오 API)의 조율로 사라집니다. 그림 1 은이 매력적인 장면의 스냅 샷을 표시합니다

HHFCS 응용 프로그램은 HHFCS 디렉토리 내에서 구성된 여러 파일과 오디오 및 이미지를위한 하위 디렉토리로 구성됩니다.

hhfcs/audio/jb.mp3 : Jingle Bells Music (MP3 형식, Firefox 및 Opera를 제외한 대부분의 브라우저에서 사용). hhfcs/audio/jb.ogg :

jingle bells music (OGG 형식, Firefox and Opera). hhfcs/hhfcs.coffee : 주요 응용 프로그램 커피 스크립트 코드 hhfcs/hhfcs.html : html 응용 프로그램을 포함시키기위한 파일 hhfcs/hhfcs.js : hhfcs.coffee hhfcs/images/message.png :

휴일 메시지 이미지 hhfcs/images/scen HHFCS/Images/Wreath0.png, hhfcs/images/wreath1.png, hhfcs/images/wreath2.png : 애니메이션 화환의 세 프레임 hhfcs/snowflake.coffee :

눈송이 클래스의 커피 스크립트 코드 hhfcs/snowflake.js : snowflake.coffee와 동등한 JavaScript를 컴파일했습니다 hhfcs/stripes.png : 웹 페이지 배경의 사탕 지팡이 패턴 hhfcs/title.png :

웹 페이지의 얼음 패턴 제목 이미지

브라우저는 커피 스크립트를 이해하지 못하기 때문에 파일은 Coffeescript 컴파일러 (CoffeeScript.org에서 사용 가능한 지침)를 사용하여 JavaScript로 컴파일되어야합니다. 이 명령을 사용하십시오 :

기능 래퍼를 제거합니다.

웹 페이지에 hhfcs를 포함시킵니다

제공된 파일은 응용 프로그램을 포함시킵니다. (목록 1 참조). HHFCS.html 리스팅 1 :

파일 내용

<code class="language-bash">coffee --compile --bare HHFCS
coffee --compile --bare Snowflake</code>

태그는 브라우저에서 올바른 문자 인코딩을 보장합니다. JavaScript 코드는 지정된 지연으로 애플리케이션을 초기화하고 그립니다. 결론

CoffeeScript에서 HHFC를 개발하는 것은 JavaScript를 직접 사용하는 것보다 훨씬 쉽고 빠른 것으로 판명되었습니다. 이것은 기본 커피 스크립트 응용 프로그램이지만 언어의 기능을 보여줍니다. 함께 제공되는 PDF는 응용 프로그램의 기능에 대한 자세한 설명을 제공합니다. 해피 홀리데이! [Coffeescript 소스 코드에서 해피 홀리데이에 대한 링크] (실제 링크로 바꾸기) HHFCS.html

위 내용은 커피 스크립트에서 행복한 휴일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!