의견 : jQuery로 라켓을 초기화했습니다. 이제 우리는 jQuery를 사용하여 게임 요소를 배치하고 그리드 배경을 사용하여 게임 요소의 위치를 확인하는 방법에 대한 실험을 수행하고 있습니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다. 여러분 모두가 행복한 게임 개발을 기원합니다
jQuery 소개[나는이 부분을 읽지 않을 것입니다. 인터넷에는 많은 사람들이 있습니다. 이해하지 못하면 바이두 소녀를 찾으십시오]
jQuery를 사용하여 게임 요소를 작동하십시오
우리는 jQuery로 라켓을 초기화했습니다. 이제 우리는 jQuery를 사용하여 게임 요소를 배치하는 방법에 대한 실험을합니다.
이동 - jQuery를 사용하여 요소의 위치를 수정하십시오.
그리드 배경을 사용하여 게임의 요소 위치를 확인해 봅시다.
1. Pingpong 예제를 계속 사용합시다.
2. 여기에서 필요한 그리드 배경 사진을 다운로드하십시오.
3. 연습 디렉토리에서 이미지라는 폴더를 만듭니다.
4. 다운로드 된 이미지를 Jimages 폴더에 배치하십시오. 이 이미지는 나중에 픽셀의 변위를 확인하는 데 도움이됩니다.
5. 다음, 편집기에서 index.html을 엽니 다.
6. Pixel Grid 사진을 포함하도록 Playground Div의 배경 속성을 다음과 같이 수정하십시오.
#운동장{
배경 : #e0ffe0 URL (images/pixel_grid.jpg);
너비 : 400px;
높이 : 200px;
위치 : 상대;
오버플로 : 숨겨진;
}
7. 이제 브라우저에서 index.html을 열어줍니다. 우리가보아야 할 것은 다음 스크린 샷이어야합니다. 그리드는 게임 배경에 덮여 있으며 이제 모든 요소의 위치를 볼 수 있습니다.
무슨 일이에요?
쉽게 디버깅을 위해 Pixel_Grid.jpg라는 이미지를 배경에 배치했습니다. 이 이미지에는 많은 작은 그리드가 있으며 각 10x10 그리드는 100x100 픽셀의 큰 덩어리를 형성합니다. 이 이미지를 통해 화면에서 요소의 위치를 측정 할 수있는 통치자가 있습니다.