Super Mario Run

Left

Right

Jump

body { margin: 0; overflow: hidden; background-color: #7ec0ee; /* Sky color */ } #gameCanvas { display: block; background-color: #a2e863; /* Ground color */ } #joystick { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } #joystick .button { padding: 10px 20px; margin: 0 10px; background-color: #555; color: white; border: none; border-radius: 5px; cursor: pointer; user-select: none; text-align: center; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const joystick = document.getElementById('joystick'); const leftBtn = document.getElementById('leftBtn'); const rightBtn = document.getElementById('rightBtn'); const jumpBtn = document.getElementById('jumpBtn'); const marioImg = new Image(); marioImg.src = 'https://media-hosting.imagekit.io/2133fb41afbb4cfb/IMG_0145.gif?Expires=1839676645&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=KJR6gUxa0RwrF4sn~OLZymhEqFSjW6p5tbVXXh64ZOaJtEFrRVNiMnYoixPJdzfmGkVh3VOL-eUeL6RX7Z23hR~PFyRVMzL8rU3P3E7Muh24qHB46HzdiNer7wSXAe1mXnyzKU781yHgLWivIq-dqKaHdVSYr9wkmNv4okv1mKbTJR13o1Wz0EhCNtP697HM9Ukh9ZafF7Ic~WzVZbw2nJ9v3OINaePCfL0utDkoCgJL85PdxnTnVEyVnSqbfmcziBwCx3eX8BYsTThKOwT6pgpaczIDrO5BV6yoBysowkgCwMN5nPvvhRA9jhNy80zMMz7AXAjMlRIm5F20-LbjRw__'; let marioX = 50; let marioY = canvas.height - 100; // Start above the ground const marioWidth = 50; const marioHeight = 100; let gravity = 0.5; let velocityY = 0; let isJumping = false; let moveSpeed = 5; function drawGround() { ctx.fillStyle = '#a2e863'; ctx.fillRect(0, canvas.height - 50, canvas.width, 50); } function drawSky() { ctx.fillStyle = '#7ec0ee'; ctx.fillRect(0, 0, canvas.width, canvas.height - 50); } function drawMario() { ctx.drawImage(marioImg, marioX, marioY, marioWidth, marioHeight); } function updateMario() { velocityY += gravity; marioY += velocityY; // Ground collision if (marioY > canvas.height - marioHeight - 50) { marioY = canvas.height - marioHeight - 50; velocityY = 0; isJumping = false; } } function jump() { if (!isJumping) { velocityY = -15; isJumping = true; } } function moveLeft() { marioX -= moveSpeed; if (marioX < 0) marioX = 0; } function moveRight() { marioX += moveSpeed; if (marioX > canvas.width - marioWidth) marioX = canvas.width - marioWidth; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawSky(); drawGround(); updateMario(); drawMario(); requestAnimationFrame(gameLoop); } // Joystick event listeners leftBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveLeft(); }); rightBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveRight(); }); jumpBtn.addEventListener('touchstart', (e) => { e.preventDefault(); jump(); }); // Keyboard event listeners for desktop controls document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { moveLeft(); } else if (e.key === 'ArrowRight') { moveRight(); } else if (e.key === 'ArrowUp' || e.key === ' ') { jump(); } }); gameLoop(); ```