女朋友想玩自制网页版坦克大战,想多少道具就多少。

导语:
女朋友最近越来越难搞,一会儿植物大战僵尸,一会儿坦克大战,作为一名暖男,必须安排一波,这不,它又来了。

女朋友想玩游戏了。

在这里插入图片描述
安排!!

不多废话咱们直接来看效果。

1,效果图

在这里插入图片描述
吃到了暂停道具。

在这里插入图片描述
吃到了奖励生命一个。

在这里插入图片描述
打完所有的敌人进入下一关。

想要源码的小伙伴关注微信公众号【web小馆】,回复“坦克大战”,下载游戏源码

在这里插入图片描述

2,代码

实现还是挺简单的,只需要html,css,JavaScript就可以。
在这里插入图片描述

audio用于存放游戏的音效。
css用于存放游戏界面,还有样式。
images用于存放游戏里面各种各样的图片,比如坦克和砖头。
js坦克的动态攻击,和道具出现,作用等等。

(1)index.html

<!DOCTYPE html>
<html lang="zh" class="no-js demo-1">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<script src="js/jquery.min.js"></script>
		<script src="js/Helper.js"></script>
		<script src="js/keyboard.js"></script>
		<script src="js/const.js"></script>
		<script src="js/level.js"></script>
		<script src="js/crackAnimation.js"></script>
		<script src="js/prop.js"></script>
		<script src="js/bullet.js"></script>
		<script src="js/tank.js"></script>
		<script src="js/num.js"></script>
		<script src="js/menu.js"></script>
		<script src="js/map.js"></script>
		<script src="js/Collision.js"></script>
		<script src="js/stage.js"></script>
		<script src="js/main.js"></script>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<style type="text/css">
			#canvasDiv canvas{
     
     
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<head><h3>操作说明:玩家1:wasd上左下右,space射击;玩家2:方向键,enter射击。n下一关,p上一关。</h3></head>
			<div class="main clearfix">
				<div id="canvasDiv" >
					<canvas id="wallCanvas" ></canvas> 
					<canvas id="tankCanvas" ></canvas>
					<canvas id="grassCanvas" ></canvas>
					<canvas id="overCanvas" ></canvas> 
					<canvas id="stageCanvas" ></canvas>
				</div>
			</div>
			
		</div><!-- /container -->
	</body>
</html>

(2)js

在这里插入图片描述

1,main.js

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;

$(document).ready(function(){
    
    
	
	initScreen();
	initObject();
	
	setInterval(gameLoop,20);
});

function initScreen(){
    
    
	var canvas = $("#stageCanvas");
	ctx = canvas[0].getContext("2d");
	canvas.attr({
    
    "width":SCREEN_WIDTH});
	canvas.attr({
    
    "height":SCREEN_HEIGHT});
	wallCtx = $("#wallCanvas")[0].getContext("2d");
	grassCtx = $("#grassCanvas")[0].getContext("2d");
	$("#wallCanvas").attr({
    
    "width":SCREEN_WIDTH});
	$("#wallCanvas").attr({
    
    "height":SCREEN_HEIGHT});
	$("#grassCanvas").attr({
    
    "width":SCREEN_WIDTH});
	$("#grassCanvas").attr({
    
    "height":SCREEN_HEIGHT});
	tankCtx = $("#tankCanvas")[0].getContext("2d");
	$("#tankCanvas").attr({
    
    "width":SCREEN_WIDTH});
	$("#tankCanvas").attr({
    
    "height":SCREEN_HEIGHT});
	overCtx = $("#overCanvas")[0].getContext("2d");
	$("#overCanvas").attr({
    
    "width":SCREEN_WIDTH});
	$("#overCanvas").attr({
    
    "height":SCREEN_HEIGHT});
	$("#canvasDiv").css({
    
    "width":SCREEN_WIDTH});
	$("#canvasDiv").css({
    
    "height":SCREEN_HEIGHT});
	$("#canvasDiv").css({
    
    "background-color":"#000000"});
	
}

function initObject(){
    
    
	menu = new Menu(ctx);
	stage = new Stage(ctx,level);
	map = new Map(wallCtx,grassCtx);
	player1 = new PlayTank(tankCtx);
	player1.x = 129 + map.offsetX;
	player1.y = 385 + map.offsetY;
	player2 = new PlayTank(tankCtx);
	player2.offsetX = 128; //player2的图片x与图片1相距128
	player2.x = 256 + map.offsetX;
	player2.y = 385 + map.offsetY;
	appearEnemy = 0; //已出现的敌方坦克
	enemyArray = [];//敌方坦克
	bulletArray = [];//子弹数组
	keys = [];//记录按下的按键
	crackArray = [];//爆炸数组
	isGameOver = false;
	overX = 176;
	overY = 384;
	overCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
	emenyStopTime = 0;
	homeProtectedTime = -1;
	propTime = 1000;
}

function gameLoop(){
    
    
	switch(gameState){
    
    
	
	case GAME_STATE_MENU:
		menu.draw();
		break;
	case GAME_STATE_INIT:
		stage.draw();
		if(stage.isReady == true){
    
    
			gameState = GAME_STATE_START;
		}
		break;
	case GAME_STATE_START:
		drawAll();
		if(isGameOver ||(player1.lives <=0 && player2.lives <= 0)){
    
    
			gameState = GAME_STATE_OVER;
			map.homeHit();
			PLAYER_DESTROY_AUDIO.play();
		}
		if(appearEnemy == maxEnemy && enemyArray.length == 0){
    
    
			gameState  = GAME_STATE_WIN;
		}
		break;
	case GAME_STATE_WIN:
		nextLevel();
		break;
	case GAME_STATE_OVER:
		gameOver();
		break;
	}
}

$(document).keydown(function(e){
    
    
	switch(gameState){
    
    
	case GAME_STATE_MENU:
		if(e.keyCode == keyboard.ENTER){
    
    
			gameState = GAME_STATE_INIT;
			//只有一个玩家
			if(menu.playNum == 1){
    
    
				player2.lives = 0;
			}
		}else{
    
    
			var n = 0;
			if(e.keyCode == keyboard.DOWN){
    
    
				n = 1;
			}else if(e.keyCode == keyboard.UP){
    
    
				n = -1;
			}
			menu.next(n);
		}
		break;
	case GAME_STATE_START:
		if(!keys.contain(e.keyCode)){
    
    
			keys.push(e.keyCode);
		}
		//射击
		if(e.keyCode == keyboard.SPACE && player1.lives > 0){
    
    
			player1.shoot(BULLET_TYPE_PLAYER);
		}else if(e.keyCode == keyboard.ENTER && player2.lives > 0){
    
    
			player2.shoot(BULLET_TYPE_ENEMY);
		}else if(e.keyCode == keyboard.N){
    
    
			nextLevel();
		}else if(e.keyCode == keyboard.P){
    
    
			preLevel();
		}
		break;
	}
});

$(document).keyup(function(e){
    
    
	keys.remove(e.keyCode);
});

function initMap(){
    
    
	map.setMapLevel(level);;
	map.draw();
	drawLives();
}

function drawLives(){
    
    
	map.drawLives(player1.lives,1);
	map.drawLives(player2.lives,2);
}

function drawBullet(){
    
    
	if(bulletArray != null && bulletArray.length > 0){
    
    
		for(var i=0;i<bulletArray.length;i++){
    
    
			var bulletObj = bulletArray[i];
			if(bulletObj.isDestroyed){
    
    
				bulletObj.owner.isShooting = false;
				bulletArray.removeByIndex(i);
				i--;
			}else{
    
    
				bulletObj.draw();
			}
		}
	}
}

function keyEvent(){
    
    
	if(keys.contain(keyboard.W)){
    
    
		player1.dir = UP;
		player1.hit = false;
		player1.move();
	}else if(keys.contain(keyboard.S)){
    
    
		player1.dir = DOWN;
		player1.hit = false;
		player1.move();
	}else if(keys.contain(keyboard.A)){
    
    
		player1.dir = LEFT;
		player1.hit = false;
		player1.move();
	}else if(keys.contain(keyboard.D)){
    
    
		player1.dir = RIGHT;
		player1.hit = false;
		player1.move();
	}
	
	if(keys.contain(keyboard.UP)){
    
    
		player2.dir = UP;
		player2.hit = false;
		player2.move();
	}else if(keys.contain(keyboard.DOWN)){
    
    
		player2.dir = DOWN;
		player2.hit = false;
		player2.move();
	}else if(keys.contain(keyboard.LEFT)){
    
    
		player2.dir = LEFT;
		player2.hit = false;
		player2.move();
	}else if(keys.contain(keyboard.RIGHT)){
    
    
		player2.dir = RIGHT;
		player2.hit = false;
		player2.move();
	}
	
}

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);
}

function drawEnemyTanks(){
    
    
	if(enemyArray != null || enemyArray.length > 0){
    
    
		for(var i=0;i<enemyArray.length;i++){
    
    
			var enemyObj = enemyArray[i];
			if(enemyObj.isDestroyed){
    
    
				enemyArray.removeByIndex(i);
				i--;
			}else{
    
    
				enemyObj.draw();
			}
		}
	}
	if(emenyStopTime > 0){
    
    
		emenyStopTime --;
	}
}

function drawAll(){
    
    
	tankCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
	if(player1.lives>0){
    
    
		player1.draw();
	}
	if(player2.lives > 0){
    
    
		player2.draw();
	}
	drawLives();
	if(appearEnemy<maxEnemy){
    
    
		if(mainframe % 100 == 0){
    
    
			addEnemyTank();
			mainframe = 0;
		}
		mainframe++;
	}
	drawEnemyTanks();
	drawBullet();
	drawCrack();
	keyEvent();
	if(propTime<=0){
    
    
		drawProp();
	}else{
    
    
		propTime --;
	}
	if(homeProtectedTime > 0){
    
    
		homeProtectedTime --;
	}else if(homeProtectedTime == 0){
    
    
		homeProtectedTime = -1;
		homeNoProtected();
	}
}

function drawCrack(){
    
    
	if(crackArray != null && crackArray.length > 0){
    
    
		for(var i=0;i<crackArray.length;i++){
    
    
			var crackObj = crackArray[i];
			if(crackObj.isOver){
    
    
				crackArray.removeByIndex(i);
				i--;
				if(crackObj.owner == player1){
    
    
					player1.renascenc(1);
				}else if(crackObj.owner == player2){
    
    
					player2.renascenc(2);
				}
			}else{
    
    
				crackObj.draw();
			}
		}
	}
}


function gameOver(){
    
    
	overCtx.clearRect(0,0,SCREEN_WIDTH,SCREEN_HEIGHT);
	overCtx.drawImage(RESOURCE_IMAGE,POS["over"][0],POS["over"][1],64,32,overX+map.offsetX,overY+map.offsetY,64,32);
	overY -= 2 ;
	if(overY <= parseInt(map.mapHeight/2)){
    
    
		initObject();
		//只有一个玩家
		if(menu.playNum == 1){
    
    
			player2.lives = 0;
		}
		gameState = GAME_STATE_MENU;
	}
}

function nextLevel(){
    
    
	level ++;
	if(level == 22){
    
    
		level = 1;
	}
	initObject();
	//只有一个玩家
	if(menu.playNum == 1){
    
    
		player2.lives = 0;
	}
	stage.init(level);
	gameState = GAME_STATE_INIT;
}

function preLevel(){
    
    
	level --;
	if(level == 0){
    
    
		level = 21;
	}
	initObject();
	//只有一个玩家
	if(menu.playNum == 1){
    
    
		player2.lives = 0;
	}
	stage.init(level);
	gameState = GAME_STATE_INIT;
}

function drawProp(){
    
    
	var rand = Math.random();
	if(rand < 0.4 && prop == null){
    
    
		prop = new Prop(overCtx);
		prop.init();
	}
	if(prop != null){
    
    
		prop.draw();
		if(prop.isDestroyed){
    
    
			prop = null;
			propTime = 1000;
		}
	}
}

function homeNoProtected(){
    
    
	var mapChangeIndex = [[23,11],[23,12],[23,13],[23,14],[24,11],[24,14],[25,11],[25,14]];
	map.updateMap(mapChangeIndex,WALL);
};

2,tank.js

/**
 * 坦克基类
 * @returns
 */
var Tank = function(){
    
    
	this.x = 0;
	this.y = 0;
	this.size = 32;//坦克的大小
	this.dir = UP;//方向0:上 1:下 2:左3:右
	this.speed = 1;//坦克的速度
	this.frame = 0;//控制敌方坦克切换方向的时间
	this.hit = false; //是否碰到墙或者坦克
	this.isAI = false; //是否自动
	this.isShooting = false;//子弹是否在运行中
	this.bullet = null;//子弹
	this.shootRate = 0.6;//射击的概率
	this.isDestroyed = false;
	this.tempX = 0;
	this.tempY = 0;
	
	this.move = function(){
    
    
		//如果是AI坦克,在一定时间或者碰撞之后切换方法
		
		if(this.isAI && emenyStopTime > 0 ){
    
    
			return;
		}

		this.tempX = this.x;
		this.tempY = this.y;
		
		if(this.isAI){
    
    
			this.frame ++;
			if(this.frame % 100 == 0 || this.hit){
    
    
				this.dir = parseInt(Math.random()*4);//随机一个方向
				this.hit = false;
				this.frame = 0;
			}
		}
		if(this.dir == UP){
    
    
			this.tempY -= this.speed;
		}else if(this.dir == DOWN){
    
    
			this.tempY += this.speed;
		}else if(this.dir == RIGHT){
    
    
			this.tempX += this.speed;
		}else if(this.dir == LEFT){
    
    
			this.tempX -= this.speed;
		}
		this.isHit();
		if(!this.hit){
    
    
			this.x = this.tempX;
			this.y = this.tempY;
		}
	};
	
	/**
	 * 碰撞检测
	 */
	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;
			}
		}
		//坦克检测
		/*if(enemyArray != null && enemyArray.length >0){
			var enemySize = enemyArray.length;
			for(var i=0;i<enemySize;i++){
				if(enemyArray[i] != this && CheckIntersect(enemyArray[i],this,0)){
					this.hit = true;
					break;
				}
			}
		}*/
	};
	
	/**
	 * 是否被击中
	 */
	this.isShot = function(){
    
    
		
	};
	/**
	 * 射击
	 */ 
	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.distroy = function(){
    
    
		this.isDestroyed = true;
		crackArray.push(new CrackAnimation(CRACK_TYPE_TANK,this.ctx,this));
		TANK_DESTROY_AUDIO.play();
	};
	
	
	
};

/**
 * 菜单选择坦克
 * @returns
 */
var SelectTank = function(){
    
    
	this.ys = [250, 281];//两个Y坐标,分别对应1p和2p
	this.x = 140;
	this.size = 27;
};

SelectTank.prototype = new Tank();

/**
 * 玩家坦克
 * @param context 画坦克的画布
 * @returns
 */
var PlayTank = function(context){
    
    
	this.ctx = context;
	this.lives = 3;//生命值
	this.isProtected = true;//是否受保护
	this.protectedTime = 500;//保护时间
	this.offsetX = 0;//坦克2与坦克1的距离
	this.speed = 2;//坦克的速度
	
	this.draw = function(){
    
    
		this.hit = false;
		this.ctx.drawImage(RESOURCE_IMAGE,POS["player"][0]+this.offsetX+this.dir*this.size,POS["player"][1],this.size,this.size,this.x,this.y,this.size,this.size);
		if(this.isProtected){
    
    
			var temp = parseInt((500-this.protectedTime)/5)%2;
			this.ctx.drawImage(RESOURCE_IMAGE,POS["protected"][0],POS["protected"][1]+32*temp,32, 32,this.x,this.y,32, 32);
			this.protectedTime--;
			if(this.protectedTime == 0){
    
    
				this.isProtected = false;
			}
		}
		
	};
	
	this.distroy = function(){
    
    
		this.isDestroyed = true;
		crackArray.push(new CrackAnimation(CRACK_TYPE_TANK,this.ctx,this));
		PLAYER_DESTROY_AUDIO.play();
	};
	
	this.renascenc = function(player){
    
    
		this.lives -- ;
		this.dir = UP;
		this.isProtected = true;
		this.protectedTime = 500;
		this.isDestroyed = false;
		var temp= 0 ;
		if(player == 1){
    
    
			temp = 129;
		}else{
    
    
			temp = 256;
		}
		this.x = temp + map.offsetX;
		this.y = 385 + map.offsetY;
	};
	
};
PlayTank.prototype = new Tank();

/**
 * 敌方坦克1
 * @param context 画坦克的画布
 * @returns
 */
var EnemyOne = function(context){
    
    
	this.ctx = context;
	this.isAppear = false;
	this.times = 0;
	this.lives = 1;
	this.isAI = true;
	this.speed = 1.5;
	
	this.draw = function(){
    
    
		this.times ++;
		if(!this.isAppear){
    
    
			var temp = parseInt(this.times/5)%7;
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
			if(this.times == 34){
    
    
				this.isAppear = true;
				this.times = 0;
				this.shoot(2);
			}
		}else{
    
    
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy1"][0]+this.dir*this.size,POS["enemy1"][1],32,32,this.x,this.y,32,32);
			
			//以一定的概率射击
			if(this.times %50 ==0){
    
    
				var ra = Math.random();
				if(ra < this.shootRate){
    
    
					this.shoot(2);
				}
				this.times = 0;
			}
			this.move();
			
			
		}
		
	};
	
};
EnemyOne.prototype = new Tank();


/**
 * 敌方坦克2
 * @param context 画坦克的画布
 * @returns
 */
var EnemyTwo = function(context){
    
    
	this.ctx = context;
	this.isAppear = false;
	this.times = 0;
	this.lives = 2;
	this.isAI = true;
	this.speed = 1;
	
	this.draw = function(){
    
    
		this.times ++;
		if(!this.isAppear){
    
    
			var temp = parseInt(this.times/5)%7;
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
			if(this.times == 35){
    
    
				this.isAppear = true;
				this.times = 0;
				this.shoot(2);
			}
		}else{
    
    
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy2"][0]+this.dir*this.size,POS["enemy2"][1],32,32,this.x,this.y,32,32);
			//以一定的概率射击
			if(this.times %50 ==0){
    
    
				var ra = Math.random();
				if(ra < this.shootRate){
    
    
					this.shoot(2);
				}
				this.times = 0;
			}
			this.move();
		}
	};
	
};
EnemyTwo.prototype = new Tank();



/**
 * 敌方坦克3
 * @param context 画坦克的画布
 * @returns
 */
var EnemyThree = function(context){
    
    
	this.ctx = context;
	this.isAppear = false;
	this.times = 0;
	this.lives = 3;
	this.isAI = true;
	this.speed = 0.5;
	
	this.draw = function(){
    
    
		this.times ++;
		if(!this.isAppear){
    
    
			var temp = parseInt(this.times/5)%7;
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemyBefore"][0]+temp*32,POS["enemyBefore"][1],32,32,this.x,this.y,32,32);
			if(this.times == 35){
    
    
				this.isAppear = true;
				this.times = 0;
				this.shoot(2);
			}
		}else{
    
    
			this.ctx.drawImage(RESOURCE_IMAGE,POS["enemy3"][0]+this.dir*this.size+(3-this.lives)*this.size*4,POS["enemy3"][1],32,32,this.x,this.y,32,32);
			//以一定的概率射击
			if(this.times %50 ==0){
    
    
				var ra = Math.random();
				if(ra < this.shootRate){
    
    
					this.shoot(2);
				}
				this.times = 0;
			}
			this.move();
		}
		
	};
	
};
EnemyThree.prototype = new Tank();

游戏素材来自网上,侵权麻烦联系删除

猜你喜欢

转载自blog.csdn.net/gitchatxiaomi/article/details/109008148