댓글 : 이전 기사에서는 HTML5를 사용하여 모바일 소형 탱크를 구현하는 방법을 소개했습니다. 이 기사에서는 탱크 전쟁으로 안내해 드리겠습니다. HTML5를 좋아하는 친구는 그것을 놓치지 않아야합니다.
<fre> tank.html </pre> <pre> <! doctype html>
<html>
<헤드>
<meta charset = "utf-8"/>
</head>
<body onkeydown = "getCommand ();">
<H1> HMTL5 급 탱크 전쟁 </h1>
<!-전차 전쟁의 전장->
<canvas> </canvas>
<span> 데이터 </span>
<!-이 페이지에 tankGames.js를 소개합니다->
<script type = "text/javaScript"src = "tank.js"> </script>
<script type = "text/javaScript">
// 캔버스를 얻습니다
var canvas1 = document.getElementById ( "TankMap");
// 도면 컨텍스트 가져 오기 (브러시로 이해할 수 있음)
var cxt = canvas1.getContext ( "2d");
// 내 탱크 영웅
//방향
var hero = 새로운 영웅 (140,140,0, Herocolor);
// 빈 총알을 정의합니다
var herobullet = null;
// 적의 탱크 정의 (적 탱크가 몇 개 있습니까? 단일 정의입니까 아니면 배열에 넣습니까?)
var Empanks = new Array ();
// 먼저 죽은 다음 3 세트를 세트 한 다음 적 탱크 수에 대한 변수를 만듭니다.
// 0-> 상단, 1-> 오른쪽, 2-> down 3-> 왼쪽
for (var i = 0; i <3; i ++) {
// 탱크를 만듭니다
var Empank = New Enmytank ((i+1)*50,0,2, enmeycolor);
//이 탱크를 배열에 넣습니다
적용 탱크 [i] = 적용 탱크;
}
// 한 번 전화하십시오
FlashTankMap ();
// 전투 구역을 정기적으로 새로 고치고 전투 구역 (자체 탱크, 적 탱크, 총알, 폭탄, 폭탄, 폭탄, 폭탄에 나타나는 특수 기능 작성
//obstructions...)-> 게임 생각
함수 FlashTankMap () {
// 캔버스 청소
cxt.clearRect (0,0,400,300);
// 내 탱크
DrawTank (영웅);
// 자신의 총알을 그립니다
// 총알 비행 효과는 어떻게 나타 납니까? [답변 : 우선, 우리는 매번 전투 구역을 새로 고쳐야합니다 (setinterval). 상쾌 할 때 총알 좌표가 변하면 총알 좌표는 사람들에게 총알이 날고 있다는 느낌을줍니다!]
DrawHeroBullet ();
// 적 탱크
// 모든 적 탱크를 그립니다
for (var i = 0; i <3; i ++) {
DrawTank (Enemytanks [i]);
}
}
// 이것은 사용자 키 스트로크를 수락하는 함수입니다
함수 getCommand () {
// 플레이어가 어떤 키를 누르는 지 어떻게 알 수 있습니까?
// 지침 : 이벤트 객체 -------> 이벤트 핸들러 함수 ()
var code = event.keyCode; // 해당 문자의 ASCII 코드-> 코드 테이블을 보자
스위치 (코드) {
사례 87 : // on
hero.moveup ();
부서지다;
사례 68 :
Hero.moveright ();
부서지다;
사례 83 :
Hero.movedown ();
부서지다;
사례 65 :
hero.moveleft ();
부서지다;
사례 74 :
hero.shotenemy ();
부서지다;
}
//이 함수 트리거 FlashTankMap ();
FlashTankMap ();
// 모든 적 탱크를 다시 칠하십시오. 여기에 코드를 쓸 수 있습니다 (생각, 캔버스를 정기적으로 새로 고치기위한 기능을 정기적으로 사용하자).
}
// 100 밀리 초마다 전투 구역을 새로 고치십시오
Window.setInterVal ( "FlashTankMap ()", 100);
</스크립트>
</body>
</html> </pre>
Tank.js
<pre> </pre>
<pre> <fre> // 프로그래밍 편의를 위해 두 개의 색상 배열을 정의합니다
var herocolor = new Array ( "#ba9658", "#fef26e");
var enmeycolor = 새로운 배열 ( "#00a2b5", "#00fefe");
// 여기 다른 적 탱크의 확장이 꽤 좋습니다.
// 총알
함수 총알 (X, Y, Direct, Speed) {
this.x = x;
this.y = y;
this.direct = direct;
이 .speed = 속도;
this.timer = null;
this.islive = true;
this.run = function run () {
//이 총알의 좌표가 표시되면 먼저 총알이 경계에 도달했는지 여부를 결정합니다.
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y = 300) {
// 총알이 멈춰야합니다.
Window.ClearInterval (this.Timer);
// 총알이 죽었다
this.islive = false;
}또 다른{
// 이것은 좌표를 수정하는 데 사용할 수 있습니다
스위치 (this.direct) {
케이스 0 :
this.y- = this.speed;
부서지다;
case 1:
this.x+= this.speed;
부서지다;
case 2:
this.y+= this.speed;
부서지다;
사례 3 :
this.x- = this.speed;
부서지다;
}
}
document.getElementById ( "aa"). 내부 텍스트 = "Bullet x ="+this.x+"Bullet y ="+this.y;
}
}
// 이것은 탱크 클래스입니다
기능 탱크 (X, Y, Direct, Color) {
this.x = x;
this.y = y;
이 .speed = 1;
this.direct = direct;
// 탱크에는 두 가지 색상이 필요합니다.
this.color = 색상;
// 위로 이동합니다
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
}
// 오른쪽에
this.moveright = function () {
this.x+= this.speed;
이것. direct = 1;
}
// 아래로 이동합니다
this.movedown = function () {
this.y+= this.speed;
이것. direct = 2;
}
//왼쪽
this.moveleft = function () {
this.x- = this.speed;
이것. direct = 3;
}
}
// 영웅 클래스를 정의합니다
// x는 탱크의 수평 좌표를 나타내며 y는 수직 좌표, 직접 방향을 나타냅니다.
기능 영웅 (X, Y, Direct, Color) {
// 다음 두 문장의 목적은 물체를 가장하는 것을 통한 상속의 영향을 달성하는 것입니다.
this.tank = 탱크;
this.tank (x, y, direct, color);
// 적 탱크를 쏘는 기능을 추가합니다.
this.shotenemy = function () {
// 총알을 만들고, 총알의 위치는 영웅과 영웅의 방향과 관련되어야합니다 ... !!!
//this.x는 현재 영웅의 수평 좌표입니다. 여기서 우리는 단순히 처리 (정제)를 처리합니다.
스위치 (this.direct) {
케이스 0 :
HEROBULLET = New Bullet (this.x+9, this.y, this.direct, 1);
부서지다;
case 1:
HEROBULLET = New Bullet (this.x+30, this.y+9, this.direct, 1);
부서지다;
case 2:
HEROBULLET = NEW BULLET (this.x+9, this.y+30, this.Direct, 1);
부서지다;
사례 3 : // 오른쪽
HEROBULLET = New Bullet (this.x, this.y+9, this.direct, 1);
부서지다;
}
// Bullet Run이라고 부르는 50은 교사의 여러 테스트에서 얻은 결론입니다.
var timer = window.setInterval ( "herobullet.run ()", 50);
//이 타이머를이 총알에 할당합니다 (JS 객체는 참조 패스입니다!)
Herobullet.Timer = 타이머;
}
}
// 적용 탱크 클래스를 정의합니다
기능 EnmyTank (X, Y, Direct, Color) {
// 객체를 가장하여 탱크를 상속합니다
this.tank = 탱크;
this.tank (x, y, direct, color);
}
// 자신의 총알을 그리고 한 가지 더 말하면 기능을 영웅 수업에 캡슐화 할 수도 있습니다.
함수 DrawHeroBullet () {
// 여기에 문장을 추가했지만 여기에 추가하려면 전체 프로그램을 확인해야한다는 것을 알아야합니다.
if (herobullet! = null && herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillRect (Herobullet.x, Herobullet.y, 2,2);
}
}
// 탱크를 그립니다
함수 드로 타인 (탱크) {
// 방향을 고려하십시오
스위치 (Tank.Direct) {
사례 0 : // on
사례 2 : // 다운
// 나만의 탱크를 그리고 이전 드로잉 기술을 사용하십시오.
// 색상을 설정합니다
cxt.fillstyle = tank.color [0];
// 선생님 Han은 먼저 죽음을 사용합니다 ---> 그리고 살고 있습니다 (초보자에게 가장 좋습니다)
// 먼저 왼쪽의 사각형을 그립니다
cxt.fillRect (Tank.x, Tank.y, 5,30);
// 오른쪽에 사각형을 그립니다 (이 시간에 그것에 대해 생각해보십시오 -> 참조 점이 있어야합니다).
cxt.fillRect (Tank.x+15, Tank.y, 5,30);
// 중간 사각형을 그립니다
cxt.fillRect (Tank.x+6, Tank.y+5,8,20);
// 탱크 덮개를 그립니다
cxt.fillstyle = tank.color [1];
CXT.ARC (Tank.x+10, 탱크+15,4,0,360, True);
cxt.fill ();
// 대포 그리기 (직선)
cxt.strokestyle = tank.color [1];
// 선의 너비를 설정합니다
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (탱크 .x+10, 탱크 .y+15);
if (tank.direct == 0) {
cxt.lineto (Tank.x+10, Tank.y);
} else if (tank.direct == 2) {
cxt.lineto (Tank.x+10, 탱크 .y+30);
}
cxt.closepath ();
cxt.stroke ();
부서지다;
사례 1 : // 오른쪽과 왼쪽
사례 3 :
// 나만의 탱크를 그리고 이전 드로잉 기술을 사용하십시오.
// 색상을 설정합니다
cxt.fillstyle = tank.color [0];
// 선생님 Han은 먼저 죽음을 사용합니다 ---> 그리고 살고 있습니다 (초보자에게 가장 좋습니다)
// 먼저 왼쪽의 사각형을 그립니다
cxt.fillRect (Tank.x, Tank.y, 30,5);
// 오른쪽에 사각형을 그립니다 (이 시간에 그것에 대해 생각해보십시오 -> 참조 점이 있어야합니다).
cxt.fillRect (Tank.x, Tank.y+15,30,5);
// 중간 사각형을 그립니다
cxt.fillRect (Tank.x+5, Tank.y+6,20,8);
// 탱크 덮개를 그립니다
cxt.fillstyle = tank.color [1];
CXT.ARC (Tank.x+15, Tank.y+10,4,0,360, True);
cxt.fill ();
// 대포 그리기 (직선)
cxt.strokestyle = tank.color [1];
// 선의 너비를 설정합니다
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (탱크 .x+15, 탱크 .y+10);
// 오른쪽에
if (tank.direct == 1) {
cxt.lineto (Tank.x+30, 탱크 .y+10);
} else if (tank.direct == 3) {// 왼쪽으로
cxt.lineto (Tank.x, Tank.y+10);
}
cxt.closepath ();
cxt.stroke ();
부서지다;
}
}
</pre>
<pre> </pre>
</pre>