Javascript-simuliertes Panzerkampfspiel (HTML5-Version) mit Quellcode-Download_Javascript-Kenntnissen-js-Tutorial-php.cn

1. Fassen Sie die wichtigsten Punkte und aufgetretenen Probleme zusammen

1 Für die Vererbung in JavaScript ist es am besten, wenn die übergeordnete Klasse nur die gemeinsame Nutzung von Methoden bereitstellt und die Attribute in die jeweiligen Unterklassen geschrieben werden, um eine Vermischung der Konstruktoren zu vermeiden die Elternklasse und die Unterklasse.

2. Der Code für die Prototyp-Simulationsvererbung sollte vor allen Methodendefinitionen geschrieben werden, andernfalls wird das Prototypobjekt geändert und die Methode wird undefiniert, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

 
Hero.prototype = new Tank (0, 0, 0); 
Hero.prototype.constructor = Hero ; 
Hero.prototype.addLife = function(){ 
this.lifetimes ;document.querySelector("#life").innerHTML = hero.lifetimes; 🎜> 
3. Beim Zeichnen von Grafiken auf Leinwand müssen zusätzlich zum Zeichnen von Rechtecken ctx.beginPath(); und ctx.closePath(); hinzugefügt werden, sonst treten unerwartete Fehler auf. 

4. Die concat-Funktion kann Arrays zusammenführen oder Elemente in ein neues Array zurückgeben 

5 Nachdem das src-Attribut von Image zugewiesen wurde, wird das Bild geladen, wenn dies nicht der Fall ist Wenn das Bild geladen wird, wird es fehlschlagen. Verwenden Sie daher die Onload-Ereignisverarbeitung

6. Erweitern Sie die Array-Funktion und löschen Sie das angegebene Element

Code kopieren

Der Code lautet wie folgt: //Erweitert, um das angegebene Element zu löschen Array.prototype.deleteElement = function (obj) {

if (obj) {

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

 
7. Timer-Einstellung, der erste Parameter der setInterval("fun",1000)-Methode kann a sein B. „hero.say()“, ähnlich wie eval, um diese Codezeichenfolge auszuführen, sodass Parameter für die Funktion bereitgestellt und auch der laufende Kontext dieser Funktion angegeben werden können. Wenn die Funktion jedoch als Handle übergeben wird, kann sie keine Parameter annehmen und der Kontext kann nicht angegeben werden. Zusätzlich zur ersten Möglichkeit habe ich Abschlüsse verwendet, um dieses Problem zu lösen 

Code kopieren

Der Code lautet wie folgt: //Timer, bewegt sich von selbstthis.timer = setInterval ((function (context) { return function () {

Bullet.prototype.move.call (context)

} 
}) (this), 

Ich habe das gespeichert aktuelle AusführungsumgebungUnd rufen Sie die Aufrufmethode auf, um sie manuell auszuführen. 

8. Zusätzlich zur Funktion sollte das funktionale Design der Methode die Bedingungserkennung für die Ausführung dieser Funktion umfassen. Beispielsweise sollte das Verschieben die Umstände umfassen, unter denen es verschoben werden kann und unter denen es nicht verschoben werden kann . Dieser Test sollte nicht extern durchgeführt werden.

9. Beim Schreiben von Code sollten Sie nicht zuerst über Design- oder Optimierungsprobleme nachdenken und dann über die Optimierung sprechen, oder Sie sollten sie zuerst entwerfen und dann implementieren. Die Gedanken sollten klar und nicht verwirrend sein und sich auf einen Punkt konzentrieren.

10. Es gibt keine Schlaffunktion in JavaScript. Sie können eine Variable als Puffer erstellen, um den Zweck der Intervallausführung zu erreichen

1 Das Programm ist unterteilt in Bomb.js,Bullet.js,Draw.js,Tank.js,index.html,img,music,

2 Endeffekt

3. Code
1.index.html

Code kopieren

Der Code lautet wie folgt:

按下回车键开始游戏

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

剩余生命数 :1

2.Draw.js

复制代码代码如下:

 
/**
* Erstellt von Alane am 14.3.18. 
*/ 

function draw(){ 
//Überprüfen Sie das Leben und den Tod von Kugeln und Panzern
checkDead(
/ /Löschen Sie die Leinwand
ctx.clearRect(0,0,500,400);//Zeichne den Spieler
if(!hero.isdead){ 
drawTank(hero); 
hero.cutLife( ); 
} 
//Zeichne feindlichen Panzer
for (var i = 0; i < Enemys.length; i ) { 
drawTank(enemys[i]) ; 
} 
//Feindliche Kugeln ziehen
for(var j=0;jvar temp = Feinde[j].bulletsList; var i = 0; i < temp.length; i ) { 
drawBullet(temp[i]} 
} 
/Zeichne Spieleraufzählungszeichen
var temp = hero. BulletsList; 
for (var i = 0; i < temp.length; i ) { 
drawBullet(temp[i]); 

//Eine Bombe zeichnen
for(var i=0 ;idrawBown(Bombs[i]); 
} 

} 

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

if(tank.direct == 0 || tank. 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 = Tank.Color; >ctx.beginPath(); 
ctx.moveTo(x 10,y-2); 
ctx.lineTo(x 10,y 8); 
ctx.closePath(
}else { 
ctx.beginPath(); 
ctx.moveTo(x 10,y 24); 
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); 🎜>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(
). ctx.fillStyle = Bullet.color ; 
ctx.beginPath(); 
ctx.arc(bullet.x,bullet.y,2,360,true); 
ctx .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); ctx.drawImage(im3,obj .x,obj.y,50,50); 
} 

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

function checkDead(){ 
//Erkennen Sie das Leben und den Tod feindlicher Kugeln
for(var j=0; jvar temp = Feinde[j].bulletsList;for (var i = 0; i < temp.length; i ) { 
var o = temp[ i]; 
if(o.isdead ){ 
temp.deleteElement(o); 
} 
} 
//Erkennen Sie das Leben und den Tod von Spielerkugeln
var temp = hero.bulletsList; 
for (var i = 0; i < temp.length; i ) { 
var o = temp[i]; 
if(o.isdead){ 
temp.deleteElement(o); 
} 
} 

//Erkennen Sie das Leben und den Tod feindlicher Panzer
für (var i = 0; i < Feinde.Länge; i ) { 
var o = Feinde[i]; 
if( o.isdead){ 
enemys.deleteElement(o); 
} 

 
Bomb.js 




Code kopieren


 Der Code lautet wie folgt:

 
/ **
* Erstellt von Alane am 14.3.18. 
*/ 
function Bomb(x,y){ 
this .life = 12; 
this.x = x; 
} 
Bomb.prototype.lifeDown = function(){ 
this.life--; 🎜>Code kopieren

Der Code lautet wie folgt:

 
/**
* Erstellt von Alane am 14.3.7. 
*/ 
/**
* direkt 0 nach oben 
* 1 nach rechts 
* 2 nach unten 
* 3 nach links 
* @param x 
* @param y 
* @param direkt 
* @constructor 
*/ 
//************************************************** ***************************************/ 
//坦克父类 
Funktion Tank (x, y, direkt) { 
this.speed = 2; 

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

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

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

} 

//变换方向 
Tank.prototype.changeDirect = function () { 
while (true) { 
var temp = Math.round (Math. random () * 3); 
if (this.direct != temp) { 
this.direct = temp; 
Pause; 
} 
} 
//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; 
switch (this.direct) { 
case 0: 
bullet = new Bullet (this.x 10, this.y - 2, 0, this.color); 
Pause; 
Fall 1: 
bullet = neues Bullet (this.x 32, this.y 10, 1, this.color); 
Pause; 
Fall 2: 
bullet = neues Bullet (this.x 10, this.y 32, 2, this.color); 
Pause; 
Fall 3: 
bullet = neues Bullet (this.x - 2, this.y 10, 3, this.color); 
Pause; 
} 
//放入弹夹 
this.bulletsList.push (bullet); 
} 
} 
//************************************************** ***************************************/ 
//玩家 
function Hero (x, y, direct) { 
this.lifetimes = 5; 
this.isdead = false; 
this.color = '#FF0000'; 
this.x = x; 
this.y = y; 
this.direct = direkt; 
this.bulletsList = []; 
this.maxBulletSize = 10; 
this.newlife = null; 
} 
Hero.prototype = neuer Panzer (0, 0, 0); 
Hero.prototype.constructor = Held; 
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 = 'blue'; 
this.x = x; 
this.y = y; 
this.direct = direkt; 
this.bulletsList = []; 
this.maxBulletSize = 1; 


//定时器,自动移动 
this.timer1 = setInterval ((function (context) { 
return function () { 
//移动 
Enemy. Prototyp.move.call (Kontext); 
} 
}) (this), 30); 

//定时器,射击 
this.timer2 = setInterval ((function (context) { 
return function () { 
//射击 
Tank.prototype.shot. call (context); 
} 
}) (this), 2000); 

//定时器,变换方向 
this.timer3 = setInterval ((function (context) { 
return function () { 
//射击 
Tank.prototype.changeDirect .call (context); 
} 
}) (this), 3000); 
} 

Enemy.prototype = neuer Panzer (0, 0, 0); 
Enemy.prototype.constructor = Feind; 
Enemy.prototype.move = function () { 
switch (this.direct) { 
case 0: 
this.moveUp (); 
Pause; 
Fall 1: 
this.moveRight (); 
Pause; 
Fall 2: 
this.moveDown (); 
Pause; 
Fall 3: 
this.moveLeft (); 
Pause; 
} 
} 

Bullet.js

复制代码代码如下:

 
/**
* Erstellt von Alane am 14.3.11. 
*/ 
function Bullet (x, y, direct, color) { 
this.isdead = false; 
this.x = x; 
this.y = y; 
this.direct = direkt; 
this.speed = 4; 
this.color = Farbe; 
//定时器，自行运动 
this.timer = setInterval ((function (context) { 
return function () { 
Bullet.prototype.move.call (context) 
} 
}) (dies), 30); 
} 
Bullet.prototype.move = function () { 
switch (this.direct) { 
case 0: 
this.y -= this.speed; 
Pause; 
Fall 1: 
this.x = this.speed; 
Pause; 
Fall 2: 
this.y = this.speed; 
Pause; 
Fall 3: 
this.x -= this.speed; 
Pause; 
} 

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

//碰撞检测 检测敌人坦克 
for(var i=0;ivar temp = allTank[i]; 
if(temp.isdead){ 
continue; 
} 
switch (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; 
}break 
Fall 1: 
Fall 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; 
}Pause; 
} 
} 

} 

源码下载