Mario Game / Website
How do I make an mario game / website?
Use Mario to Navigate the Website! Once you focus on the page, you can move around using the arrow keys and jump using the space-bar. Hitting a menu option will open that page.. What is a mario game / website? How do you make a mario game / website? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.
Mario Game / Website - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mario Game / Website</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mario-game"> <div class="background"></div> <div class="foreground"></div> <div class="mario"></div> <div class="menu"> <div class="option">Homepage</div><div class="option">About Us</div><div class="option">Services</div><div class="option">Contact Us</div> </div> <div class="content"> <div class="show first-screen"> <h2>Control Mario to Navigate Website!</h2> <h1 class="click-here">CLICK HERE</h1> </div> <div class="getting-started"> <h2>Mario Website Navigation</h2> <p> Move Mario and jump to hit the links to navigate around the website. </p> <div class="controls"> <h4>Controls:</h4> <table> <tr> <th>Right</th> <td> Right Arrow Key </td> <td> D </td> </tr> <tr> <th>Left</th> <td> Left Arrow Key </td> <td> A </td> </tr> <tr> <th>Jump</th> <td> Spacebar </td> <td> </td> </tr> </table> </div> <p>( If controls don't work: <strong>MAKE SURE THIS WINDOW IS ACTIVE BY CLICKING HERE</strong> ) </p> </div> <div class="content-index-0"> <h2>Homepage</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p> </div> <div class="content-index-1"> <h2>About Us</h2> <p> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. </p> <p> Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </p> </div> <div class="content-index-2"> <h2>Services</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> <p> Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </p> </div> <div class="content-index-3"> <h2>Contact Us</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p> Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. </p> <p> Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mario Game / Website - Script Codes CSS Codes
.mario-game { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-family: sans-serif;
}
.mario-game h1.click-here { text-align: center; margin: 100px 0 0 0 !important; font-size: 48px;
}
.mario-game .background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0181ff; /* Old browsers */ background: -moz-linear-gradient(top, #0181ff 0%, #94edff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0181ff), color-stop(100%, #94edff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0181ff 0%, #94edff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0181ff 0%, #94edff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0181ff 0%, #94edff 100%); /* IE10+ */ background: linear-gradient(to bottom, #0181ff 0%, #94edff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0181ff', endColorstr='#94edff',GradientType=0 ); /* IE6-9 */
}
.mario-game .foreground { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #c98524 url(http://sheltered-sierra-9273.herokuapp.com/assets/ground.jpg);
}
.mario-game table tr > * { padding: 10px 30px; border: 1px solid #333;
}
.mario-game .mario { position: absolute; left: 100px; bottom: 40px; height: 40px; width: 20px; background-color: transparent; /* background-image: url(http://sheltered-sierra-9273.herokuapp.com/assets/smw_mario_sheet.png);*/ background-image: url(http://www.mariomayhem.com/downloads/sprites/smw/smw_mario_sheet.png); background-size: 392px 784px; background-repeat: no-repeat; background-position: -206px -64px; -webkit-transition: top 0.1s linear, left 0.1s linear, right 0.1s linear, bottom 0.1s linear; -moz-transition: top 0.1s linear, left 0.1s linear, right 0.1s linear, bottom 0.1s linear; -ms-transition: top 0.1s linear, left 0.1s linear, right 0.1s linear, bottom 0.1s linear; -o-transition: top 0.1s linear, left 0.1s linear, right 0.1s linear, bottom 0.1s linear; transition: top 0.1s linear, left 0.1s linear, right 0.1s linear, bottom 0.1s linear;
}
.mario-game .mario.left { background-position: -6px -64px;
}
.mario-game .mario.right { background-position: -328px -64px;
}
.mario-game .mario.alternate.left { background-position: -50px -64px;
}
.mario-game .mario.alternate.right { background-position: -369px -64px;
}
.mario-game .menu { position: absolute; left: 100px; right: 100px; bottom: 140px; height: 40px; border-radius: 3px; overflow: hidden;
}
.mario-game .menu .option { background-color: #FF5300; display: inline-block; width: 25%; color: #FFF; line-height: 40px; text-align: center;
}
.mario-game .menu .option.touch { background-color: #A63600;
}
.mario-game .content { position: absolute; left: 100px; right: 100px; top: 10px; bottom: 190px; background-color: #FFF; border-radius: 3px; overflow: auto;
}
.mario-game .content h1, .mario-game .content h2, .mario-game .content h3 { margin-top: 0;
}
.mario-game .content .controls { width: 340px;
}
.mario-game .content > div { position: absolute; opacity: 0; margin: 2.5%; width: 95%; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
}
.mario-game .content > div.show { opacity: 1;
}
Mario Game / Website - Script Codes JS Codes
(function() { $(function() { var collision, end_movement, mario, mario_event_listener, move_degree, move_mario, move_times, start_movement, window_width, x_movement, x_movement_dir, x_movement_on, y_movement; mario = { element: $('.mario'), bottom: 40, left: 100 }; move_times = 10; x_movement = null; x_movement_on = false; x_movement_dir = 0; y_movement = null; window_width = $(window).width(); move_degree = function(d) { return d * move_times; }; collision = function($div1, $div2) { var b1, b2, h1, h2, r1, r2, w1, w2, x1, x2, y1, y2; x1 = $div1.offset().left; y1 = $div1.offset().top; h1 = $div1.outerHeight(true); w1 = $div1.outerWidth(true); b1 = y1 + h1; r1 = x1 + w1; x2 = $div2.offset().left; y2 = $div2.offset().top; h2 = $div2.outerHeight(true); w2 = $div2.outerWidth(true); b2 = y2 + h2; r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { return false; } else { return true; } }; mario_event_listener = function() { return $('.menu .option').each(function(index) { if (collision($('.mario'), $(this)) && !$(this).hasClass('touch')) { $('.menu .option.touch').removeClass('touch'); $(this).addClass('touch'); $(".content .show").removeClass('show'); return $(".content .content-index-" + index).addClass('show'); } }); }; move_mario = function(x, y) { var new_x, new_y; new_x = mario.left + x; if (new_x < 5) { new_x = 5; } new_y = mario.bottom + y; if (new_y < 40) { new_y = 40; } if (new_y > 190) { new_y = 190; } mario_event_listener(); mario.bottom = new_y; mario.left = new_x; return mario.element.css({ bottom: mario.bottom, left: mario.left }); }; start_movement = function(x, y) { if (x !== 0 && x_movement_on && x_movement_dir !== x) { end_movement('x'); } if (x !== 0 && !x_movement_on) { if (x < 0) { mario.element.addClass('left'); } if (x > 0) { mario.element.addClass('right'); } x_movement_dir = x; x_movement = setInterval(function() { return move_mario(move_degree(x), 0); }, 100); return x_movement_on = true; } else if (y !== 0) { return y_movement = setInterval(function() { return move_mario(0, move_degree(y)); }, 100); } }; end_movement = function(axis) { if (axis === 'x') { mario.element.removeClass('left'); mario.element.removeClass('right'); clearInterval(x_movement); return x_movement_on = false; } else if (axis === 'y') { return clearInterval(y_movement); } }; $(window).keydown(function(e) { if (e.which === 65 || e.which === 37) { return start_movement(-4, 0); } else if (e.which === 68 || e.which === 39) { return start_movement(4, 0); } else if (e.which === 32) { if (mario.bottom === 40) { return move_mario(0, move_degree(20)); } } }); $('.content').click(function() { if ($('.first-screen').hasClass('show')) { $('.first-screen').removeClass('show'); return $('.getting-started').addClass('show'); } }); $(window).keyup(function(e) { if (e.which === 65 || e.which === 37) { if (!(x_movement_dir > 0)) { return end_movement('x'); } } else if (e.which === 68 || e.which === 39) { if (!(x_movement_dir < 0)) { return end_movement('x'); } } }); setInterval(function() { if (mario.bottom !== 40) { return move_mario(0, move_degree(-2)); } }, 40); return setInterval(function() { if (mario.element.hasClass('alternate')) { return mario.element.removeClass('alternate'); } else { return mario.element.addClass('alternate'); } }, 80); });
}).call(this);
Developer | Brett Clanton |
Username | brettclanton001 |
Uploaded | August 15, 2022 |
Rating | 4 |
Size | 7,162 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Mincraft cube experiment ALL CSS | 8,956 Kb |
Left Align | 1,435 Kb |
Hidden scrollbar in all browsers | 2,329 Kb |
Staging Embed Widget | 2,642 Kb |
A Pen by Brett Clanton | 2,791 Kb |
How To Compile Ruby in CSS | 5,089 Kb |
Cool flat-yet-3d - ALL CSS | 2,697 Kb |
Space Sun Design - All CSS | 6,391 Kb |
Mac Pro page | 2,643 Kb |
Percent Clock | 8,570 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Border-radius animation | Yukulele | 2,480 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Improve | Gavra | 1,652 Kb |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!