자바스크립트 작은 자위 게임 구현 원리 설명_자바스크립트 기술

게임 방법: 위, 아래, 왼쪽, 오른쪽의 움직임을 제어하고 공간을 활용하여 발사합니다. 적기가 명중할 때마다 5,000점마다 플레이어의 비행기가 발사하는 탄환 수가 1씩 증가하며, 플레이어가 적기에 맞거나 적기가 날아갈 경우 최대 4발까지 증가합니다. 바닥까지 그는 패배합니다. . . .

데모 코드:http://demo.jb51.net/js/FlyBeat/index.html

현재 게임 기능은 비교적 간단합니다. . . . 그냥 소스코드만 올리는 것은 좋지 않은 것 같아서 이번에는 제 생각을 적어보겠습니다. . .

게임은 크게 4개의 js 파일로 구성되어 있으며, 4개의 js 파일 각각에는 4개의 클래스가 포함되어 있습니다.
1: 항공기 유형---플라이어

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

//항공기에 해당하는 DOM 요소
this.dom = null
//살아있는지
this.isLive = true인지; 이동 중
this.isMove = false;//이동 ID
this.moveId = null
//글머리 기호 전송 여부
this.isSend = false; //지금까지 보낸 총알 수 Bounce (화면 표시에 존재)
this.nowBullet = 0
//게임 배경 Dom
gamePanel: null,
//게임 배경 너비
gameWidth: 0,
// 게임 배경 높이
gameHeight: 0,
//항공기 이동 속도
movepx: 10,
//항공기 이동 주파수
movesp: 30 ,
//항공기 총알 레벨
bulletLevel: 1,
//최대 총알 수(화면 표시에 존재)
maxBullet: 12,
//방향 키 값 해당
keyCodeAndDirection: {
37: "왼쪽",
38: "위",
39: "오른쪽",
40: "아래"
},


위는 항공기가 갖춰야 할 속성입니다. . . .

항공기
일부 고정 속성 외에도 혈액량도 있어야 하지만 이는 간단한 버전이므로 직접 추가할 수 있습니다.

이동, 총알 발사, 폭발 등 방법도 있어야 합니다.

이동 : 사실 키보드 이벤트를 캡쳐하기 위한 것인데, 단순히 키보드의 왼쪽 키를 누른 후 기체가 왼쪽으로 몇 픽셀씩 이동하면 기체가 매우 뻣뻣하게 움직이는 것을 볼 수 있습니다. , 또는 조작이 지연됩니다. 특히 키보드의 왼쪽을 누르고 싶을 때 움직일 때 지연이 심하고 조작이 원활하지 않습니다. 따라서 일반적으로 키보드를 누를 때 setInterval 함수를 호출하여 항공기가 계속 움직이도록 합니다. 키보드를 놓으면 움직임이 중지되어 움직임이 매우 매끄러워집니다.

총알 발사: 실제로 사용자가 스페이스 버튼을 누른 다음 키보드 이벤트를 트리거합니다. 이 이벤트는 Bullet 클래스의 개체를 생성한 다음 날아가게 합니다. 이 카테고리는 나중에 논의하겠습니다.

폭발: 비행기가 적 비행기에 부딪히면 비행기가 폭발 이벤트를 유발하고 게임이 종료됩니다. 물론 항공기가 적 항공기에 충돌했는지 여부에 대한 탐지는 적 항공기에서 수행됩니다.

기본적인 이벤트입니다. 확장된 이벤트도 있습니다. . 직접 추가할 수 있습니다

2: 글머리 기호 유형--글머리 기호

코드 복사 코드는 다음과 같습니다. //총알 돔 요소

this.dom = null;

//총알 이동 속도
movepx: 8,
//총알 이동 빈도
movesp: 10 ,


가장 기본적인 두 가지 총알 방법:
이동

및
적 항공기 명중 여부 감지 이동: 총알의 움직임은 훨씬 간단합니다. 계속 위로 달리면 상단이 계속 감소합니다.

적 항공기 명중 여부 감지: 적 항공기 목록을 메소드에 전달하고, 적 항공기를 횡단하여, 총알이 적 항공기와 충돌하는지 감지하고, 적 항공기와 충돌이 있는 경우, 적 항공기는 폭발할 것입니다. 그렇지 않으면 건너뜁니다.

3: 적 항공기 유형--Enemy

코드 복사 코드는 다음과 같습니다. //적 항공기 돔 요소

this.dom = null;

//여부
this.isLive = true
//적 항공기 측면 이동 속도
movepx: 6,
//적 항공기 종방향 이동 속도
movepy: 4,
//적 항공기 이동 주파수
movesp: 75,


적 항공기의 기본 방법은 이동, 플라이어 플레이어 타격 여부, 폭발

이동 : 적기가 위에서 아래로 날아간 다음 왼쪽에서 오른쪽으로 날아가서 오른쪽 끝을 맞고 돌아서도록 설정했습니다.

플라이어 플레이어와 충돌 여부: 적 항공기가 계속 이동하는 동안 플라이어 항공기와 적 항공기가 교차하는지 지속적으로 감지하면 둘이 폭발하고 게임이 종료됩니다. 그렇지 않으면 건너뜁니다.

폭발: 적 항공기가 총알에 맞거나 플라이어 항공기와 충돌할 때 발생하는 이벤트입니다.

4: 게임 조작형--게임

확장 메소드가 포함되어 있습니다: 배열에서 지정된 요소를 삭제합니다

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

//확장 배열 방식, 특정 값 삭제 ​​
Array.prototype.remove = function(obj){

for(var i=0,l=this. length;i < l ;i ){
if(this[i] == obj){
this.splice(i,1)
return this;
throw "The Array has no this Obj";
}


나머지는 적 항공기 초기화, 게임 프로세스 제어 및 점수 수정을 위한 몇 가지 방법입니다. 그리고 게임 종료. 이야기 할 것이 없습니다.

그렇습니다. 게임 자체는 비교적 간단합니다. 아래 소스 코드에 이번에는 좀 더 자세히 작성했습니다. . . 관심이 있는 친구들은 계속 발전할 수 있습니다. . . 궁금한 점이 있으시면 언제든지 댓글을 남겨주세요. . . 조언 좀 부탁드립니다.
패키지 다운로드 주소
http://www.jb51.net/jiaoben/32660.html