Skip to content

Instantly share code, notes, and snippets.

@joliz

joliz/index.html

Created April 7, 2017 15:48
Show Gist options
  • Save joliz/939dc3c8de242c3937de6803c4266041 to your computer and use it in GitHub Desktop.
Save joliz/939dc3c8de242c3937de6803c4266041 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=939dc3c8de242c3937de6803c4266041
Raw
index.html
<!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>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
/* 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
});
Raw
styles.css
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