Mario Run

body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #87CEEB; /* Sky blue background */ font-family: sans-serif; } #gameArea { width: 800px; height: 300px; border: 1px solid black; position: relative; overflow: hidden; background-image: url('https://www.transparenttextures.com/patterns/clean-textile.png'); /* Example background */ background-repeat: repeat-x; background-position: 0 0; } #mario { position: absolute; bottom: 10px; /* Adjust to sit on the ground */ left: 50px; /* Starting position */ width: 50px; /* Adjust size as needed */ height: auto; z-index: 1; /* Ensure Mario is above grass and obstacles */ } #grass { position: absolute; bottom: 0; left: 0; width: 200%; /* Make it wider than game area to allow scrolling */ height: 20px; /* Height of the grass */ background-color: #7CFC00; /* Green color for grass */ background-image: url('https://www.transparenttextures.com/patterns/green-dust-and-scratches.png'); /* Optional grass texture */ background-repeat: repeat-x; background-position: 0 0; } #obstacles { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Allow clicks/events to pass through */ } .goomba { position: absolute; bottom: 20px; /* Position on top of the grass */ width: 40px; /* Goomba width */ height: auto; /* Maintain aspect ratio */ z-index: 1; /* Ensure goombas are above grass */ } #gameOver { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4em; color: red; text-shadow: 2px 2px 4px black; z-index: 10; } .hidden { display: none; } const gameArea = document.getElementById('gameArea'); const grass = document.getElementById('grass'); const obstaclesContainer = document.getElementById('obstacles'); const gameOverDisplay = document.getElementById('gameOver'); const mario = document.createElement('img'); mario.id = 'mario'; // NOTE: The provided GIF URL has an expiration date. For a persistent application, use a stable asset URL. // The URL provided by the user is for a GIF, not a PNG. mario.src = 'https://media-hosting.imagekit.io/2133fb4cfb/IMG_0145.gif?Expires=1839676645&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=KJR6gUxa0RwrF4sn~OLZymhEqFSjW6p5tbVXXh64ZOaJtEFrRVNiMnYoixPJdzfmGkVh3VOL-eUeL6RX7Z23hR~PFyRVMzL8rU3P3E7Muh24qHB46HzdiNer7wSXAe1mXnyzKU781yHgLWivIq-dqKaHdVSYr9wkmNv4okv1mKbTJR13o1Wz0EhCNtP697HM9Ukh9ZafF7Ic~WzVZbw2nJ9v3OINaePCfL0utDkoCgJL85PdxnTnVEyVnSqbfmcziBwCx3eX8BYsTThKOwT6pgpaczIDrO5BV6yoBysowkgCwMN5nPvvhRA9jhNy80zMMz7AXAjMlRIm5F20-LbjRw__'; mario.style.position = 'absolute'; const marioGroundBottom = 10; // Mario's bottom position when on the ground mario.style.bottom = marioGroundBottom + 'px'; const marioLeft = 50; // Mario's fixed horizontal position mario.style.left = marioLeft + 'px'; mario.style.width = '50px'; mario.style.height = 'auto'; // Maintain aspect ratio gameArea.appendChild(mario); // Game state variables let isJumping = false; let verticalVelocity = 0; const gravity = 0.6; // How fast Mario accelerates downwards const jumpStrength = 12; // Initial upward velocity when jumping const speed = 3; // Game speed (pixels per frame) let backgroundPosition = 0; let grassPosition = 0; const obstacles = []; // Array to hold active obstacle elements let obstacleTimer = 0; const obstacleInterval = 2000; // Time in ms between new obstacles (adjust for difficulty) let lastTime = 0; // --- Jumping Logic --- function jump() { if (!isJumping) { isJumping = true; verticalVelocity = jumpStrength; } } function applyGravity() { if (isJumping) { let currentBottom = parseInt(mario.style.bottom); currentBottom += verticalVelocity; verticalVelocity -= gravity; // Check if Mario hits the ground if (currentBottom <= marioGroundBottom) { currentBottom = marioGroundBottom; isJumping = false; verticalVelocity = 0; } mario.style.bottom = currentBottom + 'px'; } } // --- Obstacle Logic --- function createGoomba() { const goomba = document.createElement('img'); // Create an image element goomba.classList.add('goomba'); // NOTE: The provided GIF URL has an expiration date. For a persistent application, use a stable asset URL. goomba.src = 'https://media-hosting.imagekit.io/17a673ce54f14b0c/IMG_0148.webp?Expires=1839679069&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=HFVRhg7DY5mChCZ7H59lLC2qWrHnOjldV6A8q0fk8IRjsEt0MpVVIJM-zTdfVnOrEUnG0DteOQDBxaIyjktMcsCClo6jKfh9U8Jq3w9X7rSfOAfT9ireufbsS17DSxZD0vVpT-zM1megtWDS~LMqrHiDs4YiyjYEUoD6tGIxmllW-G1csgh3RIkyyYC6bAL2TMQdtgacS0VGKKnxbcGAvKFS2UXyACtT~yfD~tDnAz9GuGk13B868JH8ebzf-2Phz6NPGJc1RIUS9CDxFywuOdHK3clvuEszvChUvnonzM2mAipzstsqipL-16FCUDxNLPwW6bewhVdflMuh~psSjg__'; // Goomba GIF URL // Position goomba off-screen to the right, on top of the grass goomba.style.left = gameArea.offsetWidth + 'px'; goomba.style.bottom = '20px'; // Grass height goomba.style.width = '40px'; // Goomba width goomba.style.height = 'auto'; // Maintain aspect ratio obstaclesContainer.appendChild(goomba); obstacles.push(goomba); } function moveObstacles() { obstacles.forEach((obstacle, index) => { let currentLeft = parseInt(obstacle.style.left); currentLeft -= speed; obstacle.style.left = currentLeft + 'px'; // Remove obstacles that are off-screen if (currentLeft + obstacle.offsetWidth < 0) { obstacle.remove(); obstacles.splice(index, 1); // Remove from array } }); } function generateObstacles(deltaTime) { obstacleTimer += deltaTime; if (obstacleTimer > obstacleInterval) { createGoomba(); // Create a goomba obstacleTimer = 0; // Reset timer } } // --- Collision Detection --- function checkCollisions() { const marioRect = mario.getBoundingClientRect(); const gameAreaRect = gameArea.getBoundingClientRect(); // Get game area position // Adjust Mario's rect relative to gameArea const marioGameRect = { left: marioRect.left - gameAreaRect.left, right: marioRect.right - gameAreaRect.left, top: marioRect.top - gameAreaRect.top, bottom: marioRect.bottom - gameAreaRect.top, width: marioRect.width, height: marioRect.height }; obstacles.forEach(obstacle => { const obstacleRect = obstacle.getBoundingClientRect(); // Adjust Obstacle's rect relative to gameArea const obstacleGameRect = { left: obstacleRect.left - gameAreaRect.left, right: obstacleRect.right - gameAreaRect.left, top: obstacleRect.top - gameAreaRect.top, bottom: obstacleRect.bottom - gameAreaRect.top, width: obstacleRect.width, height: obstacleRect.height }; // Check for overlap const collision = !( marioGameRect.right < obstacleGameRect.left || marioGameRect.left > obstacleGameRect.right || marioGameRect.bottom < obstacleGameRect.top || marioGameRect.top > obstacleGameRect.bottom ); if (collision) { gameOver(); } }); } // --- Game Over --- let gameRunning = true; function gameOver() { gameRunning = false; cancelAnimationFrame(gameLoop); // Stop the animation loop gameOverDisplay.classList.remove('hidden'); // Show game over message // Optionally, add a restart button or other game over actions } // --- Game Loop --- function gameLoop(currentTime) { if (!gameRunning) return; const deltaTime = currentTime - lastTime; lastTime = currentTime; // Move the background (slower) backgroundPosition -= speed * 0.5; gameArea.style.backgroundPosition = backgroundPosition + 'px 0'; // Move the grass (same speed as obstacles) grassPosition -= speed; grass.style.backgroundPosition = grassPosition + 'px 0'; // Apply gravity and update Mario's position applyGravity(); // Move obstacles moveObstacles(); // Generate new obstacles generateObstacles(deltaTime); // Check for collisions checkCollisions(); // Request the next frame requestAnimationFrame(gameLoop); } // --- Event Listeners --- document.addEventListener('keydown', (event) => { if (event.code === 'Space') { jump(); } }); // Start the game loop requestAnimationFrame(gameLoop);