Super Mario Game

body { margin: 0; overflow: hidden; background-color: skyblue; /* Sky color */ } #gameCanvas { display: block; background-color: lightblue; } #joystick { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } #joystick button { margin: 10px; padding: 10px 20px; font-size: 16px; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const marioImg = new Image(); marioImg.src = 'https://media-hosting.imagekit.io/dcd6cdbd4f2f4512/IMG_0145.gif?Expires=1839679478&Key-Pair-Id=K2ZIVPTIP2VGHC&Signature=CNe4Xk7QwwaEe8gepoOYMl507Qr40uVyppHpn9ztODnBC9dW5~gVJpQg0-XfWv~ZPOYDjHPUqIJV46th59vgQ-ezc5UWe3kO4n9oSN4vu-9RBMv5f8~ddHBo8d~BOBPpo2KWnurZGYr~kHXhS7TMFmtBngJy5DPNtQzVSTqPtGtcq~p74w9qAtGg~JRCRCyi~rnajxbu6VMwg6CFfaxx4YdtW6wQa7i52mOBDY-qOb3OL3hcWC-qMOWLeAWF-pwr2BqRsgHHV6C8Wxf4x5PTJLsbudYDWbjcHf3uPfPa1ttYl9d-mgTXKW2c4qIFSgs123xYqb3LqRjgmHPXtpKDvA__'; // Replace with your GIF URL let marioX = 50; let marioY = canvas.height - 100; // Start above ground const marioWidth = 50; const marioHeight = 50; let gravity = 0.5; let velocityY = 0; let isJumping = false; const groundHeight = 50; // Height of the ground // Joystick buttons const leftBtn = document.getElementById('leftBtn'); const rightBtn = document.getElementById('rightBtn'); const jumpBtn = document.getElementById('jumpBtn'); let moveLeft = false; let moveRight = false; leftBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveLeft = true; }); leftBtn.addEventListener('touchend', () => { moveLeft = false; }); leftBtn.addEventListener('mousedown', (e) => { e.preventDefault(); moveLeft = true; }); leftBtn.addEventListener('mouseup', () => { moveLeft = false; }); leftBtn.addEventListener('mouseleave', () => { moveLeft = false; }); rightBtn.addEventListener('touchstart', (e) => { e.preventDefault(); moveRight = true; }); rightBtn.addEventListener('touchend', () => { moveRight = false; }); rightBtn.addEventListener('mousedown', (e) => { e.preventDefault(); moveRight = true; }); rightBtn.addEventListener('mouseup', () => { moveRight = false; }); rightBtn.addEventListener('mouseleave', () => { moveRight = false; }); jumpBtn.addEventListener('touchstart', (e) => { e.preventDefault(); if (!isJumping) { velocityY = -10; // Initial jump velocity isJumping = true; } }); jumpBtn.addEventListener('mousedown', (e) => { e.preventDefault(); if (!isJumping) { velocityY = -10; // Initial jump velocity isJumping = true; } }); function drawGround() { ctx.fillStyle = 'saddlebrown'; // Ground color ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight); } function drawMario() { ctx.drawImage(marioImg, marioX, marioY, marioWidth, marioHeight); } function updateMario() { if (moveLeft) { marioX -= 5; } if (moveRight) { marioX += 5; } velocityY += gravity; marioY += velocityY; // Ground collision detection if (marioY > canvas.height - marioHeight - groundHeight) { marioY = canvas.height - marioHeight - groundHeight; velocityY = 0; isJumping = false; } // Keep Mario within canvas bounds if (marioX < 0) marioX = 0; if (marioX + marioWidth > canvas.width) marioX = canvas.width - marioWidth; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawGround(); drawMario(); updateMario(); requestAnimationFrame(gameLoop); } marioImg.onload = () => { gameLoop(); };