Mario's Locker Room Adventure
About this app
Help Mario grab all the coins in the grand locker room!
Mario's Locker Room Adventure 36●8-B 1018●2-E 2019●3-F
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario's Locker Room Adventure</title>
<meta name="description" content="Help Mario grab all the coins in the grand locker room!">
<meta name="keywords" content="Mario, Adventure, Coins, Game, Interactive">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
background: linear-gradient(#5ee7df, #b490ca);
}
#game-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.mario {
width: 50px;
height: 80px;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1171930/mario.png') left center;
background-size: 150%;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.coin {
width: 30px;
height: 30px;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1171930/coin_sprite.png') left center;
background-size: cover;
position: absolute;
animation: spin 1s steps(10) infinite;
}
.coin.collected {
visibility: hidden;
}
.locker {
position: absolute;
width: 60px;
height: 100px;
background: #f4d35e;
border: 3px solid #ee964b;
border-radius: 5px;
text-align: center;
padding-top: 70px;
box-sizing: border-box;
color: white;
}
.floor {
position: absolute;
width: 100%;
height: 20px;
background: #333;
bottom: 0;
}
.ladder {
position: absolute;
width: 40px;
height: calc(100% - 20px);
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1171930/ladder_sprite.png') center center;
background-size: cover;
left: 50%;
transform: translateX(-50%);
}
@keyframes spin {
100% { background-position: -300px; }
}
</style>
</head>
<body>
<div id="game-container">
<div class="mario" id="mario"></div>
<div class="floor"></div>
<div class="locker" style="left: 36%;">36●8-B <div class="coin" id="coin1" style="bottom: 110px;"></div></div>
<div class="locker" style="left: 101.8%;">1018●2-E <div class="coin" id="coin2" style="bottom: 200px;"></div></div>
<div class="locker" style="left: 201.9%;">2019●3-F <div class="coin" id="coin3" style="bottom: 110px;"></div></div>
<div class="ladder"></div>
</div>
<script>
const mario = document.getElementById('mario');
const coin1 = document.getElementById('coin1');
const coin2 = document.getElementById('coin2');
const coin3 = document.getElementById('coin3');
let marioX = 50;
let marioY = 20;
let marioJumping = false;
let marioDirection = 'right';
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
marioDirection = 'left';
marioX -= 5;
mario.style.backgroundPositionY = 'bottom';
mario.style.transform = 'translateX(-50%) scaleX(-1)';
} else if (e.key === 'ArrowRight') {
marioDirection = 'right';
marioX += 5;
mario.style.backgroundPositionY = 'bottom';
mario.style.transform = 'translateX(-50%) scaleX(1)';
} else if (e.key === 'ArrowUp' && !marioJumping) {
marioJumping = true;
marioY = 100;
setTimeout(() => {
marioY = 20;
marioJumping = false;
}, 500);
} else if (e.key === 'ArrowDown') {
// Crouching action can be added here if desired
}
mario.style.left = marioX + '%';
mario.style.bottom = marioY + 'px';
collectCoin(marioX, marioY);
});
function collectCoin(marioX, marioY) {
const marioCenterX = marioX + 25;
const marioCenterY = marioY + 40;
const coin1CenterX = 36;
const coin1CenterY = 140;
const coin1Distance = Math.sqrt(Math.pow(marioCenterX - coin1CenterX, 2) + Math.pow(marioCenterY - coin1CenterY, 2));
const coin2CenterX = 101.8;
const coin2CenterY = 230;
const coin2Distance = Math.sqrt(Math.pow(marioCenterX - coin2CenterX, 2) + Math.pow(marioCenterY - coin2CenterY, 2));
const coin3CenterX = 201.9;
const coin3CenterY = 140;
const coin3Distance = Math.sqrt(Math.pow(marioCenterX - coin3CenterX, 2) + Math.pow(marioCenterY - coin3CenterY, 2));
if (coin1Distance <= 30 && !marioJumping) {
coin1.classList.add('collected');
}
if (coin2Distance <= 30 && marioJumping) {
coin2.classList.add('collected');
}
if (coin3Distance <= 30 && !marioJumping) {
coin3.classList.add('collected');
}
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!