|
|
<!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> |
|
|
|
|
|
#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', () => { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
const leftBtn = document.getElementById('left-btn'); |
|
|
const rightBtn = document.getElementById('right-btn'); |
|
|
const jumpBtn = document.getElementById('jump-btn'); |
|
|
|
|
|
|
|
|
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 = []; |
|
|
|
|
|
|
|
|
initGame(); |
|
|
|
|
|
function initGame() { |
|
|
|
|
|
score = 0; |
|
|
isJumping = false; |
|
|
isGameOver = false; |
|
|
playerX = 100; |
|
|
playerY = 400; |
|
|
velocityY = 0; |
|
|
scoreDisplay.textContent = score; |
|
|
gameOverScreen.style.display = 'none'; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.platform').forEach(el => el.remove()); |
|
|
document.querySelectorAll('.coin').forEach(el => el.remove()); |
|
|
document.querySelectorAll('.cloud').forEach(el => el.remove()); |
|
|
|
|
|
platforms = []; |
|
|
coins = []; |
|
|
clouds = []; |
|
|
|
|
|
|
|
|
createPlatform(0, 450, 800, 50); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
createCoin(150, 320); |
|
|
createCoin(350, 270); |
|
|
createCoin(550, 220); |
|
|
createCoin(250, 170); |
|
|
createCoin(450, 120); |
|
|
createCoin(650, 70); |
|
|
|
|
|
|
|
|
createCloud(100, 50, 60, 30); |
|
|
createCloud(300, 30, 80, 40); |
|
|
createCloud(500, 60, 70, 35); |
|
|
createCloud(700, 40, 90, 45); |
|
|
|
|
|
|
|
|
updatePlayerPosition(); |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
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 && |
|
|
velocityY >= 0 |
|
|
) { |
|
|
onPlatform = true; |
|
|
playerY = platform.y - 50; |
|
|
velocityY = 0; |
|
|
isJumping = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (!onPlatform) { |
|
|
velocityY += gravity; |
|
|
isJumping = true; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (playerY > gameContainer.clientHeight) { |
|
|
gameOver(); |
|
|
} |
|
|
} |
|
|
|
|
|
function gameLoop() { |
|
|
if (isGameOver) return; |
|
|
|
|
|
|
|
|
playerY += velocityY; |
|
|
|
|
|
|
|
|
updatePlayerPosition(); |
|
|
|
|
|
|
|
|
checkCollision(); |
|
|
|
|
|
|
|
|
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'; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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(); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
