Spaces:

Eligrgs
/

gold

Running

App Files Files Community

gold / index.html

Eligrgs

Add 3 files

829bf47 verified 10 months ago

raw

history blame contribute delete

26.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hoops Hero - Dunk Challenge</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	}

	body {
	font-family: 'Bungee', cursive;
	overflow: hidden;
	background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d);
	color: white;
	}

	#gameCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	}

	.court {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #1a2a6c, #004d99);
	z-index: 0;
	}

	.controls {
	position: absolute;
	bottom: 30px;
	width: 100%;
	display: flex;
	justify-content: center;
	z-index: 10;
	}

	.jump-btn {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 215, 0, 0.7);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #1a2a6c;
	font-size: 24px;
	user-select: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	border: 4px solid white;
	cursor: pointer;
	}

	.jump-btn:active {
	transform: scale(0.95);
	background: rgba(255, 215, 0, 0.9);
	}

	.menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.8);
	z-index: 100;
	backdrop-filter: blur(5px);
	}

	.menu h1 {
	font-size: 4rem;
	margin-bottom: 2rem;
	color: #FFD700;
	text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700;
	letter-spacing: 2px;
	text-align: center;
	}

	.menu-btn {
	background: linear-gradient(45deg, #FFD700, #FFA500);
	border: none;
	color: #1a2a6c;
	padding: 15px 40px;
	font-size: 1.5rem;
	border-radius: 50px;
	margin: 10px;
	cursor: pointer;
	font-family: 'Bungee', cursive;
	box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
	transition: all 0.3s;
	}

	.menu-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
	}

	.menu-btn:active {
	transform: translateY(0);
	}

	.score-panel {
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	flex-direction: column;
	z-index: 10;
	}

	.score {
	font-size: 1.8rem;
	color: white;
	background: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	border-radius: 10px;
	margin-bottom: 10px;
	}

	.dunks {
	font-size: 1.8rem;
	color: #FFD700;
	background: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	border-radius: 10px;
	}

	.combo-meter {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 120px;
	height: 40px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: white;
	z-index: 10;
	}

	.combo-fill {
	position: absolute;
	left: 5px;
	top: 5px;
	bottom: 5px;
	width: 0%;
	background: linear-gradient(to right, #4facfe, #00f2fe);
	border-radius: 15px;
	transition: width 0.3s;
	z-index: -1;
	}

	.dunk-effect {
	position: absolute;
	font-size: 2rem;
	color: #FFD700;
	font-weight: bold;
	opacity: 0;
	animation: dunkFloat 1s forwards;
	z-index: 5;
	text-shadow: 0 0 5px black;
	}

	@keyframes dunkFloat {
	0% {
	transform: translateY(0) scale(1);
	opacity: 1;
	}
	100% {
	transform: translateY(-100px) scale(1.5);
	opacity: 0;
	}
	}

	.swish-effect {
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2L4 12l8 10 8-10z"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	animation: swishSpin 1s forwards;
	z-index: 5;
	}

	@keyframes swishSpin {
	0% {
	transform: scale(0.5) rotate(0deg);
	opacity: 1;
	}
	100% {
	transform: scale(2) rotate(360deg);
	opacity: 0;
	}
	}

	.game-over {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.8);
	z-index: 200;
	backdrop-filter: blur(5px);
	}

	.game-over h2 {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: #FFD700;
	text-shadow: 0 0 10px #FFD700;
	}

	.final-score {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="court"></div>
	<canvas id="gameCanvas"></canvas>

	<div class="score-panel">
	<div class="score">
	Score: <span id="scoreValue">0</span>
	</div>
	<div class="dunks">
	Dunks: <span id="dunkValue">0</span>
	</div>
	</div>

	<div class="combo-meter">
	<div class="combo-fill" id="comboFill"></div>
	<span id="comboText">Combo: 0x</span>
	</div>

	<div class="controls">
	<div class="jump-btn" id="jumpBtn">
	<i class="fas fa-basketball-ball"></i>
	</div>
	</div>

	<div class="menu" id="menu">
	<h1>HOOPS HERO<br>DUNK CHALLENGE</h1>
	<button class="menu-btn" id="startBtn">START GAME</button>
	<button class="menu-btn" id="howToBtn">HOW TO PLAY</button>
	</div>

	<div class="game-over" id="gameOver">
	<h2>GAME OVER!</h2>
	<div class="final-score" id="finalScore">Score: 0</div>
	<button class="menu-btn" id="restartBtn">PLAY AGAIN</button>
	</div>

	<script>
	// Game variables
	let canvas, ctx;
	let gameRunning = false;
	let score = 0;
	let dunks = 0;
	let combo = 0;
	let maxCombo = 0;
	let comboTime = 0;
	let maxComboTime = 3000; // 3 seconds to maintain combo
	let playerY = 0;
	let playerX = 0;
	let playerWidth = 60;
	let playerHeight = 90;
	let gravity = 0.5;
	let jumpForce = -12;
	let velocity = 0;
	let isJumping = false;
	let hoops = [];
	let lastHoopTime = 0;
	let hoopInterval = 1500;
	let gameSpeed = 3;
	let animationId;
	let gameTime = 0;
	let difficulty = 1;

	// Initialize game
	function init() {
	canvas = document.getElementById('gameCanvas');
	ctx = canvas.getContext('2d');

	resizeCanvas();
	window.addEventListener('resize', resizeCanvas);

	// Set up controls
	document.getElementById('jumpBtn').addEventListener('touchstart', jump);
	document.getElementById('jumpBtn').addEventListener('mousedown', jump);

	// Keyboard controls for testing
	document.addEventListener('keydown', (e) => {
	if (e.key === ' ' \|\| e.key === 'ArrowUp') {
	jump();
	}
	});

	// Menu buttons
	document.getElementById('startBtn').addEventListener('click', startGame);
	document.getElementById('howToBtn').addEventListener('click', showHowToPlay);
	document.getElementById('restartBtn').addEventListener('click', restartGame);
	}

	function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	// Adjust player position
	playerWidth = canvas.width * 0.1;
	playerHeight = playerWidth * 1.5;
	playerX = canvas.width * 0.3;
	playerY = canvas.height * 0.6;

	if (gameRunning) {
	draw();
	}
	}

	function startGame() {
	document.getElementById('menu').style.display = 'none';
	resetGame();
	gameRunning = true;
	gameTime = 0;
	lastHoopTime = 0;
	gameLoop();
	}

	function showHowToPlay() {
	alert("HOW TO PLAY:\n\n- Tap the JUMP button to make your player jump\n- Time your jumps to dunk through the hoops\n- Each successful dunk increases your combo\n- Maintain your combo for bonus points\n- The game gets faster as you play!\n\nSet a new high score!");
	}

	function restartGame() {
	document.getElementById('gameOver').style.display = 'none';
	startGame();
	}

	function resetGame() {
	score = 0;
	dunks = 0;
	combo = 0;
	maxCombo = 0;
	comboTime = 0;
	playerY = canvas.height * 0.6;
	velocity = 0;
	isJumping = false;
	hoops = [];
	gameSpeed = 3;
	difficulty = 1;
	updateScore();
	updateDunks();
	updateCombo();
	}

	function gameLoop() {
	if (!gameRunning) return;

	update();
	draw();

	animationId = requestAnimationFrame(gameLoop);
	}

	function update() {
	// Increase game time
	gameTime += 16; // Assuming 60fps (1000ms/60 ≈ 16ms per frame)

	// Increase difficulty over time
	difficulty = 1 + Math.floor(gameTime / 30000) * 0.2;
	gameSpeed = 3 * difficulty;

	// Update player position
	velocity += gravity;
	playerY += velocity;

	// Check if player is on the ground
	if (playerY > canvas.height * 0.6) {
	playerY = canvas.height * 0.6;
	velocity = 0;
	isJumping = false;
	}

	// Update combo timer
	if (combo > 0) {
	comboTime += 16;
	if (comboTime > maxComboTime) {
	combo = 0;
	comboTime = 0;
	updateCombo();
	}
	}

	// Update hoops
	updateHoops();

	// Check for dunk collisions
	checkDunkCollisions();
	}

	function updateHoops() {
	// Move existing hoops
	for (let i = 0; i < hoops.length; i++) {
	hoops[i].x -= gameSpeed;

	// Remove hoops that are off screen
	if (hoops[i].x + hoops[i].width < 0) {
	hoops.splice(i, 1);
	i--;
	}
	}

	// Add new hoops
	const now = Date.now();
	if (now - lastHoopTime > hoopInterval / difficulty) {
	addHoop();
	lastHoopTime = now;
	}
	}

	function addHoop() {
	const heightVariation = Math.random() * 100 - 50; // -50 to 50
	const hoopHeight = canvas.height * 0.15 + heightVariation;

	hoops.push({
	x: canvas.width,
	y: canvas.height * 0.3 + heightVariation,
	width: 80,
	height: hoopHeight,
	passed: false
	});
	}

	function checkDunkCollisions() {
	const player = {
	x: playerX,
	y: playerY,
	width: playerWidth,
	height: playerHeight
	};

	for (let i = 0; i < hoops.length; i++) {
	const hoop = hoops[i];

	// Check if player is aligned with hoop
	if (
	player.x + player.width > hoop.x &&
	player.x < hoop.x + hoop.width &&
	!hoop.passed
	) {
	// Check if player is in dunk position (above rim)
	if (
	player.y + player.height * 0.3 < hoop.y + hoop.height * 0.5 &&
	player.y + player.height > hoop.y + hoop.height * 0.7
	) {
	// Successful dunk!
	dunks++;
	combo++;
	comboTime = 0;
	if (combo > maxCombo) maxCombo = combo;

	// Bonus points for combo
	const points = 10 * combo;
	score += points;

	hoop.passed = true;

	updateScore();
	updateDunks();
	updateCombo();

	// Show dunk effect
	showDunkEffect(hoop.x + hoop.width / 2, hoop.y + hoop.height * 0.7);

	// Show swish effect sometimes
	if (Math.random() > 0.7) {
	showSwishEffect(hoop.x + hoop.width / 2, hoop.y + hoop.height * 0.7);
	}
	}
	}
	}
	}

	function showDunkEffect(x, y) {
	const effect = document.createElement('div');
	effect.className = 'dunk-effect';
	effect.textContent = `+${10 * combo}`;
	effect.style.left = `${x}px`;
	effect.style.top = `${y}px`;
	document.body.appendChild(effect);

	// Remove after animation
	setTimeout(() => {
	effect.remove();
	}, 1000);
	}

	function showSwishEffect(x, y) {
	const effect = document.createElement('div');
	effect.className = 'swish-effect';
	effect.style.left = `${x - 50}px`;
	effect.style.top = `${y - 50}px`;
	document.body.appendChild(effect);

	// Remove after animation
	setTimeout(() => {
	effect.remove();
	}, 1000);
	}

	function jump() {
	if (!isJumping && gameRunning) {
	velocity = jumpForce * difficulty;
	isJumping = true;
	}
	}

	function draw() {
	// Clear canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw court
	drawCourt();

	// Draw hoops
	drawHoops();

	// Draw player
	drawPlayer();
	}

	function drawCourt() {
	// Court floor
	ctx.fillStyle = '#1a2a6c';
	ctx.fillRect(0, canvas.height * 0.65, canvas.width, canvas.height * 0.35);

	// Court lines
	ctx.strokeStyle = '#fff';
	ctx.lineWidth = 4;
	ctx.beginPath();
	ctx.moveTo(0, canvas.height * 0.65);
	ctx.lineTo(canvas.width, canvas.height * 0.65);
	ctx.stroke();

	// Free throw line
	ctx.beginPath();
	ctx.arc(canvas.width * 0.2, canvas.height * 0.65, 100, Math.PI, Math.PI * 2);
	ctx.stroke();

	// Key
	ctx.strokeRect(canvas.width * 0.2 - 100, canvas.height * 0.65 - 100, 200, 100);

	// Backboard (always at same position)
	ctx.fillStyle = '#fff';
	ctx.fillRect(canvas.width * 0.1 - 5, canvas.height * 0.3, 10, 80);

	// Rim
	ctx.strokeStyle = '#FFD700';
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(canvas.width * 0.1, canvas.height * 0.3 + 80, 20, 0, Math.PI * 2);
	ctx.stroke();

	// Net
	ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	ctx.lineWidth = 1;
	for (let i = 0; i < 8; i++) {
	ctx.beginPath();
	ctx.moveTo(canvas.width * 0.1, canvas.height * 0.3 + 80);
	ctx.lineTo(
	canvas.width * 0.1 + Math.cos(i * Math.PI / 4) * 20,
	canvas.height * 0.3 + 80 + Math.sin(i * Math.PI / 4) * 30
	);
	ctx.stroke();
	}
	}

	function drawHoops() {
	for (let hoop of hoops) {
	// Backboard
	ctx.fillStyle = '#fff';
	ctx.fillRect(hoop.x - 5, hoop.y, 10, hoop.height);

	// Rim
	ctx.strokeStyle = '#FFD700';
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(hoop.x, hoop.y + hoop.height * 0.7, 20, 0, Math.PI * 2);
	ctx.stroke();

	// Net
	ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
	ctx.lineWidth = 1;
	for (let i = 0; i < 8; i++) {
	ctx.beginPath();
	ctx.moveTo(hoop.x, hoop.y + hoop.height * 0.7);
	ctx.lineTo(
	hoop.x + Math.cos(i * Math.PI / 4) * 20,
	hoop.y + hoop.height * 0.7 + Math.sin(i * Math.PI / 4) * 30
	);
	ctx.stroke();
	}
	}
	}

	function drawPlayer() {
	// Body
	ctx.fillStyle = '#FF6347';
	ctx.fillRect(playerX, playerY, playerWidth, playerHeight);

	// Head
	ctx.fillStyle = '#FFD699';
	ctx.beginPath();
	ctx.arc(
	playerX + playerWidth * 0.5,
	playerY + playerHeight * 0.2,
	playerWidth * 0.3,
	0,
	Math.PI * 2
	);
	ctx.fill();

	// Jersey
	ctx.fillStyle = '#fff';
	ctx.fillRect(
	playerX + playerWidth * 0.1,
	playerY + playerHeight * 0.3,
	playerWidth * 0.8,
	playerHeight * 0.4
	);

	// Jersey number
	ctx.fillStyle = '#1a2a6c';
	ctx.font = `bold ${playerWidth * 0.4}px Arial`;
	ctx.textAlign = 'center';
	ctx.fillText(
	'23',
	playerX + playerWidth * 0.5,
	playerY + playerHeight * 0.55
	);

	// Shorts
	ctx.fillStyle = '#1a2a6c';
	ctx.fillRect(
	playerX + playerWidth * 0.1,
	playerY + playerHeight * 0.7,
	playerWidth * 0.8,
	playerHeight * 0.2
	);

	// Legs
	ctx.fillStyle = '#FFD699';
	ctx.fillRect(
	playerX + playerWidth * 0.2,
	playerY + playerHeight * 0.9,
	playerWidth * 0.25,
	playerHeight * 0.1
	);
	ctx.fillRect(
	playerX + playerWidth * 0.55,
	playerY + playerHeight * 0.9,
	playerWidth * 0.25,
	playerHeight * 0.1
	);

	// Arms (position changes when jumping)
	ctx.fillStyle = '#FFD699';
	if (isJumping) {
	// Dunking pose
	ctx.fillRect(
	playerX - playerWidth * 0.2,
	playerY + playerHeight * 0.3,
	playerWidth * 0.2,
	playerHeight * 0.4
	);
	ctx.fillRect(
	playerX + playerWidth,
	playerY + playerHeight * 0.3,
	playerWidth * 0.2,
	playerHeight * 0.4
	);

	// Basketball in hands
	ctx.fillStyle = '#FFA500';
	ctx.beginPath();
	ctx.arc(
	playerX + playerWidth * 0.5,
	playerY + playerHeight * 0.4,
	playerWidth * 0.2,
	0,
	Math.PI * 2
	);
	ctx.fill();

	// Basketball lines
	ctx.strokeStyle = '#8B4513';
	ctx.lineWidth = 2;
	ctx.beginPath();
	ctx.arc(
	playerX + playerWidth * 0.5,
	playerY + playerHeight * 0.4,
	playerWidth * 0.2,
	0,
	Math.PI
	);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(
	playerX + playerWidth * 0.5,
	playerY + playerHeight * 0.4,
	playerWidth * 0.2,
	Math.PI * 0.3,
	Math.PI * 1.3
	);
	ctx.stroke();
	} else {
	// Standing pose
	ctx.fillRect(
	playerX - playerWidth * 0.1,
	playerY + playerHeight * 0.3,
	playerWidth * 0.1,
	playerHeight * 0.4
	);
	ctx.fillRect(
	playerX + playerWidth,
	playerY + playerHeight * 0.3,
	playerWidth * 0.1,
	playerHeight * 0.4
	);
	}
	}

	function updateScore() {
	document.getElementById('scoreValue').textContent = score;
	}

	function updateDunks() {
	document.getElementById('dunkValue').textContent = dunks;
	}

	function updateCombo() {
	document.getElementById('comboText').textContent = `Combo: ${combo}x`;
	document.getElementById('comboFill').style.width = `${(comboTime / maxComboTime) * 100}%`;

	// Change color based on combo level
	if (combo >= 5) {
	document.getElementById('comboFill').style.background = 'linear-gradient(to right, #ff5e62, #ff9966)';
	} else if (combo >= 3) {
	document.getElementById('comboFill').style.background = 'linear-gradient(to right, #4facfe, #00f2fe)';
	} else {
	document.getElementById('comboFill').style.background = 'linear-gradient(to right, #4facfe, #00f2fe)';
	}
	}

	function gameOver() {
	gameRunning = false;
	cancelAnimationFrame(animationId);

	document.getElementById('finalScore').textContent = `Score: ${score} \| Dunks: ${dunks} \| Max Combo: ${maxCombo}x`;
	document.getElementById('gameOver').style.display = 'flex';
	}

	// Start the game when page loads
	window.onload = init;
	</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=Eligrgs/gold" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>