Implemente fácilmente batallas de tanques en inscode (código fuente incluido)

News 2023-07-25 22:09:05 views: null

prefacio

inserte la descripción de la imagen aquí
"Página de inicio del autor" : Sprite Youbai Bubbles
"Sitio web personal" : Sitio web personal de Sprite
"Columna de recomendaciones" :

★ Servicio integral de Java ★
★ Intercambio de código genial de front-end
★ ★ uniapp: desde la construcción hasta la promoción ★
★ De 0 a héroe, el camino de Vue a dios ★
★ Algoritmo de resolución, una columna es suficiente ★
★ Hablemos de arquitectura desde 0 ★
★ La forma sutil de circulación de datos ★

Por favor agregue una descripción de la imagen

Directorio de artículos

Conoce inscode

inserte la descripción de la imagen aquí
El último servicio Inscode de CSDN es una herramienta de programación en línea diseñada para proporcionar a los desarrolladores un entorno conveniente para escribir, ejecutar y compartir código, lo que les permite escribir y ejecutar código rápidamente sin crear un entorno de programación local.

Inscode admite múltiples lenguajes de programación, incluidos Java, Python, C ++, etc., y también admite la escritura de códigos HTML, CSS y JavaScript. Proporciona un entorno operativo completo, lo que permite que el código se ejecute directamente en la página web y genere los resultados, depuración en tiempo real, conveniente y rápido. Al mismo tiempo, Inscode también proporciona una función para compartir, que puede compartir fácilmente el código con otros.

Para usar Inscode, simplemente visite su sitio web https://inscode.csdn.net/
página de inicio personal: why_does_it_work

Tank Wars ejecutándose en inscode

inserte la descripción de la imagen aquí
Aquí puede ver directamente el contenido del código fuente , actualizar , y el último es acercar y saltar a la página web.

Ver el contenido del código fuente

inserte la descripción de la imagen aquí

Acercar y saltar a la página

inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí
puede jugar directamente

código fuente principal

índice.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 style="width:100%; height:100%;" > 
		<div class="container" >
			
			<div class="main clearfix" style="position:fixed;top:20%;height:488px;">
			<div style="position: fixed;margin:5px auto;width:100%;height:448px;">
				<div id="canvasDiv" style="margin-left:auto;margin-right:auto;">
					
					<canvas id="wallCanvas"  ></canvas> 
					<canvas id="tankCanvas" ></canvas>
					<canvas id="grassCanvas" ></canvas>
					<canvas id="overCanvas" ></canvas> 
					<canvas id="stageCanvas"></canvas>
				</div>
			</div>
			</div>
			
		</div><!-- /container -->

	</div>

	</body>
</html>

En la sección HTML se define el tipo de documento, el idioma y alguna metainformación. Algunos archivos JavaScript externos y archivos CSS se introducen en la etiqueta principal, que se utilizan para definir la lógica y el estilo del juego.

En la etiqueta del cuerpo, se utiliza un elemento div como contenedor, y el ancho y el alto se establecen en 100 %. En el contenedor, se crean algunos lienzos a través del elemento canvas, que se utilizan para mostrar las paredes, los tanques, la hierba y otros elementos del juego.

La estructura de toda la página es relativamente simple, y JavaScript realiza la lógica principal y la representación. A través de la introducción de archivos JavaScript, se realizan varias funciones en el juego, como el movimiento de tanques, el lanzamiento de balas y la detección de colisiones.

archivo css

.main,
.container > header {
    
    
	margin: 0 auto;
	/*padding: 2em;*/
}

.container {
    
    
	height: 100%;
}

.container > header {
    
    
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background: rgba(0,0,0,0.01);
}

.container > header h1 {
    
    
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
    
    
	display: block;
	font-size: 60%;
	opacity: 0.3;
	padding: 0 0 0.6em 0.1em;
}

/* Main Content */
.main {
    
    
	/*max-width: 69em;*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.demo-scroll{
    
    
	overflow-y: scroll;
	width: 100%;
	height: 100%;
}
.column {
    
    
	float: left;
	width: 50%;
	padding: 0 2em;
	min-height: 300px;
	position: relative;
}

.column:nth-child(2) {
    
    
	box-shadow: -1px 0 0 rgba(0,0,0,0.1);
}

.column p {
    
    
	font-weight: 300;
	font-size: 2em;
	padding: 0;
	margin: 0;
	text-align: right;
	line-height: 1.5;
}

/* To Navigation Style */
.htmleaf-top {
    
    
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}

.htmleaf-top a {
    
    
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #888;
	display: inline-block;
}

.htmleaf-top a:hover {
    
    
	background: rgba(255,255,255,0.95);
	color: #333;
}

.htmleaf-top span.right {
    
    
	float: right;
}

.htmleaf-top span.right a {
    
    
	float: left;
	display: block;
}

.htmleaf-icon:before {
    
    
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}



/* Demo Buttons Style */
.htmleaf-demos {
    
    
	padding-top: 1em;
	font-size: 0.9em;
}

.htmleaf-demos a {
    
    
	display: inline-block;
	margin: 0.2em;
	padding: 0.45em 1em;
	background: #999;
	color: #fff;
	font-weight: 700;
	border-radius: 2px;
}

.htmleaf-demos a:hover,
.htmleaf-demos a.current-demo,
.htmleaf-demos a.current-demo:hover {
    
    
	opacity: 0.6;
}

.htmleaf-nav {
    
    
	text-align: center;
}

.htmleaf-nav a {
    
    
	display: inline-block;
	margin: 20px auto;
	padding: 0.3em;
}
.bb-custom-wrapper {
    
    
	width: 420px;
	position: relative;
	margin: 0 auto 40px;
	text-align: center;
}
/* Demo Styles */

.demo-1 body {
    
    
	color: #87968e;
	background: #000;
}

.demo-1 a {
    
    
	color: #72b890;
}

.demo-1 .htmleaf-demos a {
    
    
	background: #72b890;
	color: #fff;
}

.demo-2 body {
    
    
	color: #fff;
	background: #c05d8e;
}

.demo-2 a {
    
    
	color: #d38daf;
}

.demo-2 a:hover,
.demo-2 a:active {
    
    
	color: #fff;
}

.demo-2 .htmleaf-demos a {
    
    
	background: #883b61;
	color: #fff;
}

.demo-2 .htmleaf-top a:hover {
    
    
	background: rgba(255,255,255,0.3);
	color: #333;
}

.demo-3 body {
    
    
	color: #87968e;
	background: #fff2e3;
}

.demo-3 a {
    
    
	color: #ea5381;
}

.demo-3 .htmleaf-demos a {
    
    
	background: #ea5381;
	color: #fff;
}

.demo-4 body {
    
    
	color: #999;
	background: #fff2e3;
	overflow: hidden;
}

.demo-4 a {
    
    
	color: #1baede;
}

.demo-4 a:hover,
.demo-4 a:active {
    
    
	opacity: 0.6;
}

.demo-4 .htmleaf-demos a {
    
    
	background: #1baede;
	color: #fff;
}

.demo-5 body {
    
    
	background: #fffbd6;
}
/****/
.related {
    
    
	/*margin-top: 5em;*/
	color: #fff;
	background: #333;
	text-align: center;
	font-size: 1.25em;
	padding: 3em 0;
	overflow: hidden;
}

.related a {
    
    
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
    
    
	opacity: 1;
}

.related a img {
    
    
	max-width: 100%;
}

.related a h3 {
    
    
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}

@media screen and (max-width: 40em) {
    
    

	.htmleaf-icon span {
    
    
		display: none;
	}

	.htmleaf-icon:before {
    
    
		font-size: 160%;
		line-height: 2;
	}

}

@media screen and (max-width: 46.0625em) {
    
    
	.column {
    
    
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}

	.column p {
    
    
		text-align: left;
		font-size: 1.5em;
	}

	.column:nth-child(2) {
    
    
		box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
	}
}

@media screen and (max-width: 25em) {
    
    

	.htmleaf-icon span {
    
    
		display: none;
	}

}
  1. Estilo del encabezado: establezca el estilo del encabezado de la página web, incluida la alineación central, la transparencia del fondo, el tamaño y el peso de la fuente del título, etc.
  2. Estilo del contenido principal: define el estilo del área de contenido principal, incluido el ancho, la altura, el desbordamiento oculto, el diseño flotante de dos columnas, el estilo de fuente del párrafo, etc.
  3. Estilo de navegación: establezca el estilo de la barra de navegación superior, incluido el color de fondo, el estilo de enlace y el efecto de desplazamiento, etc.
  4. Estilo del botón: define el estilo del botón de demostración, incluido el color de fondo, el color de fuente, el borde redondeado, etc.
  5. Estilo de demostración: define los estilos de las diferentes versiones de demostración, incluido el color de fondo, el color del enlace y los efectos de desplazamiento, etc.
  6. Estilo de contenido relacionado: establezca el estilo del área de contenido relacionado, incluido el color de fondo, el color del texto, el tamaño de fuente y el estilo del vínculo, etc. El código se usa principalmente para crear una página web receptiva con diferentes versiones de demostración y contenido relacionado.

principal.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_PLAYER);
		}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;
	}
	//保存玩家数
	var old_player_num = menu.playNum;
	initObject();
	menu.playNum = old_player_num;
	
	//只有一个玩家
	if(menu.playNum == 1){
    
    
		player2.lives = 0;
	}
	stage.init(level);
	gameState = GAME_STATE_INIT;
}

function preLevel(){
    
    
	level --;
	if(level == 0){
    
    
		level = 21;
	}
	//保存玩家数
	var old_player_num = menu.playNum;
	initObject();
	menu.playNum = old_player_num;

	//只有一个玩家
	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);
};

descargar

Puede clonar directamente el proyecto (Fork) en el interior para descargar y aprender
inserte la descripción de la imagen aquí
Link: Tank Wars

Supongo que te gusta

Origin blog.csdn.net/Why_does_it_work/article/details/131817565
Recomendado
Clasificación
Diario
Más
2024-06-01(2)
2024-05-31(0)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(1)
2024-05-25(0)
2024-05-24(13)
2024-05-23(34)

Code World

© 2018 codetd.com