Jeu de combat de chars simulé javascript (version html5) avec compétences en téléchargement de code source

1. Résumez les points clés et les problèmes rencontrés

1. Pour l'héritage en JavaScript, il est préférable que la classe parent fournisse uniquement le partage de méthodes, et les attributs sont écrits dans les sous-classes respectives pour éviter de mélanger les constructeurs de. la classe parent et la sous-classe.

2. Le code pour l'héritage de simulation de prototype doit être écrit avant toutes les définitions de méthode, sinon l'objet prototype est modifié et la méthode devient indéfinie, comme :

Copier le code Le code est le suivant :

 
Hero.prototype = new Tank (0, 0, 0 
Hero.prototype.constructor) ; = Hero ; 
Hero.prototype.addLife = function(){ 
this.lifetimes 
document.querySelector("#life").innerHTML = hero.lifetimes; 🎜> 
3. Lors du dessin de graphiques sur toile, en plus de dessiner des rectangles, ctx.beginPath(); et ctx.closePath(); 

4. La fonction concat peut fusionner des tableaux ou renvoyer des éléments dans un nouveau tableau

5. Une fois l'attribut src de l'image attribué, l'image sera chargée, mais si ce n'est pas le cas. chargée, l'image sera dessinée. Cela provoquera un échec, utilisez donc le traitement des événements onload

6. Étendez la fonction Array et supprimez l'élément spécifié

Copier le code Le code est le suivant : //Extended pour supprimer l'élément spécifié

Array.prototype.deleteElement = function (obj) {

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

 
7. Réglage de la minuterie, le premier paramètre de la méthode setInterval("fun",1000) peut être un chaîne, telle que "hero.say()", similaire à eval pour exécuter cette chaîne de code, afin qu'elle puisse apporter des paramètres à la fonction et également spécifier le contexte d'exécution de cette fonction. Mais si la fonction est passée en tant que handle, elle ne peut pas prendre de paramètres et le contexte ne peut pas être spécifié. En plus de la première méthode, j'ai utilisé des fermetures pour résoudre ce problème 

<. 🎜 >Copier le code

Le code est le suivant : //Timer, se déplace tout seulthis.timer = setInterval ((fonction (contexte) {

return function() {

Bullet.prototype.move.call (context) 
} 
}) (this), 30); 

 
J'ai enregistré le environnement d'exécution actuel, et appelez la méthode d'appel pour l'exécuter manuellement. 

8. En plus de la fonction, la conception fonctionnelle de la méthode doit inclure la détection des conditions pour exécuter cette fonction. Par exemple, move doit inclure les circonstances dans lesquelles elle peut être déplacée et dans lesquelles elle ne peut pas être déplacée. . Ce test ne doit pas être placé à l’extérieur. 

9. Lorsque vous écrivez du code, vous ne devez pas penser aux problèmes de conception ou d'optimisation d'abord, puis parler d'optimisation, ou de conception, puis de l'implémenter. La réflexion doit être claire, sans confusion et se concentrer sur un point.

10. Il n'y a pas de fonction de veille en JavaScript. Vous pouvez créer une variable comme tampon pour atteindre l'objectif d'exécution par intervalles

2. le programme est divisé en Bomb.js,Bullet.js,Draw.js,Tank.js,index.html,img,music,

Effet final

.

3. Code

1.index.html

Copier le code

Le code est le suivant :

按下回车键开始游戏

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

剩余生命数 :1

2.Draw.js

复制代码代码如下 :

 
/**
* Créé par Alane le 14-3-18. 
*/ 

function draw(){ 
//Vérifiez la vie et la mort des balles et des chars
checkDead( 
/); /Effacer le canevas
ctx.clearRect(0,0,500,400); 
//Dessiner le joueur
if(!hero.isdead){ 
drawTank(hero); 
}else{ 
hero.cutLife( ); 
} 
//Dessiner un char ennemi
pour (var i = 0; i < ennemis.length; i ) { 
drawTank(enemys[i]) ; 
} 
//Dessinez les balles ennemies
for(var j=0;jvar temp = ennemis[j].bulletsList 
for ( var i = 0; i < temp.length; i ) { 
drawBullet(temp[i]); 
} 
//Dessiner des balles de joueur
var temp = hero. bulletsList; 
for (var i = 0; i < temp.length; i ) { 
drawBullet(temp[i]); 

//Dessiner une bombe
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, et 8, 8, 15); 

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

 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'; 🎜>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. 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(){ 
//Détecter la vie et la mort des balles ennemies
for(var j=0; jvar temp = ennemis[j].bulletsList 
for (var i = 0; i < temp.length; i ) { 
var o = temp[ i]; 
if(o.isdead ){ 
temp.deleteElement(o); 
} 
} 
} 
//Détecter la vie et la mort des balles des joueurs
var temp = hero.bulletsList; 
for (var i = 0; i < temp.length; i ) { 
var o = temp[i]; 
if(o.isdead){ 
temp.deleteElement(o); 
} 
} 

//Détecter la vie et la mort des chars ennemis
pour (var i = 0; i < ennemis.length; i ) { 
var o = ennemis[i]; 
if( o.isdead){ 
enemys.deleteElement(o); 
} 
} 
} 

 
Bomb.js 




Copier le code


 Le code est le suivant :

/ **
* Créé par Alane le 14-3-18.

*/ function Bomb(x,y){ this .life = 12 this.x = x this.y = y } <; 🎜>Bomb.prototype.lifeDown = function(){ this.life--;

}

Tank.js

Copier le code

Le code est le suivant :

 
/**
* Créé par Alane le 14-3-7. 
*/ 
/**
* direct 0 en haut 
* 1 à droite 
* 2 en bas 
* 3 à gauche 
* @param x 
* @param y 
* @param direct 
* @constructeur 
*/ 
//************************************************** ****************************************/ 
//坦克父类 
fonction Réservoir (x, y, direct) { 
this.speed = 2; 

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

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

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

} 

//变换方向 
Tank.prototype.changeDirect = function () { 
while (true) { 
var temp = Math.round (Math. aléatoire () * 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; 
cas 1 : 
bullet = new Bullet (this.x 32, this.y 10, 1, this.color) ; 
pause; 
cas 2 : 
bullet = new Bullet (this.x 10, this.y 32, 2, this.color) ; 
pause; 
cas 3 : 
bullet = new Bullet (this.x - 2, this.y 10, 3, this.color) ; 
pause; 
} 
//放入弹夹 
this.bulletsList.push (puce); 
} 
} 
//************************************************** ****************************************/ 
//玩家 
fonction Héros (x, y, direct) { 
this.lifetimes = 5; 
this.isdead = false; 
this.color = '#FF0000'; 
this.x = x; 
this.y = y; 
this.direct = direct ; 
this.bulletsList = []; 
this.maxBulletSize = 10 ; 
this.newlife = null; 
} 
Hero.prototype = nouveau Tank (0, 0, 0); 
Hero.prototype.constructor = Héros ; 
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; 
} 


//************************************************** ****************************************/ 
//敌人坦克 
fonction Ennemi (x, y, direct) { 
this.isdead = false ; 
this.color = 'bleu'; 
this.x = x; 
this.y = y; 
this.direct = direct ; 
this.bulletsList = []; 
this.maxBulletSize = 1 ; 


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

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

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

Enemy.prototype = nouveau Tank (0, 0, 0); 
Enemy.prototype.constructor = Ennemi ; 
Enemy.prototype.move = function () { 
switch (this.direct) { 
cas 0 : 
this.moveUp (); 
pause; 
cas 1 : 
this.moveRight (); 
pause; 
cas 2 : 
this.moveDown (); 
pause; 
cas 3 : 
this.moveLeft (); 
pause; 
} 
} 

Bullet.js

复制代码代码如下 :

 
/**
* Créé par Alane le 14-3-11. 
*/ 
function Bullet (x, y, direct, couleur) { 
this.isdead = false; 
this.x = x; 
this.y = y; 
this.direct = direct ; 
this.speed = 4; 
this.color = couleur; 
//定时器，自行运动 
this.timer = setInterval ((function (context) { 
return function() { 
Bullet.prototype.move.call (context) 
} 
}) (ceci), 30); 
} 
Bullet.prototype.move = function () { 
switch (this.direct) { 
cas 0 : 
this.y -= this.speed; 
pause; 
cas 1 : 
this.x = this.speed; 
pause; 
cas 2 : 
this.y = this.speed; 
pause; 
cas 3 : 
this.x -= this.speed; 
pause; 
} 

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

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

} 

源码下载

Étiquettes associées：

坦克大战游戏 html5版

source：php.cn

Article précédent：Introduction à l'utilisation de la méthode propertyIsEnumerable() dans les compétences javascript_javascript Article suivant：Implémenter la sélection complète des cases à cocher, la sélection inverse et l'annulation des compétences d'exceptions_javascript de petits scripts JavaScript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur