Javascript-simuliertes Panzerkampfspiel (HTML5-Version) mit Quellcode-Download_Javascript-Kenntnissen

/**
* Erstellt von Alane am 14.3.18.
*/

function draw(){
//Überprüfen Sie das Leben und den Tod von Kugeln und Panzern
checkDead(
/ /Löschen Sie die Leinwand
ctx.clearRect(0,0,500,400);//Zeichne den Spieler
if(!hero.isdead){
drawTank(hero);
hero.cutLife( );
}
//Zeichne feindlichen Panzer
for (var i = 0; i < Enemys.length; i ) {
drawTank(enemys[i]) ;
}
//Feindliche Kugeln ziehen
for(var j=0;jvar temp = Feinde[j].bulletsList; var i = 0; i < temp.length; i ) {
drawBullet(temp[i]}
}
/Zeichne Spieleraufzählungszeichen
var temp = hero. BulletsList;
for (var i = 0; i < temp.length; i ) {
drawBullet(temp[i]);

//Eine Bombe zeichnen
for(var i=0 ;idrawBown(Bombs[i]);
}

}

function drawTank(tank) {
var x = tank.x;
var y = tank.y;
ctx.fillStyle = tank.color;

if(tank.direct == 0 || tank. direct ==2){
ctx.fillRect(x, y, 5,30);
ctx.fillRect(x 15, y, 5,30);

ctx.fillRect(x 6, y 8, 8, 15);

ctx.StrokeStyle = Tank.Color; >ctx.beginPath();
ctx.moveTo(x 10,y-2);
ctx.lineTo(x 10,y 8);
ctx.closePath(
}else {
ctx.beginPath();
ctx.moveTo(x 10,y 24);
ctx.closePath(); }

ctx.Stroke();
}else{
ctx.fillRect(x, y, 30,5);
ctx.fillRect(x, y 15, 30,5 );

ctx.fillRect(x 8, y 6, 15,8); 🎜>if(tank.direct == 3){
ctx.beginPath();
ctx.moveTo(x-2,y 10);
ctx.lineTo(x 8,y 10);
ctx.closePath( );
}else{
ctx.beginPath();
ctx.moveTo(x 24,y 10);
ctx.lineTo(x 32,y 10 );
ctx.closePath();
}

ctx.Stroke();

}
function drawBullet(
). ctx.fillStyle = Bullet.color ;
ctx.beginPath();
ctx.arc(bullet.x,bullet.y,2,360,true);
ctx .fill();
}

function drawBown (obj){
if(obj.life>8){
ctx.drawImage(im,obj.x,obj.y, 50,50);
}else if(obj.life>4){
ctx.drawImage(im2,obj.x,obj.y,50,50); ctx.drawImage(im3,obj .x,obj.y,50,50);
}

obj.lifeDown();
if(obj.life<=0){
Bombs.deleteElement(obj) ;
}
}

function checkDead(){
//Erkennen Sie das Leben und den Tod feindlicher Kugeln
for(var j=0; jvar temp = Feinde[j].bulletsList;for (var i = 0; i < temp.length; i ) {
var o = temp[ i];
if(o.isdead ){
temp.deleteElement(o);
}
}
//Erkennen Sie das Leben und den Tod von Spielerkugeln
var temp = hero.bulletsList;
for (var i = 0; i < temp.length; i ) {
var o = temp[i];
if(o.isdead){
temp.deleteElement(o);
}
}

//Erkennen Sie das Leben und den Tod feindlicher Panzer
für (var i = 0; i < Feinde.Länge; i ) {
var o = Feinde[i];
if( o.isdead){
enemys.deleteElement(o);
}


Bomb.js




Code kopieren


Der Code lautet wie folgt:


/ **
* Erstellt von Alane am 14.3.18.
*/
function Bomb(x,y){
this .life = 12;
this.x = x;
}
Bomb.prototype.lifeDown = function(){
this.life--; 🎜>Code kopieren

/**
* Erstellt von Alane am 14.3.7.
*/
/**
* direkt 0 nach oben
* 1 nach rechts
* 2 nach unten
* 3 nach links
* @param x
* @param y
* @param direkt
* @constructor
*/
//************************************************** ***************************************/
//坦克父类
Funktion Tank (x, y, direkt) {
this.speed = 2;

}
Tank.prototype.moveUp = function () {
//边界检测
if (this.y < 0) {
//换方向
this.changeDirect ();
zurück;
}
this.y -= this.speed;
this.direct = 0;

}
Tank.prototype.moveDown = function () {
if (this.y > height - 30) {
this.changeDirect ();
zurück;
}
this.y = this.speed;
this.direct = 2;
}
Tank.prototype.moveLeft = function () {
if (this.x < 0) {
this.changeDirect ();
zurück;
}
this.x -= this.speed;
this.direct = 3;

}
Tank.prototype.moveRight = function () {
if (this.x > width - 30) {
this.changeDirect ();
zurück;
}
this.x = this.speed;
this.direct = 1;

}

//变换方向
Tank.prototype.changeDirect = function () {
while (true) {
var temp = Math.round (Math. random () * 3);
if (this.direct != temp) {
this.direct = temp;
Pause;
}
}
//alert("x=" this.x " y=" this.y " direct=" this.direct)
}

//射击子弹
Tank.prototype.shot = function () {
if(this.isdead){
return;
}
if (this.bulletsList.length < this.maxBulletSize) {
//新建子弹
var Bullet = null;
switch (this.direct) {
case 0:
bullet = new Bullet (this.x 10, this.y - 2, 0, this.color);
Pause;
Fall 1:
bullet = neues Bullet (this.x 32, this.y 10, 1, this.color);
Pause;
Fall 2:
bullet = neues Bullet (this.x 10, this.y 32, 2, this.color);
Pause;
Fall 3:
bullet = neues Bullet (this.x - 2, this.y 10, 3, this.color);
Pause;
}
//放入弹夹
this.bulletsList.push (bullet);
}
}
//************************************************** ***************************************/
//玩家
function Hero (x, y, direct) {
this.lifetimes = 5;
this.isdead = false;
this.color = '#FF0000';
this.x = x;
this.y = y;
this.direct = direkt;
this.bulletsList = [];
this.maxBulletSize = 10;
this.newlife = null;
}
Hero.prototype = neuer Panzer (0, 0, 0);
Hero.prototype.constructor = Held;
Hero.prototype.addLife = function(){
this.lifetimes ;
document.querySelector("#life").innerHTML = hero.lifetimes;
}
Hero.prototype.cutLife = function(){
if(this.lifetimes>=1 && !this.newlife){
this.lifetimes--;
this.newlife = setTimeout("hero.newLife()",2000);
}
}
Hero.prototype.newLife = function(){
this.isdead = false;
clearTimeout(hero.newlife);
hero.newlife = null;
document.querySelector("#life").innerHTML = hero.lifetimes;
}


//************************************************** ***************************************/
//敌人坦克
function Enemy (x, y, direct) {
this.isdead = false ;
this.color = 'blue';
this.x = x;
this.y = y;
this.direct = direkt;
this.bulletsList = [];
this.maxBulletSize = 1;


//定时器,自动移动
this.timer1 = setInterval ((function (context) {
return function () {
//移动
Enemy. Prototyp.move.call (Kontext);
}
}) (this), 30);

//定时器,射击
this.timer2 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.shot. call (context);
}
}) (this), 2000);

//定时器,变换方向
this.timer3 = setInterval ((function (context) {
return function () {
//射击
Tank.prototype.changeDirect .call (context);
}
}) (this), 3000);
}

Enemy.prototype = neuer Panzer (0, 0, 0);
Enemy.prototype.constructor = Feind;
Enemy.prototype.move = function () {
switch (this.direct) {
case 0:
this.moveUp ();
Pause;
Fall 1:
this.moveRight ();
Pause;
Fall 2:
this.moveDown ();
Pause;
Fall 3:
this.moveLeft ();
Pause;
}
}

/**
* Erstellt von Alane am 14.3.11.
*/
function Bullet (x, y, direct, color) {
this.isdead = false;
this.x = x;
this.y = y;
this.direct = direkt;
this.speed = 4;
this.color = Farbe;
//定时器，自行运动
this.timer = setInterval ((function (context) {
return function () {
Bullet.prototype.move.call (context)
}
}) (dies), 30);
}
Bullet.prototype.move = function () {
switch (this.direct) {
case 0:
this.y -= this.speed;
Pause;
Fall 1:
this.x = this.speed;
Pause;
Fall 2:
this.y = this.speed;
Pause;
Fall 3:
this.x -= this.speed;
Pause;
}

//边界检测
if (this.y < 0 || this.x > width || this.y > height || this.x < 0) {
clearInterval (this.timer);
this.isdead = true;
}

//碰撞检测 检测敌人坦克
for(var i=0;ivar temp = allTank[i];
if(temp.isdead){
continue;
}
switch (temp.direct){
case 0:
case 2:if(this.x>temp.x && this.xtemp .y&& this.yif(this.color == temp.color){
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}break
Fall 1:
Fall 3:if(this.x>temp.x && this.xtemp.y&& this.yif(this.color == temp.color){
break;
}
Bombs.push(new Bomb(temp.x-10,temp.y-10));
clearInterval (this.timer);
this.isdead = true;
temp.isdead = true;
}Pause;
}
}

}