Maison > Article > interface Web > HTML5 réalise la bataille de chars classique. Les chars peuvent se déplacer et tirer des compétences de didacticiel bullet_html5.
HTML5 réalise la bataille de chars classique. Les chars peuvent se déplacer et tirer des compétences de didacticiel bullet_html5.
- WBOYoriginal
- 2016-05-16 15:48:462380parcourir
Copier le code
Le code est le suivant :tank.html
<!DOCTYPE html> <br><html> >< meta charset="utf-8"/> <br></head> <br><body onkeydown="getCommand();"> ; /h1> <br><!--Le champ de bataille de la bataille de chars--> <br><canvas id="tankMap" width="400px" height="300px" style="background-color:black "> ;</canvas> <br><span id="aa">data</span> <br><!--Présentez tankGames.js à cette page--> <br>< script type="text/javascript" src="tank.js"></script> <br><script type="text/javascript"> document.getElementById("tankMap"); <br>//Obtenir le contexte du dessin (vous pouvez le comprendre comme un pinceau) <br>var cxt=canvas1.getContext("2d"); <br>//Direction<br>var hero=new Hero(140,140,0,heroColor); <br>//Définir une balle vide<br>var heroBullet=null <br>//Définir le tank ennemi (le de l'ennemi Combien y a-t-il de chars ? Idée : est-ce une définition unique, ou est-il placé dans un tableau ?) <br>var ennemisTanks=new Array();//Meurs et vis d'abord, posez 3, puis nous ajouterons la quantité des chars ennemis, créerons des variables <br>//0->upper, 1->right, 2->lower 3->left<br>for(var i=0;i<3 ;i ){ <br />//Créer un tank<br />var ennemisTank=new EnemyTank((i 1)*50,0,2,enmeyColor); <br />//Mettre ce tank dans le tableau<br />enemyTanks); [i]=enemyTank; <br />} <br />//Premier appel <br />flashTankMap(); <br />//Ecrire une fonction pour rafraîchir régulièrement notre zone de combat, et mettre les éléments qui apparaîtront dans la zone de combat (votre propre char, chars ennemis, balles, bombes, <br />//Obstacles...)->Idées de jeu<br>fonction flashTankMap(){ <br>//Effacer la toile<br>cxt.clearRect( 0,0,400,300) ; <br>//Mon tank<br>drawTank(hero); <br>//Dessinez vos propres balles<br>//Comment l'effet de vol de balle apparaît-il [Réponse : Tout d'abord, nous devrait le faire à intervalles réguliers (setInterval) pour rafraîchir la zone de combat. Si les coordonnées de la balle changent pendant le rafraîchissement, cela donnera l'impression que la balle vole !] <br>drawHeroBullet(); <br>// Dessinez tous les chars ennemis <br>for(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]); <br />} <br />} <br />// Il s'agit d'une fonction de touche utilisateur acceptée<br />function getCommand(){ <br />//Comment puis-je savoir sur quelle touche le joueur a appuyé<br />//Décrire l'événement lorsque la touche est enfoncée --->objet d'événement- --- ->Fonction de gestion des événements () <br>var code=event.keyCode;//Le code ascii de la lettre correspondante-> Regardons la table des codes <br>switch(code){ <br> cas 87://on<br>hero.moveUp(); <br>break; <br>cas 68 : <br>hero.moveRight(); <br>cas 83 : <br>héros; .moveDown(); <br>break; <br>cas 65 : <br>hero.moveLeft(); <br>break <br>cas 74 : <br>hero.shotEnemy(); <br>} <br> //Déclenchez cette fonction flashTankMap(); <br>flashTankMap(); <br>//Redessinez tous les chars ennemis ici (pensez, créons simplement une fonction spécifiquement pour actualiser notre. tanks régulièrement Canvas [zone de combat]) <br>} <br>//Actualiser la zone de combat toutes les 100 millisecondes <br>window.setInterval("flashTankMap()",100); <br></script> ></corps> <br></html>tank.js
Copier le code
Le code est le suivant :
<pre name="code" class="javascript">// Pour faciliter la programmation, nous définissons deux tableaux de couleurs <br>var heroColor=new Array("#BA9658","#FEF26E"); <br>var enmeyColor=new Array("#00A2B5","#00FEFE"); 🎜>//Pour les autres chars ennemis, l'évolutivité ici est toujours bonne <br>//Bullet class<br>function Bullet(x,y,direct,speed){ <br>this.x=x <br> this.y=y; <br>this.direct=direct; <br>this.speed=speed; <br>this.timer=null <br>this.isLive=true <br>this run=function; run(){ <br>//Lors de la liste des coordonnées de cette balle, nous déterminons d'abord si la balle a atteint la limite <br>if(this.x<=0||this.x>=400|| this. y<=0||this.y>=300){ <br>//La balle va s'arrêter <br>window.clearInterval(this.timer); this.isLive =false; <br>}else{ <br>//Ceci peut être utilisé pour modifier les coordonnées <br>switch(this.direct){ <br>case 0 : <br>this.y-=this .speed; <br> break; <br>cas 1 : <br>this.x =this.speed <br>cas 2 : <br>this.y =this.speed; break; <br>cas 3 : <br>this.x-=this.speed; <br>break <br>} <br>document.getElementById("aa").innerText="bulletx= " this.x " Bullet y=" this.y; <br>} <br>} <br>//Ceci est une classe Tank <br>fonction Tank(x,y,direct,color){ <br>this .x=x; <br>this.y=y; <br>this.speed=1; <br>this.direct=direct <br>//Un réservoir nécessite deux couleurs. color; <br>//Monter<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>this.direct=0 <br>} <br>// À droite<br>this.moveRight=function(){ <br>this.x =this.speed; <br>this.direct=1 <br>} <br>//Descendre<br>this; moveDown=function( ){ <br>this.y =this.speed; <br>this.direct=2 <br>} <br>//Left<br>this.moveLeft=function(){ <br> this.x- =this.speed; <br>this.direct=3; <br>} <br>} <br>//Définir une classe de Héros<br>//x représente l'abscisse du tank, y représente la direction ordonnée et directe <br>function Hero(x,y,direct,color){ <br>//La fonction des deux phrases suivantes est d'obtenir l'effet d'héritage par emprunt d'identité d'objet<br>this.tank=Tank ; <br>this.tank (x,y,direct,color); <br>//Ajouter une fonction pour tirer sur le char ennemi <br>this.shotEnemy=function(){ <br>//Créer une balle. , la position de la balle doit être liée au héros , et liée à la direction du héros.!!! <br>//this.x est l'abscisse du héros actuel. Ici, nous traitons (affinons) simplement switch(this.direct){ <br>case 0 : <br>heroBullet=new Bullet(this.x 9,this.y,this.direct,1 <br>break ; <br>case 1 : <br>heroBullet=new Bullet(this.x 30,this .y 9,this.direct,1); <br>break; <br>cas 2 : <br>heroBullet=new Bullet(this.x 9,this. y 30,this.direct,1); <br> break; <br>cas 3 : //right<br>heroBullet=new Bullet(this.x,this.y 9,this.direct,1); >break; <br>} <br>//call Notre bullet run, 50 est une conclusion obtenue par le professeur après de nombreux tests <br>var timer=window.setInterval("heroBullet.run()",50); <br>//Assignez ce timer à cette puce (les objets js sont passés par référence !) <br>heroBullet.timer=timer; <br>} <br>} <br>//Définissez une classe EnemyTank <br>fonction EnemyTank (x,y,direct,color){ <br>//Héritent également de Tank via l'usurpation d'identité d'objet <br>this.tank=Tank; <br>this.tank(x,y,direct,color); } <br>//Dessinez vos propres puces, encore une chose, vous pouvez également encapsuler cette fonction dans la classe Hero <br>function drawHeroBullet(){ <br>//Ici, nous avons ajouté une phrase, mais vous devez savoir que l'ajouter ici nécessite une compréhension de l'ensemble du programme. <br>if(heroBullet!=null&&heroBullet.isLive){ <br>cxt.fillStyle="#FEF26E"; <br>cxt.fillRect(heroBullet.x,heroBullet. y,2,2); <br>} <br>} <br>//Dessiner le réservoir<br>fonction drawTank(tank){ <br>//Considérer la direction<br>switch(tank.direct){ <br>cas 0 : //Haut<br>cas 2 :// Suivant<br>//Dessinez votre propre réservoir en utilisant les techniques de dessin précédentes<br>//Définissez la couleur<br>cxt.fillStyle=tank. color[0]; <br>//Le professeur Han utilise le premier Die --->Live plus tard (il est préférable que les débutants utilisent cette méthode) <br>//Dessinez d'abord le rectangle à gauche <br>cxt.fillRect( tank.x, tank.y,5,30); <br>//Dessinez le rectangle à droite (veuillez donner votre avis à ce moment-là -> il doit y avoir un point de référence) <br>cxt.fillRect(tank. x 15, tank.y,5,30); <br>//Dessine le rectangle du milieu<br>cxt.fillRect(tank.x 6,tank.y 5,8,20); Dessinez le couvercle du réservoir<br>cxt.fillStyle=tank.color[1]; <br>cxt.arc(tank.x 10,tank.y 15,4,0,360,true <br>cxt.fill); (); <br>//Dessinez le canon (ligne droite) <br>cxt.strokeStyle =tank.color[1] <br>//Définissez la largeur de la ligne <br>cxt.lineWidth=1.5; 🎜>cxt.beginPath(); <br>cxt.moveTo(tank.x 10,tank.y 15); <br>if(tank.direct==0){ <br>cxt.lineTo(tank.x 10); ,tank.y); <br>}else if(tank.direct==2){ <br>cxt.lineTo(tank.x 10,tank.y 30 <br>} <br>cxt.closePath(); ); <br>cxt.stroke(); <br>break; <br>cas 1 : / /droite et gauche<br>cas 3 : <br>//Dessinez votre propre réservoir, en utilisant les techniques de dessin précédentes<br>//Définissez la couleur<br>cxt.fillStyle=tank.color[0] <br>//韓老師用先死--->後活(初學者最好用這個方法) <br>//先畫出左面的長方形<br>cxt.fillRect(tank.x,tank.y,30, 5); <br>//畫出右邊的長方形(這時請大家思路->一定要一個參照點) <br>cxt.fillRect(tank.x,tank.y 15,30,5); <br>//畫出中間矩形<br>cxt.fillRect(tank.x 5,tank.y 6,20,8); <br>//畫出坦克車的蓋子<br>cxt.fillStyle=tank.color[ 1]; <br>cxt.arc(tank.x 15,tank.y 10,4,0,360,true); <br>cxt.fill(); <br>//畫出砲筒(直線) <br>cxt.strokeStyle=tank.color[1]; <br>//設定線條的寬度<br>cxt.lineWidth=1.5; <br>cxt.beginPath(); <br>cxt.moveTo(tank.x 15 ,tank.y 10); <br>//向右<br>if(tank.direct==1){ <br>cxt.lineTo(tank.x 30,tank.y 10); <br>}else if(tank.direct==3){ //向左<br>cxt.lineTo(tank.x,tank.y 10); <br>} <br>cxt.closePath(); <br>cxt.stroke (); <br>break; <br>} <br>} <br><br> <br> <br><pre class="brush:php;toolbar:false"> 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