Created
April 7, 2017 15:49
-
-
Save courtney-scripted/4c3d9e2b74097ce4d5289cba3561e0a1 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=4c3d9e2b74097ce4d5289cba3561e0a1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mario</title> | |
| </head> | |
| <body> | |
| <h1>Mario jQuery</h1> | |
| <button id="start">Start Game</button> | |
| <div id="board"> | |
| <div id="game"> | |
| <h3>Counter <span id="count">0</span></h3> | |
| <img id="coin" src="http://rs217.pbsrc.com/albums/cc85/Shadowmario111160/Mario%20Clips%20And%20Movies/thcoin.gif~c200"> | |
| <img id="mario" src="http://img.vcomments.com/icon/games/41.gif"> | |
| <img id="burger" src="http://pngimg.com/uploads/burger_sandwich/burger_sandwich_PNG4133.png"> | |
| </div> | |
| <button id="jump">Jump</button> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"enabledLibraries":["jquery"]} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* global $ */ | |
| function showBoard() { | |
| $('#start').hide(); | |
| $('#board').show(); | |
| } | |
| function checkCollision() { | |
| var marioLeft = $("#mario").offset().left; | |
| var burgerLeft = $("#burger").offset().left; | |
| var marioRight = marioLeft + $("#mario").width(); | |
| var burgerRight = burgerLeft + $("#burger").width(); | |
| if(marioRight > burgerLeft && marioLeft < burgerRight) { | |
| alert("YUMMMM!"); | |
| } | |
| } | |
| function jump() { | |
| } | |
| $(document).ready(function() { | |
| $('#start').click(function() { | |
| showBoard(); | |
| }); | |
| $('#jump').mousedown(function() { | |
| $('#mario').css('bottom', '175px'); | |
| $('#coin').hide(); | |
| }); | |
| var count = 1; | |
| $('#jump').mouseup(function() { | |
| $('#mario').css('bottom', '60px'); | |
| $('#coin').show(); | |
| $('#count').text(count++); | |
| }); | |
| $("body").keydown(function(event) { | |
| if(event.which=== 37) { // left | |
| $("#mario").css("left", $("#mario").offset().left - 60); | |
| } | |
| else if(event.which=== 39) { // right | |
| $("#mario").css("left", $("#mario").offset().left + 60); | |
| } | |
| else if(event.which === 38) { | |
| $('#mario').css('bottom', '175px'); | |
| } | |
| checkCollision(); | |
| }); | |
| $("body").keyup(function(event) { | |
| if(event.which === 38) { | |
| $('#mario').css('bottom', '60px'); | |
| } | |
| }); | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background-color: lightgreen; | |
| } | |
| h1{ | |
| text-align: center; | |
| } | |
| #board{ | |
| display:none; | |
| } | |
| #game{ | |
| /*display:none;*/ | |
| position: relative; | |
| height: 385px; | |
| background: url("https://i.stack.imgur.com/WHu9Z.png") repeat-x; | |
| } | |
| #mario{ | |
| height:100px; | |
| position: absolute; | |
| bottom: 60px; | |
| left: 125px; | |
| } | |
| #burger{ | |
| height:100px; | |
| position: absolute; | |
| bottom:60px; | |
| left:285px; | |
| } | |
| #coin{ | |
| height:50px; | |
| position: absolute; | |
| bottom: 250px; | |
| left: 300px; | |
| } | |
| h3{ | |
| float: right; | |
| margin: 25px; | |
| } | |
| button { | |
| width: 200px; | |
| height: 50px; | |
| font-size: 20px; | |
| font-weight: bolder; | |
| display: block; | |
| margin: 20px auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment