javascript (1)_javascript 기술로 탱크 전투 전체 기록 만들기

PS: 이 탱크 전투는 온라인에서 소스 코드를 다운로드한 후 직접 다시 작성했습니다. 그 자체로는 그다지 어려운 것이 없습니다. 이 사례는 js 객체 지향을 더 잘 사용하며 js 객체 지향 입문 튜토리얼로 사용할 수 있습니다.

1. 탱크의 간단한 움직임을 구현하기 위한 기본 객체 생성

1.1 지도에 캔버스를 그리는 방법은 무엇인가요?

브라우저 호환성 문제를 고려하여 DOM 운영 방식을 사용하여 게임 개체의 그리기 및 새로 고침을 구현합니다. 지도를 어떻게 저장하나요? 맵을 2차원 배열로 저장해야 합니다. js에는 2차원 배열이 없지만 1차원 배열에 배열을 저장하면 가능합니다.

1.2 코드 구현

캔버스를 13*13의 2차원 배열로 디자인합니다. 맵의 각 요소에 해당하는 길이와 너비는 모두 40px입니다. 전체 맵은 40px*40p x 크기로 구성된 셀로 간주할 수 있습니다. 테이블이면 전체 캔버스의 크기는 520px * 520px입니다.

코드를 로드하기 전에 개체 관계 다이어그램을 제공하겠습니다.

1.2.1 최상위 객체 생성

html 코드:

코드 복사 코드는 다음과 같습니다.

            window.onload = 함수 () {
// 게임 로딩 객체 호출
            var loader = new GameLoader();
Loader.Begin();
         }