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

코드 복사

코드는 다음과 같습니다.

tank.html

 <br> <br> ><meta charset="utf-8"> <br> <br> <br><h1>hmtl5-클래식 탱크 전투 <br><!--탱크전투의 전장--> <br><canvas id="tankMap" width="400px" height="300px" style="Background-color:black "> <br><span id="aa">data</span> <br><!--이 페이지에 TankGames.js를 소개하세요--> <br> <br><script type="text/javascript"> <br />//캔버스 가져오기<br />var canvas1= document.getElementById("tankMap"); <br />//그리기 컨텍스트 가져오기(브러쉬로 이해할 수 있음) <br />var cxt=canvas1.getContext("2d") <br />//내 탱크 영웅 <br />//Direction<br />var Hero=new Hero(140,140,0,heroColor) <br />//빈 총알 정의<br />var HeroBullet=null;//적의 탱크를 정의합니다( 적의 탱크는 몇 개입니까? 아이디어: 단일 정의입니까, 아니면 배열에 배치됩니까?) <br />var 적탱크=new Array() <br />//먼저 죽고 살아서 3을 설정한 다음 적 탱크 수량을 추가하고 변수 <br />//0->upper, 1->right, 2->lower 3->left<br />for(var i=0;i<3)를 만듭니다. ;i ){ <br />//탱크 만들기<br />var riderTank=new EnemyTank((i 1)*50,0,2,enmeyColor) <br />//이 탱크를 배열에 넣습니다<br />enemyTanks [i]=enemyTank; <br />} <br />//첫 번째 호출 <br />flashTankMap() <br />//전투 지역을 정기적으로 새로 고치는 함수를 작성하고 전투 지역에 나타날 요소를 넣습니다. (자신의 탱크, 적 탱크, 총알, 폭탄, <br />//장애물...)->게임 아이디어<br />function flashTankMap(){ <br />//캔버스 지우기<br />cxt.clearRect( 0,0,400,300) ; <br />//내 탱크<br />drawTank(hero); <br />//나만의 총알 그리기<br />//총알 날아가는 효과는 어떻게 나타나는 걸까요? 전투 지역을 새로 고치려면 일정 시간(setInterval)마다 수행해야 합니다. 새로 고침 중에 총알 좌표가 변경되면 총알이 날아가는 듯한 느낌을 줍니다!] <br />drawHeroBullet() <br />//적 탱크 <br />// 모든 적 탱크 그리기 <br />for(var i=0;i<3;i ){ <br />drawTank(enemyTanks[i]) <br />} <br />} <br />// 이것은 사용자 키 허용 함수입니다<br />function getCommand(){ <br />//플레이어가 어떤 키를 눌렀는지 어떻게 알 수 있나요<br />//키를 눌렀을 때의 이벤트 설명 --->이벤트 객체- --- ->이벤트 처리 함수() <br />var code=event.keyCode;//해당 문자의 ascii 코드-> 코드표를 살펴보겠습니다 <br />switch(code){ <br /> case 87://on<br />hero.moveUp(); <br />break <br />case 68: <br />hero.moveRight() <br />break <br />hero .moveDown(); <br />break; <br />case 65: <br />hero.moveLeft(); <br />case 74: <br />hero.shotEnemy(); <br />} <br /> //이 함수 실행 flashTankMap(); <br />flashTankMap(); <br />//여기서 모든 적 탱크를 다시 그릴 수 있습니다. 탱크는 정기적으로 캔버스 [전투 지역]) <br />} <br />//100밀리초마다 전투 지역을 새로 고칩니다. <br />window.setInterval("flashTankMap()",100) <br /></script> > <br></canvas>
</h1>

tank.js

코드 복사

코드는 다음과 같습니다.

<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=400|| 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>

사전>