Skip to content

Instantly share code, notes, and snippets.

@maxjacobson

maxjacobson/index.html

Created May 9, 2017 04:13
Show Gist options
  • Save maxjacobson/8678b128d4f4021e79d33ceeeccfac0e to your computer and use it in GitHub Desktop.
Save maxjacobson/8678b128d4f4021e79d33ceeeccfac0e to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=8678b128d4f4021e79d33ceeeccfac0e
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="field">
<div id="goal"></div>
<div id="ball"> </div>
</div>
<p>Kick the ball</p>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
$(document).ready(function() {
$("#ball").one("click", function() {
var timer;
function repeat() {
var currentTopOfBall = $("#ball").offset().top;
var currentTopOfGoal = $("#goal").offset().top;
if (currentTopOfBall <= currentTopOfGoal) {
alert("GOOOOAL!!!!!!!!");
clearInterval(timer);
} else {
var newTop = currentTopOfBall - 10;
$("#ball").css("top", newTop);
}
}
timer = setInterval(repeat, 50);
});
});
Raw
styles.css
body {
background-color: black;
}
#goal {
margin: 10px auto;
border-left: 5px solid black;
border-right: 5px solid black;
border-top: 5px solid black;
width: 100px;
height: 50px;
}
#field {
width: 400px;
margin: 50px auto;
background-color: lightgreen;
height: 800px;
border: 5px white solid;
}
#ball {
background-color: white;
border: 2px solid black;
height: 50px;
width: 50px;
border-radius: 25px;
position: absolute;
top: 500px;
left: 350px;
}
p {
color: pink;
text-align: center;
font-weight: bold;
font-size: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment