Spaces:

Davi111
/

gg

Running

App Files Files Community

gg / index.html

Davi111

Add 3 files

580aec7 verified over 1 year ago

Raw

History Blame Contribute Delete

25.1 kB

	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dragon Ball MUGEN</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

	body {
	overflow: hidden;
	font-family: 'Permanent Marker', cursive;
	background-color: #111;
	color: white;
	}

	#game-container {
	position: relative;
	width: 800px;
	height: 400px;
	margin: 0 auto;
	background-image: url('https://i.imgur.com/3ZQjY7a.jpg');
	background-size: cover;
	border: 4px solid #f5d742;
	box-shadow: 0 0 20px #f5d742;
	}

	.character {
	position: absolute;
	width: 80px;
	height: 120px;
	bottom: 50px;
	transition: transform 0.1s;
	}

	#goku {
	left: 100px;
	background-image: url('https://i.imgur.com/J0q0Z7N.png');
	background-size: contain;
	background-repeat: no-repeat;
	}

	#vegeta {
	right: 100px;
	background-image: url('https://i.imgur.com/5X9QZ7N.png');
	background-size: contain;
	background-repeat: no-repeat;
	transform: scaleX(-1);
	}

	.health-bar {
	height: 20px;
	background-color: #333;
	border: 2px solid #fff;
	position: relative;
	}

	.health-fill {
	height: 100%;
	background-color: #ff0000;
	transition: width 0.3s;
	}

	.ki-bar {
	height: 10px;
	background-color: #333;
	border: 1px solid #fff;
	position: relative;
	}

	.ki-fill {
	height: 100%;
	background-color: #00aaff;
	transition: width 0.3s;
	}

	.attack-effect {
	position: absolute;
	width: 60px;
	height: 40px;
	background-image: url('https://i.imgur.com/8Q9QZ7N.png');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	}

	.kamehameha {
	position: absolute;
	width: 300px;
	height: 60px;
	background-image: url('https://i.imgur.com/9Q9QZ7N.png');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	}

	.power-up {
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url('https://i.imgur.com/7Q9QZ7N.png');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	animation: pulse 1s infinite;
	}

	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
	}

	#start-screen, #game-over {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
	}

	.title {
	font-size: 4rem;
	color: #f5d742;
	text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
	margin-bottom: 2rem;
	}

	.btn {
	padding: 1rem 2rem;
	font-size: 1.5rem;
	background-color: #f5d742;
	color: #111;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s;
	font-family: 'Permanent Marker', cursive;
	}

	.btn:hover {
	background-color: #ff0000;
	color: white;
	transform: scale(1.1);
	}

	.combo-counter {
	position: absolute;
	font-size: 2rem;
	color: #f5d742;
	text-shadow: 0 0 5px #ff0000;
	opacity: 0;
	}
	</style>
	</head>
	<body class="bg-black">
	<div class="container mx-auto py-8">
	<h1 class="text-4xl text-center text-yellow-400 font-bold mb-8">DRAGON BALL MUGEN</h1>

	<div class="flex justify-between mb-4">
	<div class="w-1/3">
	<div class="text-xl text-red-500 mb-1">GOKU</div>
	<div class="health-bar mb-1">
	<div id="goku-health" class="health-fill" style="width: 100%"></div>
	</div>
	<div class="ki-bar">
	<div id="goku-ki" class="ki-fill" style="width: 0%"></div>
	</div>
	</div>

	<div class="w-1/3 text-center text-yellow-400 text-xl">
	<div id="timer">01:30</div>
	<div id="round">Round 1</div>
	</div>

	<div class="w-1/3 text-right">
	<div class="text-xl text-blue-400 mb-1">VEGETA</div>
	<div class="health-bar mb-1">
	<div id="vegeta-health" class="health-fill" style="width: 100%"></div>
	</div>
	<div class="ki-bar">
	<div id="vegeta-ki" class="ki-fill" style="width: 0%"></div>
	</div>
	</div>
	</div>

	<div id="game-container">
	<div id="goku" class="character"></div>
	<div id="vegeta" class="character"></div>

	<div id="goku-punch" class="attack-effect"></div>
	<div id="vegeta-punch" class="attack-effect"></div>

	<div id="goku-kamehameha" class="kamehameha"></div>
	<div id="vegeta-final-flash" class="kamehameha"></div>

	<div id="power-up" class="power-up"></div>

	<div id="combo-counter" class="combo-counter">COMBO x5!</div>

	<div id="start-screen">
	<h2 class="title">DRAGON BALL MUGEN</h2>
	<button id="start-btn" class="btn">COMEÇAR!</button>
	<div class="mt-4 text-yellow-400">
	<p>Controles Goku: WASD para mover, J para soco, K para chute, L para Kamehameha</p>
	<p>Controles Vegeta: Setas para mover, N para soco, M para chute, , para Final Flash</p>
	</div>
	</div>

	<div id="game-over" style="display: none;">
	<h2 id="winner-text" class="title">GOKU VENCEU!</h2>
	<button id="restart-btn" class="btn">JOGAR NOVAMENTE</button>
	</div>
	</div>

	<div class="mt-8 text-center text-gray-400">
	<p>Jogo criado com HTML, CSS e JavaScript \| Estilo MUGEN</p>
	</div>
	</div>

	<script>
	// Game state
	const gameState = {
	started: false,
	timeLeft: 90, // 1:30 minutes
	round: 1,
	goku: {
	health: 100,
	ki: 0,
	position: 100,
	direction: 1,
	attacking: false,
	combo: 0,
	lastAttackTime: 0
	},
	vegeta: {
	health: 100,
	ki: 0,
	position: 700,
	direction: -1,
	attacking: false,
	combo: 0,
	lastAttackTime: 0
	},
	powerUp: {
	active: false,
	x: 0,
	y: 0
	}
	};

	// DOM elements
	const gameContainer = document.getElementById('game-container');
	const gokuElement = document.getElementById('goku');
	const vegetaElement = document.getElementById('vegeta');
	const gokuPunch = document.getElementById('goku-punch');
	const vegetaPunch = document.getElementById('vegeta-punch');
	const gokuKamehameha = document.getElementById('goku-kamehameha');
	const vegetaFinalFlash = document.getElementById('vegeta-final-flash');
	const powerUp = document.getElementById('power-up');
	const comboCounter = document.getElementById('combo-counter');

	const gokuHealth = document.getElementById('goku-health');
	const vegetaHealth = document.getElementById('vegeta-health');
	const gokuKi = document.getElementById('goku-ki');
	const vegetaKi = document.getElementById('vegeta-ki');

	const timerElement = document.getElementById('timer');
	const roundElement = document.getElementById('round');

	const startScreen = document.getElementById('start-screen');
	const gameOverScreen = document.getElementById('game-over');
	const winnerText = document.getElementById('winner-text');

	const startBtn = document.getElementById('start-btn');
	const restartBtn = document.getElementById('restart-btn');

	// Event listeners
	startBtn.addEventListener('click', startGame);
	restartBtn.addEventListener('click', restartGame);

	// Keyboard state
	const keys = {
	w: false,
	a: false,
	s: false,
	d: false,
	j: false,
	k: false,
	l: false,

	ArrowUp: false,
	ArrowLeft: false,
	ArrowDown: false,
	ArrowRight: false,
	n: false,
	m: false,
	',': false
	};

	// Keyboard event listeners
	document.addEventListener('keydown', (e) => {
	if (keys.hasOwnProperty(e.key)) {
	keys[e.key] = true;
	}
	});

	document.addEventListener('keyup', (e) => {
	if (keys.hasOwnProperty(e.key)) {
	keys[e.key] = false;
	}
	});

	// Start game function
	function startGame() {
	gameState.started = true;
	startScreen.style.display = 'none';

	// Start game loop
	gameLoop();

	// Start timer
	const timer = setInterval(() => {
	gameState.timeLeft--;

	const minutes = Math.floor(gameState.timeLeft / 60);
	const seconds = gameState.timeLeft % 60;

	timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

	if (gameState.timeLeft <= 0) {
	clearInterval(timer);
	endGame();
	}
	}, 1000);

	// Spawn power ups randomly
	setInterval(() => {
	if (!gameState.powerUp.active && Math.random() > 0.7) {
	spawnPowerUp();
	}
	}, 10000);
	}

	// Restart game function
	function restartGame() {
	// Reset game state
	gameState.started = true;
	gameState.timeLeft = 90;
	gameState.round = 1;

	gameState.goku = {
	health: 100,
	ki: 0,
	position: 100,
	direction: 1,
	attacking: false,
	combo: 0,
	lastAttackTime: 0
	};

	gameState.vegeta = {
	health: 100,
	ki: 0,
	position: 700,
	direction: -1,
	attacking: false,
	combo: 0,
	lastAttackTime: 0
	};

	gameState.powerUp.active = false;

	// Update UI
	gokuHealth.style.width = '100%';
	vegetaHealth.style.width = '100%';
	gokuKi.style.width = '0%';
	vegetaKi.style.width = '0%';

	timerElement.textContent = '01:30';
	roundElement.textContent = 'Round 1';

	gameOverScreen.style.display = 'none';

	// Reset positions
	gokuElement.style.left = '100px';
	vegetaElement.style.left = '700px';

	// Start game again
	startGame();
	}

	// End game function
	function endGame() {
	gameState.started = false;

	// Determine winner
	if (gameState.goku.health > gameState.vegeta.health) {
	winnerText.textContent = 'GOKU VENCEU!';
	} else if (gameState.vegeta.health > gameState.goku.health) {
	winnerText.textContent = 'VEGETA VENCEU!';
	} else {
	winnerText.textContent = 'EMPATE!';
	}

	gameOverScreen.style.display = 'flex';
	}

	// Spawn power up function
	function spawnPowerUp() {
	gameState.powerUp.active = true;
	gameState.powerUp.x = Math.random() * 600 + 100;
	gameState.powerUp.y = Math.random() * 200 + 100;

	powerUp.style.left = `${gameState.powerUp.x}px`;
	powerUp.style.top = `${gameState.powerUp.y}px`;
	powerUp.style.opacity = '1';

	// Power up disappears after 5 seconds
	setTimeout(() => {
	if (gameState.powerUp.active) {
	powerUp.style.opacity = '0';
	gameState.powerUp.active = false;
	}
	}, 5000);
	}

	// Check collision function
	function checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
	return x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2;
	}

	// Game loop
	function gameLoop() {
	if (!gameState.started) return;

	// Update characters
	updateCharacter('goku');
	updateCharacter('vegeta');

	// Check for power up collection
	if (gameState.powerUp.active) {
	const gokuRect = gokuElement.getBoundingClientRect();
	const vegetaRect = vegetaElement.getBoundingClientRect();
	const powerUpRect = powerUp.getBoundingClientRect();

	if (checkCollision(
	gokuRect.left, gokuRect.top, gokuRect.width, gokuRect.height,
	powerUpRect.left, powerUpRect.top, powerUpRect.width, powerUpRect.height
	)) {
	gameState.goku.ki = Math.min(100, gameState.goku.ki + 30);
	gokuKi.style.width = `${gameState.goku.ki}%`;
	powerUp.style.opacity = '0';
	gameState.powerUp.active = false;
	showCombo('goku', 'POWER UP!');
	}

	if (checkCollision(
	vegetaRect.left, vegetaRect.top, vegetaRect.width, vegetaRect.height,
	powerUpRect.left, powerUpRect.top, powerUpRect.width, powerUpRect.height
	)) {
	gameState.vegeta.ki = Math.min(100, gameState.vegeta.ki + 30);
	vegetaKi.style.width = `${gameState.vegeta.ki}%`;
	powerUp.style.opacity = '0';
	gameState.powerUp.active = false;
	showCombo('vegeta', 'POWER UP!');
	}
	}

	// Check for attacks
	checkAttacks();

	// Continue game loop
	requestAnimationFrame(gameLoop);
	}

	// Update character function
	function updateCharacter(character) {
	const charState = gameState[character];
	const charElement = character === 'goku' ? gokuElement : vegetaElement;

	// Movement
	if (character === 'goku') {
	if (keys.a && charState.position > 0) {
	charState.position -= 5;
	charState.direction = -1;
	charElement.style.transform = 'scaleX(-1)';
	}
	if (keys.d && charState.position < 720) {
	charState.position += 5;
	charState.direction = 1;
	charElement.style.transform = 'scaleX(1)';
	}
	} else {
	if (keys.ArrowLeft && charState.position > 0) {
	charState.position -= 5;
	charState.direction = -1;
	charElement.style.transform = 'scaleX(-1)';
	}
	if (keys.ArrowRight && charState.position < 720) {
	charState.position += 5;
	charState.direction = 1;
	charElement.style.transform = 'scaleX(1)';
	}
	}

	// Update position
	charElement.style.left = `${charState.position}px`;

	// Regenerate ki
	if (!charState.attacking) {
	charState.ki = Math.min(100, charState.ki + 0.1);
	if (character === 'goku') {
	gokuKi.style.width = `${charState.ki}%`;
	} else {
	vegetaKi.style.width = `${charState.ki}%`;
	}
	}
	}

	// Check attacks function
	function checkAttacks() {
	const now = Date.now();

	// Goku attacks
	if (keys.j && now - gameState.goku.lastAttackTime > 500) {
	performAttack('goku', 'punch', 10);
	gameState.goku.lastAttackTime = now;
	}

	if (keys.k && now - gameState.goku.lastAttackTime > 500) {
	performAttack('goku', 'kick', 15);
	gameState.goku.lastAttackTime = now;
	}

	if (keys.l && gameState.goku.ki >= 50 && now - gameState.goku.lastAttackTime > 1000) {
	performAttack('goku', 'kamehameha', 30);
	gameState.goku.ki -= 50;
	gokuKi.style.width = `${gameState.goku.ki}%`;
	gameState.goku.lastAttackTime = now;
	}

	// Vegeta attacks
	if (keys.n && now - gameState.vegeta.lastAttackTime > 500) {
	performAttack('vegeta', 'punch', 10);
	gameState.vegeta.lastAttackTime = now;
	}

	if (keys.m && now - gameState.vegeta.lastAttackTime > 500) {
	performAttack('vegeta', 'kick', 15);
	gameState.vegeta.lastAttackTime = now;
	}

	if (keys[','] && gameState.vegeta.ki >= 50 && now - gameState.vegeta.lastAttackTime > 1000) {
	performAttack('vegeta', 'finalflash', 30);
	gameState.vegeta.ki -= 50;
	vegetaKi.style.width = `${gameState.vegeta.ki}%`;
	gameState.vegeta.lastAttackTime = now;
	}
	}

	// Perform attack function
	function performAttack(character, attackType, damage) {
	const charState = gameState[character];
	const opponent = character === 'goku' ? 'vegeta' : 'goku';
	const opponentElement = opponent === 'goku' ? gokuElement : vegetaElement;

	charState.attacking = true;

	// Show attack effect
	if (attackType === 'punch' \|\| attackType === 'kick') {
	const attackElement = character === 'goku' ? gokuPunch : vegetaPunch;

	attackElement.style.left = `${charState.position + (charState.direction === 1 ? 60 : -40)}px`;
	attackElement.style.top = '180px';
	attackElement.style.opacity = '1';
	attackElement.style.transform = `scaleX(${charState.direction})`;

	setTimeout(() => {
	attackElement.style.opacity = '0';
	charState.attacking = false;
	}, 200);
	} else if (attackType === 'kamehameha') {
	const attackElement = character === 'goku' ? gokuKamehameha : vegetaFinalFlash;

	attackElement.style.left = `${charState.position + (charState.direction === 1 ? 80 : -300)}px`;
	attackElement.style.top = '150px';
	attackElement.style.opacity = '1';
	attackElement.style.transform = `scaleX(${charState.direction})`;

	setTimeout(() => {
	attackElement.style.opacity = '0';
	charState.attacking = false;
	}, 1000);
	}

	// Check if attack hits
	setTimeout(() => {
	const charRect = character === 'goku' ? gokuElement.getBoundingClientRect() : vegetaElement.getBoundingClientRect();
	const opponentRect = opponentElement.getBoundingClientRect();

	let attackWidth = 60;
	let attackHeight = 40;

	if (attackType === 'kamehameha' \|\| attackType === 'finalflash') {
	attackWidth = 300;
	attackHeight = 60;
	}

	const attackX = charState.position + (charState.direction === 1 ? 80 : -attackWidth);

	if (checkCollision(
	attackX, 150, attackWidth, attackHeight,
	gameState[opponent].position, 180, 80, 120
	)) {
	// Hit opponent
	gameState[opponent].health = Math.max(0, gameState[opponent].health - damage);

	if (character === 'goku') {
	vegetaHealth.style.width = `${gameState.vegeta.health}%`;
	} else {
	gokuHealth.style.width = `${gameState.goku.health}%`;
	}

	// Combo counter
	charState.combo++;
	if (charState.combo > 1) {
	showCombo(character, `COMBO x${charState.combo}!`);
	}

	// Knockback effect
	opponentElement.style.transform = `translateX(${character === 'goku' ? '20px' : '-20px'}) scaleX(${gameState[opponent].direction})`;
	setTimeout(() => {
	opponentElement.style.transform = `scaleX(${gameState[opponent].direction})`;
	}, 100);

	// Check if opponent is defeated
	if (gameState[opponent].health <= 0) {
	endGame();
	}
	} else {
	// Missed attack
	charState.combo = 0;
	}
	}, attackType === 'punch' \|\| attackType === 'kick' ? 100 : 300);
	}

	// Show combo function
	function showCombo(character, text) {
	comboCounter.textContent = text;

	if (character === 'goku') {
	comboCounter.style.left = `${gameState.goku.position - 50}px`;
	comboCounter.style.top = '100px';
	comboCounter.style.color = '#f5d742';
	} else {
	comboCounter.style.left = `${gameState.vegeta.position - 50}px`;
	comboCounter.style.top = '100px';
	comboCounter.style.color = '#00aaff';
	}

	comboCounter.style.opacity = '1';

	setTimeout(() => {
	comboCounter.style.opacity = '0';
	}, 1000);
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Davi111/gg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>