Html5 게임 개발 탁구 게임 예제(3)_html5 튜토리얼 기술

jQuery 소개
[인터넷에 많이 있으니 이 부분은 생략하겠습니다. 이해가 안가시면 연락주세요]
jQuery를 이용해 게임 요소를 조작합니다
jQuery로 라켓을 초기화했습니다. 이제 jQuery를 사용하여 게임 요소를 배치하는 방법을 실험해 보겠습니다.
이동 - jQuery를 사용하여 요소의 위치 수정
그리드 배경을 사용하여 게임의 요소 위치를 확인하겠습니다 :
계속해서 PingPong 예제를 사용해 보겠습니다. .
2. 여기에서 필요한 그리드 배경 이미지를 다운로드하세요.
3. 운동 디렉터리에 이미지라는 폴더를 만듭니다.
4. 다운로드한 이미지를 jimages 폴더에 넣습니다. 이 이미지는 나중에 픽셀의 변위를 확인하는 데 도움이 됩니다.
5. 다음으로 편집기에서 index.html을 엽니다.
6. 플레이그라운드 DIV의 배경 속성을 다음과 같이 수정하여 픽셀 그리드 이미지를 포함합니다.

코드 복사

코드는 다음과 같습니다.

#playground{
배경: # e0ffe0 url(images/pixel_grid.jpg);
너비: 400px;
높이: 200px;
오버플로:


7. 이제 브라우저에서 index.html을 열면 다음 스크린샷을 볼 수 있습니다. 그리드가 게임 배경에 오버레이되어 있으며 이제 모든 요소의 위치를 ​​볼 수 있습니다

무슨 일이 있었던 걸까요?
디버깅을 용이하게 하기 위해 배경에 pixel_grid.jpg라는 이미지를 배치했습니다. 이 이미지에는 작은 격자가 많이 있으며 각 10x10 격자는 큰 100x100 픽셀 블록을 형성합니다. 이 이미지에는 화면에서 요소의 위치를 ​​측정할 수 있는 눈금자가 있습니다.