Maison >interface Web >js tutoriel >Jeu de combat de chars simulé javascript (version html5) avec compétences en téléchargement de code source_javascript
Jeu de combat de chars simulé javascript (version html5) avec compétences en téléchargement de code source_javascript
- WBOYoriginal
- 2016-05-16 16:52:561529parcourir
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();
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
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.
}
}) (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
Copier le code
Le code est le suivant :
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.
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 ;
}
}
}
源码下载
按下回车键开始游戏
按下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;j
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 ;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; j
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;i
if(temp.isdead){
continuer ;
}
switch (temp.direct){
cas 0 :
cas 2:if(this.x>temp.x && this.x
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.x
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}pause ;
}
}
}
源码下载
Déclaration：
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
Article précédent：Introduction à l'utilisation de la méthode propertyIsEnumerable() dans les compétences javascript_javascriptArticle suivant：Introduction à l'utilisation de la méthode propertyIsEnumerable() dans les compétences javascript_javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript