소스 코드 다운로드_javascript 기술을 사용하는 javascript 시뮬레이션 탱크 전투 게임(html5 버전)

1. 핵심 포인트와 문제점 요약

1. JavaScript 상속의 경우 상위 클래스는 메소드 공유만 제공하는 것이 가장 좋으며, 생성자가 혼합되는 것을 방지하기 위해 속성은 각 하위 클래스에 기록됩니다. 상위 클래스와 하위 클래스.

2. 프로토타입 시뮬레이션 상속을 위한 코드는 모든 메소드 정의 전에 작성되어야 합니다. 그렇지 않으면 프로토타입 객체가 변경되고 메소드가 정의되지 않게 됩니다.

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

Hero.prototype = new Tank (0, 0, 0)
Hero.prototype.constructor = 영웅 ;
Hero.prototype.addLife = function(){
this.lifetimes ;
document.querySelector("#life").innerHTML = Hero.lifetimes; 🎜>
3. 캔버스에 그래픽을 그릴 때 사각형을 그리는 것 외에도 ctx.beginPath() 및 ctx.closePath()를 추가해야 합니다. 그렇지 않으면 예기치 않은 오류가 발생합니다.

4. concat 함수는 배열을 병합하거나 요소를 새 배열로 반환할 수 있습니다.

5. Image의 src 속성이 할당되면 이미지가 로드되지만 로드가 완료되지 않으면 이미지가 그려지므로, onload 이벤트 처리를 사용하세요

6. Array 함수를 확장하고 지정된 요소를 삭제합니다

코드 복사 코드는 다음과 같습니다. //지정된 요소를 삭제하도록 확장됨

Array.prototype.deleteElement = function(obj) {

if (obj) {
for (var i = 0; i < this.length; i ) {
if (this[i] === obj) {
this.splice (i , 1);
}
}
}
}


7. 타이머 설정, setInterval("fun",1000) 메소드의 첫 번째 매개변수는 다음과 같습니다. "hero.say()"와 같은 문자열은 이 코드 문자열을 실행하기 위한 eval과 유사하므로 매개변수를 함수에 가져오고 이 함수의 실행 컨텍스트도 지정할 수 있습니다. 하지만 함수가 핸들로 전달되면 매개변수를 사용할 수 없고 컨텍스트를 지정할 수 없습니다. 첫 번째 방법 외에도 클로저를 사용하여 이 문제를 해결했습니다.

코드 복사 코드는 다음과 같습니다. //타이머는 스스로 움직입니다

this.timer = setInterval((함수(컨텍스트) {

return function () {
Bullet.prototype.move.call (context)
}
}) (this), 30)


저장했습니다. 현재 실행 환경에서 호출 메소드를 호출하여 수동으로 실행합니다.

8. 기능 외에도 메소드의 기능적 설계에는 이 기능을 실행하기 위한 조건 감지가 포함되어야 합니다. 예를 들어 이동에는 이동할 수 있는 상황과 이동할 수 없는 상황이 포함되어야 합니다. . 이 테스트를 외부에 배치해서는 안 됩니다.

9. 코드를 작성할 때 디자인이나 최적화 문제를 먼저 생각하고 나서 최적화를 이야기하거나, 디자인을 먼저 하고 나서 구현하면 안 됩니다. 사고는 혼란스럽지 않고 명확해야 하며 한 가지 점에 집중해야 합니다.

10. JavaScript에는 sleep 함수가 없습니다. 간격 실행 목적을 달성하기 위해 변수를 생성할 수 있습니다.

2. 코드 구현

1. 프로그램은 Bomb.js,Bullet.js,Draw.js,Tank.js,index.html,img,music,

최종 효과

로 구분됩니다.

3. 코드
1.index.html

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

<머리>
<제목>









<본문>

按下回车键开始游戏

按下1键增加生命,默认是1

剩余生命数 :1

2.Draw.js

复代码 代码如下:

/**
* Alane이 14-3-18에 작성함.
*/

function draw(){
//총알과 탱크의 생사를 확인
checkDead()
/ /캔버스 지우기
ctx.clearRect(0,0,500,400);
//플레이어 그리기
if(!hero.isdead){
drawTank(hero); 🎜>hero.cutLife( );
}
//적 탱크 그리기
for (var i = 0; i <적.길이; i ) {
drawTank(enemys[i]) ;
}
//적 총알 그리기
for(var j=0;jvar temp = 적[j].bulletsList
for ( var i = 0; i < temp.length; i ) {
drawBullet(temp[i])
}
}
//선수 총알 그리기
bulletsList;
for (var i = 0; i < temp.length; i ) {
drawBullet(temp[i])
}

//폭탄 그리기
for(var i=0 ;idrawBown(Bombs[i])
}

}

function drawTank(tank) {
var x = 탱크.x;
var y = 탱크.y;
ctx.fillStyle = 탱크.color;

if(tank.direct == 0 || 탱크. direct ==2){
ctx.fillRect(x, y, 5,30)
ctx.fillRect(x 15, y, 5,30)

ctx.fillRect(x 6, y 8, 8, 15);

ctx.StrokeStyle = 탱크.color;
ctx.lineWidth = '1.5'
if(tank.direct == 0){
ctx.beginPath();
ctx.moveTo(x 10,y-2);
ctx.lineTo(x 10,y 8)
ctx.closePath(); {
ctx.beginPath();
ctx.moveTo(x 10,y 24)
ctx.lineTo(x 10,y 32);
ctx.closePath(); }

ctx.Stroke();
}else{
ctx.fillRect(x, y, 30,5)
ctx.fillRect(x, y 15, 30,5 );

ctx.fillRect(x 8, y 6, 15,8)

ctx.StrokeStyle = '#FF0000'
ctx.lineWidth = '1.5'; 🎜>if(tank.direct == 3){
ctx.beginPath();
ctx.moveTo(x-2,y 10)
ctx.lineTo(x 8,y 10);
ctx.closePath( );
}else{
ctx.beginPath()
ctx.moveTo(x 24,y 10)
ctx.lineTo(x 32,y 10 );
ctx.closePath();

ctx.Stroke()
}

}
function drawBullet(bullet) ctx.fillStyle = bullet.color ;
ctx.beginPath();
ctx.arc(bullet.x,bullet.y,2,360,true)
ctx.closePath(); .fill();
}

function drawBown(obj){
if(obj.life>8){
ctx.drawImage(im,obj.x,obj.y, 50,50);
}else if(obj.life>4){
ctx.drawImage(im2,obj.x,obj.y,50,50)
}else{
ctx.drawImage(im3,obj .x,obj.y,50,50)
}

obj.lifeDown()
if(obj.life<=0){
Bombs.deleteElement(obj) ;
}
}

function checkDead(){
//적 총알의 생사를 감지
for(var j=0; jvar temp = 적[j].bulletsList
for (var i = 0; i < temp.length; i ) {
var o = temp[ i];
if(o.isdead ){
temp.deleteElement(o)
}
}
}
//플레이어 총알의 생사 감지
var temp = Hero.bulletsList;
for (var i = 0; i < temp.length; i ) {
var o = temp[i]
if(o.isdead){
temp.deleteElement(o);
}
}

//적 탱크의 생사를 감지
for (var i = 0; i <적.길이; i ) {
var o = 적[i];
if( o.isdead){
enemys.deleteElement(o)
}
}


Bomb.js




코드 복사

코드는 다음과 같습니다.

/ *** Alane이 14-3-18에 작성함. */ 함수 Bomb(x,y){ this .life = 12; this.x = x this.y = y; 🎜>Bomb.prototype.lifeDown = function(){

this.life--;

Tank.js




코드 복사


코드는 다음과 같습니다.

/**
* Alane이 14-3-7에 작성함.
*/
/**
* 위로 0개
* 오른쪽으로 1개
* 아래로 2개
* 왼쪽으로 3개
* @param x
* @param y
* @param direct
* @생성자
*/
//************************************************** ****************************************/
//坦克父类
기능 탱크 (x, y, 직접) {
this.speed = 2;

}
Tank.prototype.moveUp = function () {
//边界检测
if (this.y < 0) {
//换方向
this.changeDirect();
반환;
}
this.y -= this.speed;
this.direct = 0;

}
Tank.prototype.moveDown = function () {
if (this.y > height - 30) {
this.changeDirect ();
반환;
}
this.y = this.speed;
this.direct = 2;
}
Tank.prototype.moveLeft = function () {
if (this.x < 0) {
this.changeDirect ();
반환;
}
this.x -= this.speed;
this.direct = 3;

}
Tank.prototype.moveRight = function () {
if (this.x > width - 30) {
this.changeDirect ();
반환;
}
this.x = this.speed;
this.direct = 1;

}

//变换方向
Tank.prototype.changeDirect = function () {
while (true) {
var temp = Math.round (Math. 무작위 () * 3);
if (this.direct != 임시) {
this.direct = 임시;
휴식;
}
}
//alert("x=" this.x " y=" this.y " direct=" this.direct)
}

//射击子弹
Tank.prototype.shot = function () {
if(this.isdead){
return;
}
if (this.bulletsList.length < this.maxBulletSize) {
//新建子弹
var bullet = null;
스위치(this.direct) {
case 0:
bullet = new Bullet(this.x 10, this.y - 2, 0, this.color);
휴식;
사례 1:
bullet = new Bullet(this.x 32, this.y 10, 1, this.color);
휴식;
사례 2:
bullet = new Bullet(this.x 10, this.y 32, 2, this.color);
휴식;
사례 3:
bullet = new Bullet(this.x - 2, this.y 10, 3, this.color);
휴식;
}
//放入弹夹
this.bulletsList.push (글머리 기호);
}
}
//************************************************** ****************************************/
//玩가
기능 영웅(x, y, direct) {
this.lifetimes = 5;
this.isdead = false;
this.color = '#FF0000';
this.x = x;
this.y = y;
this.direct = 직접;
this.bulletsList = [];
this.maxBulletSize = 10;
this.newlife = null;
}
Hero.prototype = 새 탱크(0, 0, 0);
Hero.prototype.constructor = 영웅;
Hero.prototype.addLife = function(){
this.lifetimes ;
document.querySelector("#life").innerHTML = Hero.lifetimes;
}
Hero.prototype.cutLife = function(){
if(this.lifetimes>=1 && !this.newlife){
this.lifetimes--;
this.newlife = setTimeout("hero.newLife()",2000);
}
}
Hero.prototype.newLife = function(){
this.isdead = false;
clearTimeout(hero.newlife);
hero.newlife = null;
document.querySelector("#life").innerHTML = Hero.lifetimes;
}


//************************************************** ****************************************/
//敌人坦克
function Enemy (x, y, direct) {
this.isdead = false ;
this.color = '파란색';
this.x = x;
this.y = y;
this.direct = 직접;
this.bulletsList = [];
this.maxBulletSize = 1;


//정时器,自动移动
this.timer1 = setInterval ((function (context) {
return function () {
//移动
Enemy. 프로토타입.move.call(컨텍스트);
}
}) (this), 30);

//정时器,射击
this.timer2 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.shot. 전화(컨텍스트);
}
}) (this), 2000);

//정时器,变换方向
this.timer3 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.changeDirect .call(컨텍스트);
}
}) (이것), 3000);
}

Enemy.prototype = 새 탱크(0, 0, 0);
Enemy.prototype.constructor = 적;
Enemy.prototype.move = function () {
switch (this.direct) {
case 0:
this.moveUp ();
휴식;
사례 1:
this.moveRight ();
휴식;
사례 2:
this.moveDown ();
휴식;
사례 3:
this.moveLeft ();
휴식;
}
}

Bullet.js

复代码 代码如下:

/**
* Alane이 14-3-11에 작성함.
*/
기능 글머리 기호(x, y, 직접, 색상) {
this.isdead = false;
this.x = x;
this.y = y;
this.direct = 직접;
this.speed = 4;
this.color = 색상;
//정정기器, 자동 실행
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (context)
}
}) (이것), 30);
}
Bullet.prototype.move = function () {
스위치(this.direct) {
case 0:
this.y -= this.speed;
휴식;
사례 1:
this.x = this.speed;
휴식;
사례 2:
this.y = this.speed;
휴식;
사례 3:
this.x -= this.speed;
휴식;
}

//边界检测
if (this.y < 0 || this.x > 너비 || this.y > 높이 || this.x < 0) {
clearInterval(this.timer);
this.isdead = true;
}

//碰撞检测 检测敌人坦克
for(var i=0;ivar temp = allTank[i];
if(temp.isdead){
계속;
}
스위치(temp.direct){
case 0:
case 2:if(this.x>temp.x && this.xtemp .y&& this.yif(this.color == temp.color){
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval(this.timer);
this.isdead = true;
temp.isdead = true;
}중단
사례 1:
사례 3:if(this.x>temp.x && this.xtemp.y&& this.yif(this.color == temp.color){
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval(this.timer);
this.isdead = true;
temp.isdead = true;
}휴식;
}
}

}

源码下载

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：javascript_javascript 스킬의 propertyIsEnumerable() 메소드 사용 소개다음 기사：javascript_javascript 스킬의 propertyIsEnumerable() 메소드 사용 소개

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술