댓글 : 키보드 경쟁을 사용하는 2 명의 플레이어가있는 탁구 게임입니다. 이 장에서 우리는 다음과 같습니다. 1. 개발 도구 준비 2. 첫 번째 게임 구축 -Ping Pong 3. 기본 포지셔닝에 jQuery JavaScript 라이브러리 사용 4. 키보드 입력 가져 오기
이 장에서는 다음과 같습니다.
개발 도구를 준비하십시오
첫 번째 게임 인 Ping Pong을 구축하십시오
기본 포지셔닝을 위해 jQuery JavaScript 라이브러리를 사용하는 법을 배우십시오
키보드 입력을 얻습니다
득점으로 탁구 게임을 만듭니다
게임의 다음 스크린 샷은이 장의 연구 결과입니다. 키보드에서 2 명의 플레이어가 플레이하는 탁구 게임입니다.
자, 지금 우리 게임을 시작합시다.
개발 환경을 준비하십시오
HTML5 게임 개발 및 웹 사이트 개발은 비슷합니다. 웹 브라우저와 우수한 텍스트 편집 도구가 필요합니다.
많은 텍스트 편집 도구가 우수합니다. 원하는 것을 사용하십시오. 하나가없는 경우 작고 빠른 편집 도구 인 메모장 ++를 사용하는 것이 좋습니다. 브라우저와 관련하여 HTML5, CSS3 기능을 지원하고 디버깅 도구를 제공 할 수있는 브라우저가 필요합니다.
Apple Safari (), Google Chrome (), Mozilla Firefox () 및 Opera () 중에서 선택할 수있는 몇 가지 브라우저가 있습니다.
HTML 문서를 준비하십시오
모든 웹 사이트, 페이지 및 HTML5 게임은 기본 HTML 문서로 시작합니다. 이 HTML 문서는 기본 HTML 코드로 시작합니다. 또한 index.html로 HTML5 게임 개발을 시작할 것입니다.
액션 시간
우리는 처음부터 HTML5 Ping Pong 게임을 만들 것입니다. 우리는 모든 것을 스스로 준비 해야하는 것처럼 들리며 운 좋게도 적어도 우리는 JavaScript 라이브러리를 도울 수있었습니다. jQuery는 우리가 모든 예제에서 사용할 JavaScript 라이브러리입니다. 이것은 JavaScript 논리를 단순화하는 데 도움이됩니다.
1. Pingpong이라는 새 폴더를 만듭니다
2. 폴더에서 JS라는 다른 폴더를 만듭니다
3. JQuery를 다운로드하십시오.
4. 제작을 선택하고 다운로드 JQuery를 클릭하십시오.
5. 생성 된 폴더에 jquery-1.7.1.min.js를 저장합니다
6. index.html이라는 새 파일을 생성하고 1로 생성 된 폴더에 저장하십시오.
7. 텍스트 편집기가있는 index.html 파일을 열고 빈 HTML 템플릿을 삽입하십시오.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> Ping Pong </title>
</head>
<body>
<Header>
<H1> Ping Pong </h1>
</헤더>
<FUTER>
이것은 Ping Pong 게임을 만드는 예입니다.
</바닥다>
</body>
</html>
8. 바디 엔드 태그 전에 jQuery 파일을 참조하십시오
<스크립트 src = js/jquery-1.7.1.min.js> </script>
9. 마지막으로, 우리는 jQuery가 성공적으로로드되었는지 확인하고 싶습니다. 우리는 보통 바디 엔드 태그 전에 jQuery 파일을 확인하기 위해 다음 코드를 배치합니다.
<cript>
$ (function () {
경고 (Ping Pong Battle에 오신 것을 환영합니다.);
});
</스크립트>
10. index.html을 저장하고 브라우저로 열 수 있습니다. 다음 프롬프트 창이 표시됩니다. 이것은 우리의 jQuery가 올바르게 설정되었음을 의미합니다.
무슨 일이에요?
방금 jQuery가있는 기본 HTML5 페이지를 만들었고 jQuery가 올바르게로드되었는지 확인했습니다.
새로운 HTML5 DOCTYPE
DocType 및 Meta 태그는 모두 HTML5에서 단순화됩니다.
html4.01에서는 doctype가 다음 코드가 필요하다고 선언합니다.
<! doctype html public "-// w3c // dtd html 4.01 // en" "http://www.w3.org/tr/html4/strict.dtd">
길어요? 그러나 HTML5에서 DocTyp 선언은 훨씬 간단합니다.
<! doctype html>
우리는 HTML 버전을 선언하지 않았으며, 이는 HTML5가 이전 HTML 버전과 호환 될 것이며 향후 HTML 버전도 HTML5 버전을 지원할 것임을 의미합니다.
메타 태그도 단순화되었습니다. 이제 다음 코드를 사용하여 HTML 문자 세트를 정의합니다.
<meta charset = utf-8>