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

집

웹 프론트엔드

H5 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

코드 복사

코드는 다음과 같습니다.

tank.html

<!DOCTYPE html> <br>
</div> ><meta charset="utf-8"> <br> <br> <br><h1>hmtl5-클래식 탱크 전투<!--탱크전투의 전장--> <br><canvas id="tankMap" width="400px" height="300px" style="Background-color:black "&gt ;</canvas> <br><span id="aa">data</span> <br><!--이 페이지에 TankGames.js를 소개하세요--> <br>< script type="text/javascript" src="tank.js"></script> <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;idrawTank(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> ></body> <br></html>

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7426

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다