Created
April 7, 2017 15:48
-
-
Save joliz/939dc3c8de242c3937de6803c4266041 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=939dc3c8de242c3937de6803c4266041
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>Player Hater 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://i.imgur.com/5xwd0ah.gif"> | |
| <img id="enemy" src="http://i.imgur.com/YyvDWMJ.gif"> | |
| </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 jump() { | |
| } | |
| function checkCollision() { | |
| var marioLeft = $("#mario").offset().left; | |
| var enemyLeft = $("#enemy").offset().left; | |
| var marioRight = marioLeft + $("#mario").width(); | |
| var enemyRight = enemyLeft + $("#enemy").width(); | |
| if(marioRight > enemyLeft && marioLeft < enemyRight) { | |
| alert("Michael is a hater"); | |
| } | |
| } | |
| $(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(e) { | |
| if(e.keyCode === 37) { // left | |
| $("#game").animate({ | |
| backgroundPosition: "+=180" | |
| }); | |
| } | |
| else if(e.keyCode === 39) { // right | |
| $("#game").animate({ | |
| backgroundPosition: "-=180" | |
| }); | |
| } else if(e.keyCode === 49) { | |
| jump(); | |
| } | |
| if (event.which === 37) { | |
| $("#mario").css("left", $("#mario").offset().left - 20); | |
| //moves right | |
| } else if (event.which === 39) { | |
| $("#mario").css("left", $("#mario").offset().left + 30); | |
| } else if(e.keyCode === 49) { | |
| jump(); | |
| } | |
| checkCollision(); | |
| }); | |
| //Checks for position relative to each other | |
| }); |
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: 285px; | |
| } | |
| #coin{ | |
| height:50px; | |
| position: absolute; | |
| bottom: 250px; | |
| left: 600px; | |
| } | |
| #enemy{ | |
| height:90px; | |
| position: absolute; | |
| bottom: 60px; | |
| left: 550px; | |
| } | |
| 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