Hugging Face's logo

Spaces:
Assad3l
/
alda
Running

App Files Community
alda / index.html
Assad3l's picture
Assad3l
Add 2 files
f4912e5 verified
raw
history blame contribute delete
49.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Super Mario Lite</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 font-family: 'Press Start 2P', cursive;
 background-color: #6be0fd;
 touch-action: manipulation;
 }
#game-container {
 position: relative;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 }
#game-canvas {
 position: absolute;
 top: 0;
 left: 0;
 }
#start-screen, #game-over-screen, #win-screen {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background-color: rgba(0, 0, 0, 0.7);
 z-index: 10;
 }
#game-over-screen, #win-screen {
 display: none;
 }
.btn {
 background-color: #e52521;
 color: white;
 border: none;
 padding: 15px 30px;
 font-size: 16px;
 font-family: 'Press Start 2P', cursive;
 cursor: pointer;
 border-radius: 10px;
 box-shadow: 0 5px 0 #81261f;
 transition: all 0.1s;
 margin-top: 20px;
 letter-spacing: 1px;
 }
.btn:active {
 transform: translateY(5px);
 box-shadow: 0 0 0 #81261f;
 }
.title {
 color: white;
 font-size: 36px;
 text-align: center;
 text-shadow: 4px 4px 0 #e52521;
 margin-bottom: 30px;
 }
.score-display {
 position: absolute;
 top: 20px;
 left: 20px;
 color: white;
 font-size: 18px;
 text-shadow: 2px 2px 0 #000;
 z-index: 5;
 }
.time-display {
 position: absolute;
 top: 20px;
 right: 20px;
 color: white;
 font-size: 18px;
 text-shadow: 2px 2px 0 #000;
 z-index: 5;
 }
.ground {
 position: absolute;
 bottom: 0;
 width: 300%;
 height: 60px;
 background-color: #56b949;
 z-index: 2;
 background-image:
linear-gradient(transparent 95%, #3a7d33 95%),
 linear-gradient(90deg, transparent 50%, #3a7d33 50%);
 background-size: 20px 20px;
 }
.brick {
 position: absolute;
 width: 40px;
 height: 40px;
 background-color: #b85a20;
 border-radius: 3px;
 border: 3px solid #8c3f10;
 box-shadow: inset -3px -3px 0 rgba(0,0,0,0.2);
 z-index: 2;
 }
.coin {
 position: absolute;
 width: 20px;
 height: 20px;
 background-color: #f9d423;
 border-radius: 50%;
 border: 2px solid #e2b007;
 box-shadow: 0 0 5px gold;
 z-index: 2;
 animation: coinSpin 1.5s infinite linear;
 }
@keyframes coinSpin {
 0% { transform: rotateY(0); }
 100% { transform: rotateY(360deg); }
 }
.mario {
 position: absolute;
 width: 40px;
 height: 60px;
 background-color: #e52521;
 border-radius: 10px 10px 0 0;
 z-index: 3;
 transition: transform 0.1s;
 }
.mario::before {
 content: "";
 position: absolute;
 top: -10px;
 left: 5px;
 width: 30px;
 height: 15px;
 background-color: #e52521;
 border-radius: 50% 50% 0 0;
 }
.mario::after {
 content: "";
 position: absolute;
 top: -5px;
 left: 10px;
 width: 20px;
 height: 10px;
 background-color: #f3b9b8;
 border-radius: 10px 10px 0 0;
 }
.mario .cap {
 position: absolute;
 top: -15px;
 left: 5px;
 width: 30px;
 height: 10px;
 background-color: #1144ee;
 border-radius: 5px 0 0 5px;
 }
.mario .cap::before {
 content: "";
 position: absolute;
 top: -5px;
 left: 0;
 width: 30px;
 height: 5px;
 background-color: #1144ee;
 border-radius: 5px 5px 0 0;
 }
.mario .eyes {
 position: absolute;
 top: 0;
 left: 10px;
 width: 20px;
 height: 5px;
 }
.mario .eyes::before,
 .mario .eyes::after {
 content: "";
 position: absolute;
 width: 5px;
 height: 5px;
 background-color: #000;
 border-radius: 50%;
 }
.mario .eyes::before {
 left: 0;
 }
.mario .eyes::after {
 right: 0;
 }
.mario .mustache {
 position: absolute;
 top: 5px;
 left: 5px;
 width: 30px;
 height: 5px;
 background-color: #4d2a1e;
 border-radius: 5px;
 }
.mario .mustache::before,
 .mario .mustache::after {
 content: "";
 position: absolute;
 width: 5px;
 height: 3px;
 background-color: #4d2a1e;
 border-radius: 50%;
 }
.mario .mustache::before {
 left: 0;
 top: 2px;
 }
.mario .mustache::after {
 right: 0;
 top: 2px;
 }
.mario .torso {
 position: absolute;
 top: 20px;
 left: 5px;
 width: 30px;
 height: 25px;
 background-color: #e52521;
 }
.mario .overalls {
 position: absolute;
 top: 25px;
 left: 0;
 width: 40px;
 height: 25px;
 background-color: #1144ee;
 border-radius: 0 0 5px 5px;
 }
.mario .overalls::before {
 content: "";
 position: absolute;
 top: 0;
 left: 15px;
 width: 10px;
 height: 10px;
 background-color: #f3b9b8;
 border-radius: 2px;
 }
.mario .buttons {
 position: absolute;
 top: 30px;
 left: 15px;
 width: 10px;
 height: 10px;
 }
.mario .buttons::before,
 .mario .buttons::after {
 content: "";
 position: absolute;
 width: 10px;
 height: 2px;
 background-color: gold;
 border-radius: 2px;
 }
.mario .buttons::before {
 top: 0;
 }
.mario .buttons::after {
 top: 5px;
 }
.mario .arms {
 position: absolute;
 top: 25px;
 left: 0;
 width: 40px;
 height: 10px;
 }
.mario .arms::before,
 .mario .arms::after {
 content: "";
 position: absolute;
 width: 5px;
 height: 15px;
 background-color: #e52521;
 border-radius: 2px;
 }
.mario .arms::before {
 left: 0;
 }
.mario .arms::after {
 right: 0;
 }
.mario .legs {
 position: absolute;
 bottom: 0;
 left: 5px;
 width: 30px;
 height: 15px;
 }
.mario .legs::before,
 .mario .legs::after {
 content: "";
 position: absolute;
 width: 10px;
 height: 15px;
 background-color: #1144ee;
 border-radius: 0 0 2px 2px;
 }
.mario .legs::before {
 left: 0;
 }
.mario .legs::after {
 right: 0;
 }
.enemy {
 position: absolute;
 width: 40px;
 height: 40px;
 background-color: #6abe30;
 border-radius: 50%;
 z-index: 2;
 }
.enemy::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 20px;
 background-color: #6abe30;
 border-radius: 20px 20px 0 0;
 }
.enemy::after {
 content: "";
 position: absolute;
 top: -3px;
 left: 5px;
 width: 30px;
 height: 15px;
 background-color: #8dce68;
 border-radius: 15px 15px 0 0;
 }
.enemy .eyes {
 position: absolute;
 top: 5px;
 left: 10px;
 width: 20px;
 height: 5px;
 }
.enemy .eyes::before,
 .enemy .eyes::after {
 content: "";
 position: absolute;
 width: 5px;
 height: 5px;
 background-color: #000;
 border-radius: 50%;
 }
.enemy .eyes::before {
 left: 0;
 }
.enemy .eyes::after {
 right: 0;
 }
.castle {
 position: absolute;
 width: 80px;
 height: 120px;
 background-color: #853a11;
 z-index: 2;
 border-radius: 10px 10px 0 0;
 }
.castle::before {
 content: "";
 position: absolute;
 top: -20px;
 left: 10px;
 width: 60px;
 height: 20px;
 background-color: #853a11;
 clip-path: polygon(0% 100%, 10% 0%, 20% 100%, 30% 0%, 40% 100%, 50% 0%, 60% 100%, 70% 0%, 80% 100%, 90% 0%, 100% 100%);
 }
.castle .door {
 position: absolute;
 bottom: 0;
 left: 20px;
 width: 40px;
 height: 60px;
 background-color: #5a2a0c;
 border-radius: 5px 5px 0 0;
 }
.castle .flag-pole {
 position: absolute;
 top: -40px;
 left: 5px;
 width: 3px;
 height: 80px;
 background-color: #fff;
 }
.castle .flag {
 position: absolute;
 top: -40px;
 left: 8px;
 width: 30px;
 height: 20px;
 background-color: #e52521;
 clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
 }
.pipe {
 position: absolute;
 width: 60px;
 height: 80px;
 background-color: #379937;
 z-index: 2;
 border-radius: 5px 5px 0 0;
 border: 4px solid #266926;
 }
.cloud {
 position: absolute;
 background-color: white;
 border-radius: 50%;
 opacity: 0.9;
 z-index: 0;
 }
@keyframes jump {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-20px); }
 }
.jumping {
 animation: jump 0.5s ease;
 }
.crouching {
 transform: scaleY(0.9) translateY(10px);
 }
.sliding {
 transform: translateX(-10px);
 }
.small {
 transform: scale(0.7);
 height: 40px !important;
 }
 </style>
</head>
<body>
 <div id="game-container">
 <div class="score-display" id="score">SCORE: 0</div>
 <div class="time-display" id="time">TIME: 300</div>
<div id="start-screen">
 <h1 class="title">SUPER MARIO LITE</h1>
 <button class="btn" id="start-btn">START GAME</button>
 <div class="mt-8 text-white text-center text-sm">
 <p>Arrow Keys to Move</p>
 <p>Space to Jump</p>
 <p>Collect Coins, Avoid Enemies</p>
 </div>
 </div>
<div id="game-over-screen">
 <h1 class="title">GAME OVER</h1>
 <div class="text-white text-center mb-6">
 <p>SCORE: <span id="final-score">0</span></p>
 <p>HIGH SCORE: <span id="high-score">0</span></p>
 </div>
 <button class="btn" id="restart-btn">PLAY AGAIN</button>
 </div>
<div id="win-screen">
 <h1 class="title">YOU WIN!</h1>
 <div class="text-white text-center mb-6">
 <p>SCORE: <span id="win-score">0</span></p>
 <p>HIGH SCORE: <span id="win-high-score">0</span></p>
 </div>
 <button class="btn" id="win-restart-btn">PLAY AGAIN</button>
 </div>
<div class="ground"></div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', () => {
 const gameContainer = document.getElementById('game-container');
 const startScreen = document.getElementById('start-screen');
 const gameOverScreen = document.getElementById('game-over-screen');
 const winScreen = document.getElementById('win-screen');
 const startBtn = document.getElementById('start-btn');
 const restartBtn = document.getElementById('restart-btn');
 const winRestartBtn = document.getElementById('win-restart-btn');
 const scoreDisplay = document.getElementById('score');
 const timeDisplay = document.getElementById('time');
 const finalScoreDisplay = document.getElementById('final-score');
 const highScoreDisplay = document.getElementById('high-score');
 const winScoreDisplay = document.getElementById('win-score');
 const winHighScoreDisplay = document.getElementById('win-high-score');
let gameRunning = false;
 let score = 0;
 let highScore = localStorage.getItem('marioHighScore') || 0;
 let time = 300;
 let mario;
 let ground;
 let enemies = [];
 let coins = [];
 let bricks = [];
 let pipes = [];
 let clouds = [];
 let castle = null;
 let gravity = 0.5;
 let jumpForce = -12;
 let marioVelocityY = 0;
 let marioPositionX = 100;
 let marioPositionY = 300;
 let marioDirection = 'right';
 let isJumping = false;
 let isCrouching = false;
 let isSliding = false;
 let isInvincible = false;
 let gameSpeed = 3;
 let cameraOffset = 0;
 let lastTime = 0;
 let gameLoopId;
 let timeInterval;
 let isAlive = true;
 let levelComplete = false;
highScoreDisplay.textContent = highScore;
 winHighScoreDisplay.textContent = highScore;
// Create Mario
 function createMario() {
 mario = document.createElement('div');
 mario.className = 'mario';
 mario.innerHTML = `
 <div class="cap"></div>
 <div class="eyes"></div>
 <div class="mustache"></div>
 <div class="torso"></div>
 <div class="overalls"></div>
 <div class="buttons"></div>
 <div class="arms"></div>
 <div class="legs"></div>
 `;
 mario.style.left = marioPositionX + 'px';
 mario.style.bottom = marioPositionY + 'px';
 gameContainer.appendChild(mario);
 }
// Create ground
 function createGround() {
 ground = document.querySelector('.ground');
 }
// Create enemies
 function createEnemy(x, y) {
 const enemy = document.createElement('div');
 enemy.className = 'enemy';
 enemy.innerHTML = `<div class="eyes"></div>`;
 enemy.style.left = x + 'px';
 enemy.style.bottom = y + 'px';
 gameContainer.appendChild(enemy);
enemies.push({
 element: enemy,
 x: x,
 y: y,
 direction: -1,
 speed: Math.random() * 1 + 1
 });
 }
// Create coins
 function createCoin(x, y) {
 const coin = document.createElement('div');
 coin.className = 'coin';
 coin.style.left = x + 'px';
 coin.style.bottom = y + 'px';
 gameContainer.appendChild(coin);
coins.push({
 element: coin,
 x: x,
 y: y,
 collected: false
 });
 }
// Create bricks
 function createBrick(x, y, hasCoin = false) {
 const brick = document.createElement('div');
 brick.className = 'brick';
 brick.style.left = x + 'px';
 brick.style.bottom = y + 'px';
 gameContainer.appendChild(brick);
bricks.push({
 element: brick,
 x: x,
 y: y,
 hasCoin: hasCoin,
 hit: false
 });
if (hasCoin) {
 createCoin(x + 10, y + 45);
 }
 }
// Create pipes
 function createPipe(x, y, height = 80) {
 const pipe = document.createElement('div');
 pipe.className = 'pipe';
 pipe.style.left = x + 'px';
 pipe.style.bottom = y + 'px';
 pipe.style.height = height + 'px';
 gameContainer.appendChild(pipe);
pipes.push({
 element: pipe,
 x: x,
 y: y,
 height: height
 });
 }
// Create clouds
 function createCloud(x, y, size) {
 const cloud = document.createElement('div');
 cloud.className = 'cloud';
 cloud.style.left = x + 'px';
 cloud.style.bottom = y + 'px';
 cloud.style.width = size + 'px';
 cloud.style.height = size / 2 + 'px';
 gameContainer.appendChild(cloud);
clouds.push({
 element: cloud,
 x: x,
 y: y,
 size: size
 });
 }
// Create castle
 function createCastle(x) {
 castle = document.createElement('div');
 castle.className = 'castle';
 castle.innerHTML = `
 <div class="door"></div>
 <div class="flag-pole"></div>
 <div class="flag"></div>
 `;
 castle.style.left = x + 'px';
 castle.style.bottom = '60px';
 gameContainer.appendChild(castle);
return {
 element: castle,
 x: x
 };
 }
// Setup level
 function setupLevel() {
 // Clear existing elements
 const existingEnemies = document.querySelectorAll('.enemy');
 const existingCoins = document.querySelectorAll('.coin');
 const existingBricks = document.querySelectorAll('.brick');
 const existingPipes = document.querySelectorAll('.pipe');
 const existingClouds = document.querySelectorAll('.cloud');
 const existingCastle = document.querySelector('.castle');
existingEnemies.forEach(enemy => enemy.remove());
 existingCoins.forEach(coin => coin.remove());
 existingBricks.forEach(brick => brick.remove());
 existingPipes.forEach(pipe => pipe.remove());
 existingClouds.forEach(cloud => cloud.remove());
 if (existingCastle) existingCastle.remove();
// Reset arrays
 enemies = [];
 coins = [];
 bricks = [];
 pipes = [];
 clouds = [];
 castle = null;
// Create game objects
 // Ground is already created in HTML
// Clouds
 createCloud(200, 400, 80);
 createCloud(500, 350, 100);
 createCloud(800, 450, 60);
// Bricks and coins
 for (let i = 0; i < 5; i++) {
 createBrick(300 + i * 50, 100, i % 2 === 0);
 }
// Some standalone coins
 createCoin(200, 150);
 createCoin(250, 200);
 createCoin(700, 150);
// Pipes
 createPipe(400, 60, 100);
 createPipe(600, 60, 80);
// Enemies
 createEnemy(500, 60);
 createEnemy(800, 60);
// Castle at the end
 castle = createCastle(1200);
 }
// Jump function
 function jump() {
 if (!isJumping && gameRunning && isAlive && !levelComplete) {
 isJumping = true;
 marioVelocityY = jumpForce;
 mario.classList.add('jumping');
// Remove jumping class after animation
 setTimeout(() => {
 mario.classList.remove('jumping');
 }, 500);
 }
 }
// Crouch function
 function crouch() {
 if (!isJumping && gameRunning && isAlive && !levelComplete) {
 isCrouching = true;
 mario.classList.add('crouching');
 }
 }
// Stop crouching
 function stopCrouch() {
 if (isCrouching) {
 isCrouching = false;
 mario.classList.remove('crouching');
 }
 }
// Slide function
 function slide() {
 if (!isSliding && gameRunning && isAlive && !levelComplete) {
 isSliding = true;
 mario.classList.add('sliding');
setTimeout(() => {
 isSliding = false;
 mario.classList.remove('sliding');
 }, 200);
 }
 }
// Check collisions
 function checkCollisions() {
 // Mario's hitbox
 const marioLeft = marioPositionX + 5;
 const marioRight = marioPositionX + 35;
 const marioTop = marioPositionY + 50;
 const marioBottom = marioPositionY + 10;
// Ground collision
 if (marioPositionY <= 60) {
 marioPositionY = 60;
 marioVelocityY = 0;
 isJumping = false;
 }
// Brick collisions
 for (const brick of bricks) {
 const brickLeft = brick.x;
 const brickRight = brick.x + 40;
 const brickTop = brick.y + 40;
 const brickBottom = brick.y;
// Check if Mario is hitting the brick from below
 if (marioRight > brickLeft &&
marioLeft < brickRight &&
marioBottom < brickTop &&
marioTop > brickBottom &&
 marioVelocityY > 0) {
marioPositionY = brickBottom - 60;
 marioVelocityY = 0;
 isJumping = false;
if (!brick.hit && brick.hasCoin) {
 // Hit a brick with coin
 score += 100;
 scoreDisplay.textContent = `SCORE: ${score}`;
 brick.hit = true;
 brick.element.classList.add('hit');
// Make coin jump out
 for (const coin of coins) {
 if (coin.x === brick.x + 10 && coin.y === brick.y + 45 && !coin.collected) {
 coin.collected = true;
 coin.element.style.display = 'none';
// Show collected effect
 const effect = document.createElement('div');
 effect.className = 'coin';
 effect.style.left = (brick.x + 10) + 'px';
 effect.style.bottom = (brick.y + 45) + 'px';
 gameContainer.appendChild(effect);
// Animate coin
 let effectY = brick.y + 45;
 let effectVelocity = -10;
const animateCoin = () => {
 effectY += effectVelocity;
 effectVelocity += 0.5;
 effect.style.bottom = effectY + 'px';
if (effectY < brick.y + 45 - 100 || effectY > brick.y + 45) {
 effect.remove();
 } else {
 requestAnimationFrame(animateCoin);
 }
 };
animateCoin();
 }
 }
 }
 }
 }
// Pipe collisions (stop walking through pipes)
 for (const pipe of pipes) {
 const pipeLeft = pipe.x;
 const pipeRight = pipe.x + 60;
 const pipeHeight = pipe.height;
if (marioRight > pipeLeft &&
marioLeft < pipeRight &&
marioPositionY < pipeHeight) {
// Stop Mario from moving left/right through pipe
 if (marioDirection === 'right') {
 marioPositionX = pipeLeft - 40;
 } else {
 marioPositionX = pipeRight + 5;
 }
 }
 }
// Enemy collisions
 if (!isInvincible) {
 for (const enemy of enemies) {
 const enemyLeft = enemy.x;
 const enemyRight = enemy.x + 40;
 const enemyTop = enemy.y + 40;
 const enemyBottom = enemy.y;
// Check if Mario is landing on enemy
 if (marioRight > enemyLeft &&
marioLeft < enemyRight &&
marioBottom < enemyTop &&
marioTop > enemyBottom) {
// If Mario is falling onto enemy from above
 if (marioVelocityY > 0 && marioBottom < enemyTop + 20) {
 enemy.element.remove();
 enemies = enemies.filter(e => e !== enemy);
 score += 200;
 scoreDisplay.textContent = `SCORE: ${score}`;
// Bounce after stomping
 marioVelocityY = jumpForce / 2;
 isJumping = true;
 } else {
 // Mario gets hit by enemy
 getHurt();
 }
 }
 }
 }
// Coin collection
 for (const coin of coins) {
 if (!coin.collected) {
 const coinLeft = coin.x;
 const coinRight = coin.x + 20;
 const coinTop = coin.y + 20;
 const coinBottom = coin.y;
if (marioRight > coinLeft &&
marioLeft < coinRight &&
marioBottom < coinTop &&
marioTop > coinBottom) {
coin.collected = true;
 coin.element.remove();
 score += 100;
 scoreDisplay.textContent = `SCORE: ${score}`;
 }
 }
 }
// Castle collision (level complete)
 if (castle) {
 const castleLeft = castle.x;
 const castleRight = castle.x + 80;
if (marioRight > castleLeft && marioLeft < castleRight) {
 completeLevel();
 }
 }
 }
// Get hurt function
 function getHurt() {
 if (!isInvincible) {
 isInvincible = true;
 isAlive = false;
// Make Mario jump back
 marioVelocityY = -10;
// Show hurt animation
 mario.classList.add('small');
setTimeout(() => {
 gameOver();
 }, 1000);
 }
 }
// Complete level function
 function completeLevel() {
 levelComplete = true;
 gameRunning = false;
// Stop timers
 clearInterval(timeInterval);
 cancelAnimationFrame(gameLoopId);
// Calculate final score (bonus for time remaining)
 const timeBonus = Math.floor(time / 10) * 50;
 score += timeBonus;
// Update high score
 if (score > highScore) {
 highScore = score;
 localStorage.setItem('marioHighScore', highScore);
 }
winScoreDisplay.textContent = score;
 winHighScoreDisplay.textContent = highScore;
// Show win screen
 winScreen.style.display = 'flex';
// Fireworks celebration
 createFireworks();
 }
// Create fireworks effect
 function createFireworks() {
 const colors = ['#ff0000', '#ff9900', '#ffff00', '#33cc33', '#3399ff', '#cc66ff'];
for (let i = 0; i < 10; i++) {
 setTimeout(() => {
 const x = Math.random() * window.innerWidth;
 const y = Math.random() * window.innerHeight / 2;
 const color = colors[Math.floor(Math.random() * colors.length)];
const firework = document.createElement('div');
 firework.style.position = 'absolute';
 firework.style.left = x + 'px';
 firework.style.top = y + 'px';
 firework.style.width = '5px';
 firework.style.height = '5px';
 firework.style.backgroundColor = color;
 firework.style.borderRadius = '50%';
 firework.style.zIndex = '5';
 gameContainer.appendChild(firework);
// Animate firework
 let particles = [];
 for (let j = 0; j < 20; j++) {
 const particle = document.createElement('div');
 particle.style.position = 'absolute';
 particle.style.left = x + 'px';
 particle.style.top = y + 'px';
 particle.style.width = '3px';
 particle.style.height = '3px';
 particle.style.backgroundColor = color;
 particle.style.borderRadius = '50%';
 particle.style.zIndex = '5';
 gameContainer.appendChild(particle);
particles.push({
 element: particle,
 velocityX: (Math.random() - 0.5) * 8,
 velocityY: (Math.random() - 0.5) * 8
 });
 }
// Animate particles
 const animateParticles = () => {
 let allOut = true;
for (const particle of particles) {
 const rect = particle.element.getBoundingClientRect();
// Update position
 const currentLeft = parseFloat(particle.element.style.left);
 const currentTop = parseFloat(particle.element.style.top);
particle.element.style.left = (currentLeft + particle.velocityX) + 'px';
 particle.element.style.top = (currentTop + particle.velocityY) + 'px';
// Add gravity
 particle.velocityY += 0.2;
// Fade out
 const currentOpacity = parseFloat(particle.element.style.opacity || 1);
 particle.element.style.opacity = (currentOpacity - 0.03) + '';
// Check if still visible
 if (currentOpacity > 0 &&
 currentTop < window.innerHeight &&
 currentLeft < window.innerWidth &&
 currentLeft > 0) {
 allOut = false;
 }
 }
if (!allOut) {
 requestAnimationFrame(animateParticles);
 } else {
 // Remove particles
 firework.remove();
 for (const particle of particles) {
 particle.element.remove();
 }
 }
 };
animateParticles();
}, i * 300);
 }
 }
// Game over function
 function gameOver() {
 gameRunning = false;
 isAlive = false;
// Stop timers
 clearInterval(timeInterval);
 cancelAnimationFrame(gameLoopId);
// Update high score
 if (score > highScore) {
 highScore = score;
 localStorage.setItem('marioHighScore', highScore);
 highScoreDisplay.textContent = highScore;
 }
finalScoreDisplay.textContent = score;
// Show game over screen
 gameOverScreen.style.display = 'flex';
 }
// Timer countdown
 function startTimer() {
 time = 300;
 timeDisplay.textContent = `TIME: ${time}`;
timeInterval = setInterval(() => {
 if (gameRunning) {
 time--;
 timeDisplay.textContent = `TIME: ${time}`;
if (time <= 0) {
 gameOver();
 }
 }
 }, 1000);
 }
// Game loop
 function gameLoop(timestamp) {
 if (!gameRunning || !isAlive || levelComplete) return;
// Calculate delta time for smooth movement
 const deltaTime = timestamp - lastTime;
 lastTime = timestamp;
// Move Mario horizontally if arrow keys are pressed
 if (rightPressed && !levelComplete) {
 marioDirection = 'right';
 marioPositionX += gameSpeed;
// Camera follows Mario
 if (marioPositionX > window.innerWidth / 3) {
 cameraOffset = marioPositionX - window.innerWidth / 3;
 }
 } else if (leftPressed && marioPositionX > 0 && !levelComplete) {
 marioDirection = 'left';
 marioPositionX -= gameSpeed;
// Don't let Mario go back beyond camera
 if (marioPositionX < cameraOffset) {
 marioPositionX = cameraOffset;
 }
 }
// Apply gravity
 marioVelocityY += gravity;
 marioPositionY += marioVelocityY;
// Update Mario's position
 mario.style.left = (marioPositionX - cameraOffset) + 'px';
 mario.style.bottom = marioPositionY + 'px';
// Flip Mario based on direction
 if (marioDirection === 'left') {
 mario.style.transform = 'scaleX(-1)';
 } else {
 mario.style.transform = 'scaleX(1)';
 }
// Move enemies
 for (const enemy of enemies) {
 enemy.x += enemy.speed * enemy.direction;
 enemy.element.style.left = (enemy.x - cameraOffset) + 'px';
// Simple AI - turn around at edges or when hitting another enemy
 if (enemy.x - cameraOffset < 0 || enemy.x - cameraOffset > window.innerWidth - 40) {
 enemy.direction *= -1;
 }
// Check if enemy falls off platform
 let hasGround = false;
// Check if there's ground below
 if (enemy.y === 60) {
 hasGround = true;
 } else {
 // Check if standing on brick
 for (const brick of bricks) {
 const brickLeft = brick.x;
 const brickRight = brick.x + 40;
 const brickTop = brick.y + 40;
if (enemy.x + 20 > brickLeft &&
enemy.x + 20 < brickRight &&
enemy.y + 40 >= brickTop &&
enemy.y + 40 <= brickTop + 20) {
 hasGround = true;
 break;
 }
 }
 }
if (!hasGround) {
 enemy.direction *= -1;
 }
 }
// Move clouds
 for (const cloud of clouds) {
 cloud.x -= 0.5;
 cloud.element.style.left = (cloud.x - cameraOffset) + 'px';
// Reset cloud when off screen
 if (cloud.x - cameraOffset < -cloud.size) {
 cloud.x = window.innerWidth + cameraOffset;
 }
 }
// Move ground (parallax effect)
 ground.style.transform = `translateX(-${cameraOffset * 0.7}px)`;
// Check collisions
 checkCollisions();
// Continue loop
 gameLoopId = requestAnimationFrame(gameLoop);
 }
// Event listeners
 let rightPressed = false;
 let leftPressed = false;
 let downPressed = false;
document.addEventListener('keydown', (e) => {
 if (!gameRunning) return;
switch (e.key) {
 case 'ArrowRight':
 rightPressed = true;
 break;
 case 'ArrowLeft':
 leftPressed = true;
 break;
 case 'ArrowDown':
 downPressed = true;
 crouch();
 break;
 case ' ':
 jump();
 break;
 }
 });
document.addEventListener('keyup', (e) => {
 switch (e.key) {
 case 'ArrowRight':
 rightPressed = false;
 break;
 case 'ArrowLeft':
 leftPressed = false;
 break;
 case 'ArrowDown':
 downPressed = false;
 stopCrouch();
 break;
 case ' ':
 // Space key release - nothing needed
 break;
 }
 });
// Touch controls for mobile
 let touchStartX = 0;
document.addEventListener('touchstart', (e) => {
 if (!gameRunning) return;
touchStartX = e.touches[0].clientX;
// If touch is in lower half of screen, treat as jump
 if (e.touches[0].clientY > window.innerHeight / 2) {
 jump();
 }
 });
document.addEventListener('touchmove', (e) => {
 if (!gameRunning) return;
const touchX = e.touches[0].clientX;
 const diff = touchX - touchStartX;
if (Math.abs(diff) > 10) {
 if (diff > 0) {
 // Swipe right
 rightPressed = true;
 leftPressed = false;
 } else {
 // Swipe left
 leftPressed = true;
 rightPressed = false;
 }
 }
 });
document.addEventListener('touchend', () => {
 rightPressed = false;
 leftPressed = false;
 });
// Click/tap to jump on mobile
 document.addEventListener('click', (e) => {
 if (!gameRunning && (e.target === startBtn || e.target === restartBtn || e.target === winRestartBtn)) {
 return;
 }
if (gameRunning && isAlive && !levelComplete && e.clientY > window.innerHeight / 2) {
 jump();
 }
 });
// Start game buttons
 startBtn.addEventListener('click', () => {
 startScreen.style.display = 'none';
 startGame();
 });
restartBtn.addEventListener('click', startGame);
 winRestartBtn.addEventListener('click', startGame);
// Start game function
 function startGame() {
 // Reset game state
 gameRunning = true;
 isAlive = true;
 levelComplete = false;
 score = 0;
 time = 300;
 marioPositionX = 100;
 marioPositionY = 300;
 marioVelocityY = 0;
 cameraOffset = 0;
 rightPressed = false;
 leftPressed = false;
 downPressed = false;
// Update displays
 scoreDisplay.textContent = `SCORE: ${score}`;
 timeDisplay.textContent = `TIME: ${time}`;
// Hide screens
 startScreen.style.display = 'none';
 gameOverScreen.style.display = 'none';
 winScreen.style.display = 'none';
// Clear existing Mario
 const existingMario = document.querySelector('.mario');
 if (existingMario) existingMario.remove();
// Create game elements
 createMario();
 createGround();
 setupLevel();
// Start timer
 clearInterval(timeInterval);
 startTimer();
// Start game loop
 lastTime = performance.now();
 gameLoopId = requestAnimationFrame(gameLoop);
 }
// Initialize game
 startScreen.style.display = 'flex';
 });
 </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=Assad3l/alda" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>