HTML5는 고전적인 탱크 전투를 구현합니다. 탱크는 이리저리 움직이며 bullet_html5 튜토리얼 기술을 발사할 수 있습니다.

<pre name="code" class="javascript">// 프로그래밍 편의를 위해 두 가지 색상 배열을 정의합니다. <br>var HeroColor=new Array("#BA9658","#FEF26E") <br>var enmeyColor=new Array("#00A2B5","#00FEFE"); 🎜>//다른 적 탱크의 경우 확장성은 여전히 ​​좋습니다. <br>//Bullet class<br>function Bullet(x,y,direct,speed){ <br>this.x=x; this.y=y; <br>this.speed=speed; <br>this.isLive=true; run(){ <br>//이 총알의 좌표를 나열할 때 먼저 총알이 경계에 도달했는지 여부를 확인합니다. <br>if(this.x<=0||this.x>=400|| this. y<=0||this.y>=300){ <br>//총알이 멈출 예정입니다. <br>window.clearInterval(this.timer) <br>//총알이 죽었습니다<br> this.isLive =false; <br>}else{ <br>//좌표를 수정하는 데 사용할 수 있습니다 <br>switch(this.direct){ <br>case 0: <br>this.y-=this .speed; <br> break; <br> 케이스 1: <br>this.x =this.speed; <br>케이스 2: <br>this.y =this.speed; break; <br>사례 3: <br>this.x-=this.speed; <br>break <br>} <br>} <br>document.getElementById("aa").innerText="bulletx= " this.x " Bullet y=" this.y; <br>} <br>} <br>//이것은 탱크 클래스입니다 <br>함수 Tank(x,y,direct,color){ <br>this .x=x; <br>this.y=y; <br>this.direct=direct; <br>//탱크에는 두 가지 색상이 필요합니다. color; <br>//위로 이동<br>this.moveUp=function(){ <br>this.y-=this.speed; <br>this.direct=0; 오른쪽으로<br>this.moveRight=function(){ <br>this.x =this.speed; <br>this.direct=1; <br>} <br>//아래로 이동<br> 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>//영웅 클래스 정의<br>//x는 탱크의 가로좌표를 나타내고, y는 the ordinate, direct direct <br>function Hero(x,y,direct,color){ <br>//다음 두 문장의 기능은 객체 가장을 통해 상속 효과를 얻는 것입니다<br>this.tank=Tank ; <br>this.tank (x,y,direct,color); <br>//적 탱크를 쏘는 기능을 추가합니다. <br>this.shotEnemy=function(){ <br>//총알을 생성합니다. , 총알의 위치는 영웅과 관련이 있어야 하며, 영웅의 방향과 관련이 있어야 합니다.!!! <br>//this.x는 현재 영웅의 가로 좌표입니다 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>사례 2: <br>heroBullet=new Bullet(this.x 9,this. y 30,this.direct,1); <br> break; <br>case 3: //right<br>heroBullet=new Bullet(this.x,this.y 9,this.direct,1); >break; <br>} <br>//call Bullet run, 50은 교사가 여러 테스트를 거쳐 얻은 결론입니다. <br>var time=window.setInterval("heroBullet.run()",50); <br>//이 타이머를 이 글머리 기호에 할당합니다(js 객체는 참조로 전달됩니다!) <br>heroBullet.timer=timer; <br>} <br>} <br>//EnemyTank 클래스 정의 <br>함수 EnemyTank (x,y,direct,color){ <br>//객체 가장을 통해 Tank 상속 <br>this.tank=Tank; <br>this.tank(x,y,direct,color); } <br>//자신만의 글머리 기호 그리기, 한 가지 더, 이 함수를 Hero 클래스에 캡슐화할 수도 있습니다. <br>function drawHeroBullet(){ <br>//여기에 문장을 추가했지만 알아야 할 사항 여기에 추가하려면 <br>if(heroBullet!=null&&heroBullet.isLive){ <br>cxt.fillStyle="#FEF26E" <br>cxt.fillRect(heroBullet.x,heroBullet. y,2,2); <br>} <br>} <br>//탱크 그리기<br>function drawTank(tank){ <br>//방향 고려<br>switch(tank.direct){ <br>case 0: //Up<br>case 2 ://Next<br>//이전 그리기 기술을 사용하여 자신만의 탱크를 그립니다.<br>//색상 설정<br>cxt.fillStyle=tank. color[0];//한 선생님은 첫 번째 주사위를 사용합니다 --->나중에 라이브(초보자는 이 방법을 사용하는 것이 가장 좋습니다) <br>//먼저 왼쪽에 직사각형을 그립니다 <br>cxt.fillRect( 탱크.x, 탱크.y,5,30); <br>//오른쪽에 직사각형을 그립니다. (이때 생각을 말해주세요 -> 기준점이 있을 것입니다.) <br>cxt.fillRect(tank. x 15, 탱크.y,5,30); <br>//가운데 직사각형을 그립니다.<br>cxt.fillRect(tank.x 6,tank.y 5,8,20)// 탱크 덮개 그리기<br>cxt.fillStyle=tank.color[1];cxt.arc(tank.x 10,tank.y 15,4,0,360,true) <br>cxt.fill (); <br>//통(직선) 그리기 <br>cxt.StrokeStyle =tank.color[1] <br>//선 너비 설정 <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>사례 1: / /오른쪽 및 왼쪽<br>사례 3: <br>//이전 그리기 기법을 사용하여 나만의 탱크 그리기<br>//색상 설정<br>cxt.fillStyle=tank.color[0] <br>//한 선생님은 주사위를 먼저 사용합니다 --->나중에 라이브(초보자는 이 방법을 사용하는 것이 가장 좋습니다) <br>//왼쪽에 직사각형을 먼저 그립니다 <br>cxt.fillRect(tank.x, Tank.y,30 ,5);//오른쪽에 직사각형을 그립니다(이때 생각해 보세요 -> 참조점이 있어야 합니다) <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>cxt.StrokeStyle=tank.color[1]; <br>//선 너비 설정<br>cxt.lineWidth=1.5; <br>cxt.beginPath(); 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>