Mario Game / Website

Developer
Brett Clanton
Size
7,162 Kb
Views
44,528
  1. Mario Game / Website Previews
  2. Mario Game / Website HTML Codes
  3. Mario Game / Website CSS Codes
  4. Mario Game / Website JS Codes

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 Previews
IQ Test

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);
Mario Game / Website - Script Codes
Mario Game / Website - Script Codes
Home Page Home
Developer Brett Clanton
Username brettclanton001
Uploaded August 15, 2022
Rating 4
Size 7,162 Kb
Views 44,528
Do you need developer help for Mario Game / Website?

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!

Brett Clanton (brettclanton001) Script Codes
Name
Fun with columns
Cool flat-yet-3d - ALL CSS
Left Align
Dribbble logo in CSS
A Pen by Brett Clanton
Staging Embed Widget
Space Sun Design - All CSS
Mincraft cube experiment ALL CSS
Hidden scrollbar in all browsers
Compass Icon - ALL CSS
Create amazing Facebook ads with AI!

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!