추신 :이 탱크 전투는 온라인 및 오프라인 소스 코드 후에 다시 쓰기였습니다. 그 자체로는 너무 어려운 것이 없습니다. 이 사례는 JS 객체 지향을 사용하며 JS 객체 지향에 대한 소개 자습서로 사용할 수 있습니다.
1. 기본 객체를 만들어 탱크의 간단한 움직임을 실현합니다.
1.1지도에서 캔버스를 그리는 방법 ?
브라우저 호환성 문제를 고려할 때 DOM을 사용하여 게임 객체를 그리고 새로 고침합니다. 우리는지도를 어떻게 저장합니까? 우리는지도를 2 차원 배열로 저장해야합니다. JS에는 2 차원 배열이 없지만 배열을 1 차원 배열에 저장하여 달성 할 수 있습니다.
1.2 코드 구현
우리는 캔버스를 13 * 13의 2 차원 배열로 설계합니다. 각 요소는지도에서 해당 길이와 너비를 갖습니다. 전체지도를 40px * 40px 크기의 셀로 구성된 테이블로 간주 할 수 있으므로 전체 캔버스의 크기는 520px * 520px입니다.
코드를 입력하기 전에 객체 관계 다이어그램을 제공합니다.
1.2.1 최상위 객체 생성
HTML 코드 :
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<헤드>
<TITLE> 전차 전쟁 </제목>
<link rel = 스타일 시트 href = "css /main.css" />
<script src = "js/common.js"> </script>
<script src = "js/tankobject.js"> </script>
<script src = "js/mover.js"> </script>
<script src = "js/tank.js"> </script>
<script src = "js/frame.js"> </script>
<cript>
Window.onload = function () {
// 게임로드 객체를 호출합니다
var loader = new Gameloader ();
loader.begin ();
}
</스크립트>
</head>
<body>
<!-맵 컨테이너->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
tankobject.js 파일 :
코드 사본은 다음과 같습니다.
// 최상위 객체
tankObject = function () {
this.xposition = 0; // 맵에서 X의 객체 위치 (13*13)
this.yposition = 0;
this.ui = null; // dom 요소
}
// UI 정적 메소드를 변경합니다
tankobject.prototype.updateui = function (battlfiled) {}
// 위치를 설정하고 매개 변수는 다음과 같습니다. 1*40, 6*40
tankObject.prototype.setPosition = function (왼쪽 위치, Topposition) {
// 맵 위치에서 반올림 수학
this.xposition = math.round (왼쪽 위치 / 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에서 왼쪽과 상단을 사용하여 양식에서 객체의 위치를 제어하십시오. (유형용 물체 : 탱크, 총알)
1.2.2 공개 대상 만들기
또한 일반적으로 사용되는 방법 중 일부를 작성하려면 공개 대상을 만들어야합니다.
common.js :
코드 사본은 다음과 같습니다.
// 탱크 움직임의 네 방향
var enumdirection = {
UP : "0",
오른쪽 : "1",
다운 : "2",
왼쪽 : "3"
};
// 일반 메소드 객체
var utilityClass = {
// DOM 요소를 ParentNode로 만들고 ID 및 ClassName을 지정합니다.
Createe : function (type, id, classname, parentnode) {
var j = document.createelement (유형);
if (id) {j.id = id};
if (className) {j.className = className};
return parentnode.appendChild (j);
}, // 요소를 제거합니다
removee : function (obj, parentnode) {
parentnode.removechild (OBJ);
},
getFunctionName : function (컨텍스트, ArgumentCallee) {
for (var I in context) {
if (context [i] == ArgumentCallee) {return I};
}
반품 "";
}, // 이벤트 바인딩, func 메소드를 반환하십시오. 이것은 전달 된 OBJ입니다.
bindfunction : function (obj, func) {
return function () {
func.Apply (obj, 인수);
};
}
};
1.2.3 움직이는 객체 만들기
mover.js
코드 사본은 다음과 같습니다.
// 객체를 이동하고 최상위 객체에서 상속합니다
mover = function () {
this.direction = enumdirection.up;
이 .speed = 1;
}
mover.prototype = new tankobject ();
mover.prototype.move = function () {
if (this.lock) {
반품;/* 비활성화되었거나 여전히 진행 중이며, 작업이 유효하지 않습니다*/
}
// 방향에 따라 탱크의 배경 그림을 설정합니다.
this.ui.style.backgroundPosition = "0-" + this.Direction * 40 + "px";
// 방향이 위아래로 위아래로 있으면 vp는 상단입니다. 방향이 위와 왼쪽이면 Val은 -1입니다.
var vp = [ "상단", "왼쪽"] [((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;/* 잠금*/
// 현재 객체를 저장합니다
var this = 이것;
// 레코드 객체 이동 시작 위치
var startMovep = parseint (this.ui.style [vp]);
var xp = this.xposition, yp = this.yposition;
var submove = setInterval (function () {
// 매번 5px 이동을 시작합니다
this.ui.style [vp] = parseint (this.ui.style [vp]) + 5 * val + "px";
// 셀당 40px
if (math.abs ((parseint (this.ui.style [vp]) - StartMovep)> = 40) {
ClearInterval (서브 모드);
this.lock = false;/* 잠금 해제, 다시 스텝핑을 허용*/
// 이동 후 테이블의 객체 위치를 기록합니다.
this.xposition = math.round (this.ui.offsetleft / 40);
this.yposition = math.round (this.ui.offsettop / 40);
}
}, 80- this.speed* 10);
}
여기에서 움직이는 객체는 최상위 객체에서 상속되며 이는 이동 방법을 호출하는 객체를 나타냅니다.
이동 객체의 함수는 물체의 방향과 속도에 따라 움직입니다. 5px를 움직일 때마다 총 40px 셀을 이동하십시오. 객체는 나중에 확장되고 충돌 감지 및 기타 기능이 추가됩니다.
1.2.4 탱크 개체 생성
Tank.js 파일 :
코드 사본은 다음과 같습니다.
// 탱크 객체는 발동기에서 상속합니다
탱크 = function () {}
tank.prototype = new Mover ();
// 플레이어 탱크 생성, 탱크 객체에서 상속
selftank = function () {
this.ui = utilityClass.createe ( "div", "", "itank", document.getElementById ( "divmap"));
this.movingstate = false;
이 .speed = 4;
}
selftank.prototype = 새로운 탱크 ();
// 탱크의 위치를 설정합니다
selftank.prototype.updateui = function () {
this.ui.classname = "itank";
// 상단 객체 메소드, 탱크 위치를 설정
this.setposition (this.xposition * 40, this.yposition * 40);
}
이제 플레이어 탱크 만 만들어졌으며 나중에 적 탱크를 추가 할 것입니다.
1.2.5 게임 로딩 객체 생성 (Core)
코드 사본은 다음과 같습니다.
// 게임은 전체 게임의 핵심 객체의 객체를로드합니다.
gameloader = function () {
this.mapcontainer = document.getElementById ( "divmap"); // 게임 맵을 저장하는 DIV
this._selftank = null; // 플레이어 탱크
this._gamelistener = null; // 게임의 기본 루프 타이머 ID
}
gameloader.prototype = {
시작 : function () {
// 플레이어 탱크를 초기화합니다
var selft = new selftank ();
selft.xposition = 4;
selft.yposition = 12;
selft.updateui ();
this._selftank = selft;
// 키 이벤트 추가
var warpper = utilityClass.BindFunction (this, this.onkeydown);
Window.onkeydown = document.body.onkeydown = Warpper;
Warpper = utilityClass.BindFunction (this, this.onkeyup);
Window.onkeyup = document.body.onkeyup = Warpper;
// 게임의 메인 루프
Warpper = utilityClass.BindFunction (this, this.run);
/*긴 타이머 모니터링 제어 키*/
this._gamelistener = setInterval (Warpper, 20);
}
// 키보드의 플레이어 탱크를 눌러 이동을 시작합니다.
, onkeydown : function (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 : function (e) {
스위치 ((window.event || e) .keyCode) {
사례 37 :
사례 38 :
사례 39 :
사례 40 :
this._selftank.movingstate = false;
부서지다;
}
}
/*게임의 메인 루프 실행 기능, 게임의 중심, 허브*/
, run : function () {
if (this._selftank.movingstate) {
this._selftank.move ();
}
}
};
게임로드 객체 코드는 많이 보이지만 실제로는 두 가지만 수행합니다.
1. 플레이어 탱크 객체를 만듭니다.
2. 주요 모니터링 이벤트를 추가하십시오. 플레이어가 모바일 키를 누르면 탱크 이동 방법을 호출하여 탱크를 이동하십시오.
요약 :이 시점에서 탱크는 버튼을 눌러 자유롭게 움직일 수 있습니다. 다음 단계 맵과 충돌 감지를 개선해야합니다.