Spaces:

Dhdb
/

ball-demo

Running

App Files Files Community

ball-demo / index.html

Dhdb

Add 2 files

28917a7 verified about 1 year ago

raw

history blame contribute delete

14.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mario-like Platform Game</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	/* Custom styles for the game */
	#game-container {
	position: relative;
	width: 800px;
	height: 500px;
	background: linear-gradient(to bottom, #87CEEB 50%, #228B22 50%);
	overflow: hidden;
	border: 4px solid #333;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	}

	#player {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #FF0000;
	border-radius: 50%;
	border: 2px solid #000;
	z-index: 10;
	transition: transform 0.1s;
	}

	.platform {
	position: absolute;
	background-color: #8B4513;
	border: 2px solid #5D2906;
	border-radius: 5px;
	z-index: 5;
	}

	.coin {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #FFD700;
	border-radius: 50%;
	border: 2px solid #DAA520;
	z-index: 8;
	animation: spin 2s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
	}

	.cloud {
	position: absolute;
	background-color: white;
	border-radius: 50%;
	opacity: 0.8;
	}

	#score-display {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 5px 10px;
	border-radius: 5px;
	font-weight: bold;
	z-index: 20;
	}

	#game-over {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
	z-index: 30;
	display: none;
	}
	</style>
	</head>
	<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
	<h1 class="text-4xl font-bold mb-4 text-red-600">Super Adventure Game</h1>

	<div id="game-container" class="relative">
	<div id="score-display">Score: <span id="score">0</span></div>

	<div id="player"></div>

	<div id="game-over">
	<h2 class="text-3xl font-bold mb-4">Game Over!</h2>
	<p class="mb-6">Final Score: <span id="final-score">0</span></p>
	<button id="restart-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
	Play Again
	</button>
	</div>
	</div>

	<div class="mt-6 flex space-x-4">
	<button id="left-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
	← Left
	</button>
	<button id="right-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
	Right →
	</button>
	<button id="jump-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
	Jump ↑
	</button>
	</div>

	<p class="mt-4 text-gray-600">Use buttons or arrow keys to move and jump</p>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Game elements
	const gameContainer = document.getElementById('game-container');
	const player = document.getElementById('player');
	const scoreDisplay = document.getElementById('score');
	const finalScoreDisplay = document.getElementById('final-score');
	const gameOverScreen = document.getElementById('game-over');
	const restartBtn = document.getElementById('restart-btn');

	// Control buttons
	const leftBtn = document.getElementById('left-btn');
	const rightBtn = document.getElementById('right-btn');
	const jumpBtn = document.getElementById('jump-btn');

	// Game state
	let score = 0;
	let isJumping = false;
	let isGameOver = false;
	let playerX = 100;
	let playerY = 400;
	let velocityY = 0;
	let gravity = 0.5;
	let moveSpeed = 5;
	let jumpForce = -12;
	let platforms = [];
	let coins = [];
	let clouds = [];

	// Initialize game
	initGame();

	function initGame() {
	// Reset game state
	score = 0;
	isJumping = false;
	isGameOver = false;
	playerX = 100;
	playerY = 400;
	velocityY = 0;
	scoreDisplay.textContent = score;
	gameOverScreen.style.display = 'none';

	// Clear existing elements
	document.querySelectorAll('.platform').forEach(el => el.remove());
	document.querySelectorAll('.coin').forEach(el => el.remove());
	document.querySelectorAll('.cloud').forEach(el => el.remove());

	platforms = [];
	coins = [];
	clouds = [];

	// Create ground platform
	createPlatform(0, 450, 800, 50);

	// Create some platforms
	createPlatform(100, 350, 150, 20);
	createPlatform(300, 300, 150, 20);
	createPlatform(500, 250, 150, 20);
	createPlatform(200, 200, 150, 20);
	createPlatform(400, 150, 150, 20);
	createPlatform(600, 100, 150, 20);

	// Create some coins
	createCoin(150, 320);
	createCoin(350, 270);
	createCoin(550, 220);
	createCoin(250, 170);
	createCoin(450, 120);
	createCoin(650, 70);

	// Create some clouds
	createCloud(100, 50, 60, 30);
	createCloud(300, 30, 80, 40);
	createCloud(500, 60, 70, 35);
	createCloud(700, 40, 90, 45);

	// Position player
	updatePlayerPosition();

	// Start game loop
	requestAnimationFrame(gameLoop);
	}

	function createPlatform(x, y, width, height) {
	const platform = document.createElement('div');
	platform.className = 'platform';
	platform.style.left = `${x}px`;
	platform.style.top = `${y}px`;
	platform.style.width = `${width}px`;
	platform.style.height = `${height}px`;
	gameContainer.appendChild(platform);

	platforms.push({
	x, y, width, height, element: platform
	});
	}

	function createCoin(x, y) {
	const coin = document.createElement('div');
	coin.className = 'coin';
	coin.style.left = `${x}px`;
	coin.style.top = `${y}px`;
	gameContainer.appendChild(coin);

	coins.push({
	x, y, collected: false, element: coin
	});
	}

	function createCloud(x, y, width, height) {
	const cloud = document.createElement('div');
	cloud.className = 'cloud';
	cloud.style.left = `${x}px`;
	cloud.style.top = `${y}px`;
	cloud.style.width = `${width}px`;
	cloud.style.height = `${height}px`;
	gameContainer.appendChild(cloud);

	clouds.push({
	x, y, width, height, element: cloud
	});
	}

	function updatePlayerPosition() {
	player.style.left = `${playerX}px`;
	player.style.top = `${playerY}px`;
	}

	function checkCollision() {
	// Check if player is on a platform
	let onPlatform = false;

	for (const platform of platforms) {
	if (
	playerX + 50 > platform.x &&
	playerX < platform.x + platform.width &&
	playerY + 50 >= platform.y &&
	playerY + 50 <= platform.y + 20 && // Only check top part of platform
	velocityY >= 0
	) {
	onPlatform = true;
	playerY = platform.y - 50;
	velocityY = 0;
	isJumping = false;
	}
	}

	// Apply gravity if not on platform
	if (!onPlatform) {
	velocityY += gravity;
	isJumping = true;
	}

	// Check coin collection
	for (const coin of coins) {
	if (!coin.collected &&
	playerX + 50 > coin.x &&
	playerX < coin.x + 20 &&
	playerY + 50 > coin.y &&
	playerY < coin.y + 20) {
	coin.collected = true;
	coin.element.style.display = 'none';
	score += 10;
	scoreDisplay.textContent = score;
	}
	}

	// Check if player fell off the screen
	if (playerY > gameContainer.clientHeight) {
	gameOver();
	}
	}

	function gameLoop() {
	if (isGameOver) return;

	// Apply velocity
	playerY += velocityY;

	// Update player position
	updatePlayerPosition();

	// Check collisions
	checkCollision();

	// Move clouds for parallax effect
	for (const cloud of clouds) {
	cloud.x -= 0.2;
	if (cloud.x + cloud.width < 0) {
	cloud.x = gameContainer.clientWidth;
	}
	cloud.element.style.left = `${cloud.x}px`;
	}

	requestAnimationFrame(gameLoop);
	}

	function gameOver() {
	isGameOver = true;
	finalScoreDisplay.textContent = score;
	gameOverScreen.style.display = 'flex';
	}

	// Event listeners for buttons
	leftBtn.addEventListener('mousedown', () => {
	if (!isGameOver) playerX -= moveSpeed;
	if (playerX < 0) playerX = 0;
	updatePlayerPosition();
	});

	rightBtn.addEventListener('mousedown', () => {
	if (!isGameOver) playerX += moveSpeed;
	if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
	updatePlayerPosition();
	});

	jumpBtn.addEventListener('click', () => {
	if (!isJumping && !isGameOver) {
	velocityY = jumpForce;
	isJumping = true;
	}
	});

	// Keyboard controls
	document.addEventListener('keydown', (e) => {
	if (isGameOver) return;

	switch (e.key) {
	case 'ArrowLeft':
	playerX -= moveSpeed;
	if (playerX < 0) playerX = 0;
	break;
	case 'ArrowRight':
	playerX += moveSpeed;
	if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
	break;
	case 'ArrowUp':
	case ' ':
	if (!isJumping) {
	velocityY = jumpForce;
	isJumping = true;
	}
	break;
	}

	updatePlayerPosition();
	});

	// Restart game
	restartBtn.addEventListener('click', initGame);
	});
	</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=Dhdb/ball-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>