持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

演示

请添加图片描述

基本介绍

1985年推出的坦克大战（Battle City）由13×13大小的地图组成了35个关卡，地形包括砖墙、海水、钢板、森林、地板5种，玩家作为坦克军团仅存的一支精锐部队的指挥官，为了保卫基地不被摧毁而展开战斗。游戏中可以获取有多种功能的宝物，敌人种类则包括装甲车、轻型坦克、反坦克炮、重型坦克4种，且存在炮弹互相抵消和友军火力误伤的设定。进入游戏后能用A键选关，关卡编辑器界面中用A键更换地形、B键确定，再按回车便可以开始自己创建的任务。特征：只有4级坦克有护甲，每关必出3个闪光坦克。宝物包括手雷（敌全灭）、时钟（所有敌人暂停一段时间）、铁锹（基地外墙暂时变为钢板）、坦克（奖励一条命）、星星（火力增加1级）、头盔（暂时无敌）。

代码部分

基础设定

var ctx;//2d画布
var wallCtx;//地图画布
var grassCtx;//草地画布
var tankCtx;//坦克画布
var overCtx;//结束画布
var menu = null;//菜单
var stage = null;//舞台
var map = null;//地图
var player1 = null;//玩家1
var player2 = null;//玩家2
var prop = null;
var enemyArray = [];//敌方坦克
var bulletArray = [];//子弹数组
var keys = [];//记录按下的按键
var crackArray = [];//爆炸数组

var gameState = GAME_STATE_MENU;//默认菜单状态
var level = 1;
var maxEnemy = 20;//敌方坦克总数
var maxAppearEnemy = 5;//屏幕上一起出现的最大数
var appearEnemy = 0; //已出现的敌方坦克
var mainframe = 0;
var isGameOver = false;
var overX = 176;
var overY = 384;
var emenyStopTime = 0;
var homeProtectedTime = -1;
var propTime = 300;

增加坦克实体


function addEnemyTank(){
	if(enemyArray == null || enemyArray.length >= maxAppearEnemy || maxEnemy == 0){
		return ;
	}
	appearEnemy++;
	var rand = parseInt(Math.random()*3);
	var obj = null;
	if(rand == 0){
		obj = new EnemyOne(tankCtx);
	}else if(rand == 1){
		obj = new EnemyTwo(tankCtx);
	}else if(rand == 2){
		obj = new EnemyThree(tankCtx);
	}
	obj.x = ENEMY_LOCATION[parseInt(Math.random()*3)] + map.offsetX;
	obj.y = map.offsetY;	
	obj.dir = DOWN;
	enemyArray[enemyArray.length] = obj;
	//更新地图右侧坦克数
	map.clearEnemyNum(maxEnemy,appearEnemy);
}

对坦克射击的设定

this.shoot = function(type){
		if(this.isAI && emenyStopTime > 0 ){
			return;
		}
		if(this.isShooting){
			return ;
		}else{
			var tempX = this.x;
			var tempY = this.y;
			this.bullet = new Bullet(this.ctx,this,type,this.dir);
			if(this.dir == UP){
				tempX = this.x + parseInt(this.size/2) - parseInt(this.bullet.size/2);
				tempY = this.y - this.bullet.size;
			}else if(this.dir == DOWN){
				tempX = this.x + parseInt(this.size/2) - parseInt(this.bullet.size/2);
				tempY = this.y + this.size;
			}else if(this.dir == LEFT){
				tempX = this.x - this.bullet.size;
				tempY = this.y + parseInt(this.size/2) - parseInt(this.bullet.size/2);
			}else if(this.dir == RIGHT){
				tempX = this.x + this.size;
				tempY = this.y + parseInt(this.size/2) - parseInt(this.bullet.size/2);
			}
			this.bullet.x = tempX;
			this.bullet.y = tempY;
			if(!this.isAI){
				ATTACK_AUDIO.play();
			}
			this.bullet.draw();
			//将子弹加入的子弹数组中
			bulletArray.push(this.bullet);
			this.isShooting = true;
		}
	};

碰撞检测

this.isHit = function(){
		//临界检测
		if(this.dir == LEFT){
			if(this.x <= map.offsetX){
				this.x = map.offsetX;
				this.hit = true;
			}
		}else if(this.dir == RIGHT){
			if(this.x >= map.offsetX + map.mapWidth - this.size){
				this.x = map.offsetX + map.mapWidth - this.size;
				this.hit = true;
			}
		}else if(this.dir == UP ){
			if(this.y <= map.offsetY){
				this.y = map.offsetY;
				this.hit = true;
			}
		}else if(this.dir == DOWN){
			if(this.y >= map.offsetY + map.mapHeight - this.size){
				this.y = map.offsetY + map.mapHeight - this.size;
				this.hit = true;
			}
		}
		if(!this.hit){
			//地图检测
			if(tankMapCollision(this,map)){
				this.hit = true;
			}
		}

js回忆经典坦克大战

演示