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();
         }

머리>

본문>

TankObject.js 파일:

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

// 최상위 객체
TankObject = 함수 () {
This.XPosition = 0; // 지도 내 객체의 X 위치(13*13)
This.YPosition = 0;
This.UI = null; // 돔 요소
}
//UI 정적 메소드 변경
TankObject.prototype.UpdateUI = 함수(battlFiled) { }
//위치를 설정합니다. 매개변수는 다음과 같습니다: 1*40,6*40
TankObject.prototype.SetPosition = 함수(leftPosition, topPosition) {
// 지도 위치의 Math.round
This.XPosition = Math.round(leftPosition / 40);
This.YPosition = Math.round(topPosition / 40);
//폼에 위치 설정
If (this.UI != null && this.UI.style != null) {
This.UI.style.left = leftPosition "px";
This.UI.style.top = topPosition "px";
}
}

여기서는 X, Y 좌표를 사용하여 지도에서 객체의 위치를 ​​나타냅니다. 나중에 지도의 각 객체를 2차원 배열로 배치하겠습니다. 이때 X, Y 좌표를 통해 해당 객체를 얻을 수 있습니다.
그런 다음 CSS의 left 및 top을 사용하여 양식에서 개체의 위치를 ​​제어합니다. (이동 가능한 물체: 탱크, 총알)

1.2.2 공개 객체 생성

또한 일반적으로 사용되는 메소드 중 일부를 작성하려면 공용 객체를 생성해야 합니다.

Common.js：

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

//탱크 이동 방향
var EnumDirection = {
위로: "0",
오른쪽: "1",
아래쪽: "2",
왼쪽: "3"
};
//일반 메소드 객체
var UtilityClass = {
//parentNode에 dom 요소를 생성합니다. id, className
을 지정할 수 있습니다. CreateE: 함수(유형, ID, className, parentNode) {
          var J = document.createElement(type);
If (id) { J.id = id };
If (className) { J.className = className };
          parentNode.appendChild(J) 반환;
}, // 요소 제거
​ RemoveE: 함수(obj, parentNode) {
         parentNode.removeChild(obj);
},
GetFunctionName: 함수(컨텍스트, 인수Callee) {
for (문맥상 var i) {
If (context[i] == 인수Callee) { return i };
}
         ""를 반환합니다.
}, // 이벤트를 바인딩하고 func 메서드를 반환합니다. 이것이 들어오는 obj입니다
BindFunction: 함수(obj,func) {
         반환 기능 () {
                func.apply(obj, 인수);
        };
}
};

1.2.3 움직이는 객체 만들기

Mover.js

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

//최상위 객체에서 상속된 객체 이동
무버 = 함수() {
This.Direction = EnumDirection.Up;
This.Speed ​​​​= 1;
}
Mover.prototype = new TankObject();
Mover.prototype.Move = 함수 () {
If (this.lock) {
             return;/* 비활성화되었거나 아직 진행 중인 경우 작업이 유효하지 않습니다 */
}
//방향에 따라 탱크의 배경 이미지를 설정
This.UI.style.BackgroundPosition = "0 -" this.Direction * 40 "px";
// 방향이 위와 아래이면 vp는 위쪽이고, 방향이 위와 왼쪽이면 val은 -1입니다.
var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) ? 0 : 1];
var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) ? -1 : 1;
This.lock = true;/* 잠금 */
//현재 객체를 This에 저장
var 이것 = 이것;
//객체 이동 시작 위치 기록
var startmoveP =parseInt(This.UI.style[vp]);
var xp = This.XPosition, yp = This.YPosition;
var subMove = setInterval(function () {
                         // 이동 ​​시작, 매번 5px
This.UI.style[vp] = parsInt(This.UI.style[vp]) 5 * val "px";
                      // 한 셀씩 40px 이동
If (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {
                clearInterval(subMove);
This.lock = false;/* 잠금 해제, 다시 실행 허용 */
// 이동 ​​후 테이블에 객체의 위치를 ​​기록합니다
This.XPosition = Math.round(This.UI.offsetLeft / 40);
This.YPosition = Math.round(This.UI.offsetTop / 40);
         }
}, 80 - this.Speed​​* 10);
}

여기의 이동 개체는 최상위 개체에서 상속되며 여기서는 Move 메서드를 호출하는 개체를 나타냅니다.
객체 이동 기능은 객체의 방향과 속도에 따라 5px씩 이동할 때마다 총 40px씩 한 셀씩 이동합니다. 이 객체는 추후 확장될 예정이며, 충돌 감지 등의 기능이 추가될 예정입니다.

1.2.4 탱크 객체 생성

Tank.js 파일:

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

//Mover에서 상속받은 탱크 객체
탱크=함수(){}
Tank.prototype = new Mover();

//탱크 객체에서 상속된 플레이어 탱크 생성
SelfTank = 함수 () {
This.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
This.MovingState = false;
This.Speed ​​​​= 4;
}
SelfTank.prototype = new Tank();
//탱크 위치 설정
SelfTank.prototype.UpdateUI = 함수 () {
This.UI.className = "itank";
// 최상위 객체 메소드, 탱크 위치 설정
This.SetPosition(this.XPosition * 40, this.YPosition * 40);
}

이제 플레이어 탱크만 생성되었으며 나중에 적 탱크를 추가할 예정입니다.

1.2.5 게임 로딩 객체 생성(코어)

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

// 게임 로딩 객체 전체 게임의 핵심 객체
GameLoader = 함수 () {
This.mapContainer = document.getElementById("divMap"); // 게임 맵을 저장하는 div
This._selfTank = null; // 플레이어 탱크
This._gameListener = null; // 게임 메인 루프 타이머 ID
}
GameLoader.prototype = {
시작: 함수 () {
// 플레이어 탱크 초기화
        var selfT = new SelfTank();
            selfT.XPosition = 4;
            selfT.YPosition = 12;
            selfT.UpdateUI();
This._selfTank = selfT;
                          // 주요 이벤트 추가
          var 래퍼 = UtilityClass.BindFunction(this, this.OnKeyDown);
             window.onkeydown = document.body.onkeydown = 워퍼;
           워퍼 = UtilityClass.BindFunction(this, this.OnKeyUp);
            window.onkeyup = document.body.onkeyup = 워퍼;
                    // 게임 메인 루프
           워퍼 = UtilityClass.BindFunction(this, this.Run);
/*긴 타이머 모니터링 제어 키*/
This._gameListener = setInterval(warpper, 20);
}
// 키보드를 누르면 플레이어 탱크가 움직이기 시작합니다
, OnKeyDown: 기능 (e) {
스위치 ((window.event || e).keyCode) {
사례 37:
This._selfTank.Direction = EnumDirection.Left;
This._selfTank.MovingState = true;
부서지다; 사례 38:
This._selfTank.Direction = EnumDirection.Up;
This._selfTank.MovingState = true;
부서지다; 사례 39:
This._selfTank.Direction = EnumDirection.Right;
This._selfTank.MovingState = true;
부서지다; 사례 40:
This._selfTank.Direction = EnumDirection.Down;
This._selfTank.MovingState = true;
부서지다;          }
}
// 이동을 멈추려면 버튼이 팝업됩니다
, OnKeyUp: 기능(e) {
스위치 ((window.event || e).keyCode) {
사례 37:
사례 38:
사례 39:
사례 40:
This._selfTank.MovingState = false;
                  휴식;
         }
}
/*게임 메인 루프 실행 기능, 게임의 핵심이자 허브*/
, 실행: 함수 () {
If (this._selfTank.MovingState) {
This._selfTank.Move();
         }
}
};

게임 로딩 개체 코드는 많아 보이지만 실제로는 두 가지 작업을 수행합니다.
​ 1. 플레이어 탱크 객체를 생성합니다.
​ 2. 키 청취 이벤트를 추가합니다. 플레이어가 이동 키를 누르면 탱크 Move 메소드가 호출되어 탱크를 이동합니다.

요약: 이 시점에서 탱크는 버튼을 눌러 자유롭게 이동할 수 있습니다. 다음으로 지도와 충돌 감지 기능을 개선해야 합니다.