Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/index.html

Created July 13, 2016 01:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save outoftime/f303a26f1f9c3d1db467607968ea154c to your computer and use it in GitHub Desktop.
Save outoftime/f303a26f1f9c3d1db467607968ea154c to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=f303a26f1f9c3d1db467607968ea154c
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Put your page markup here -->
<div class="box" id="cursor"></div>
<div class="box" id="target"></div>
</body>
</html>
Raw
script.js
var $cursor = $('#cursor'), $target = $('#target');
function checkCollision() {
var cursorLeft = $cursor.offset().left;
var targetLeft = $target.offset().left;
var cursorRight = cursorLeft + $cursor.width();
var targetRight = targetLeft + $target.width();
if(cursorRight > targetLeft && cursorLeft < targetRight) {
alert('Crash!');
}
}
$('body').keydown(function(e) {
if (e.which === 37) {
$cursor.css('left', $cursor.offset().left - 10);
} else if (e.which === 39) {
$cursor.css('left', $cursor.offset().left + 10);
} else {
return;
}
checkCollision();
});
Raw
styles.css
.box {
height: 100px;
width: 100px;
position: absolute;
}
#cursor {
background-color: rgba(0, 0, 255, 0.7);
z-index: 1;
}
#target {
background-color: red;
left: 50%;
margin-left: -50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment