<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>nothing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://gamequery.onaluf.org/download/jquery.gamequery-0.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).keydown(function(event) {
if ( event.which == 37){
$('.button0 input').animate({'left': '+='+Math.cos(90*Math.PI/180) *30+'px','top': '+='+Math.sin(90*Math.PI/180) *30+'px'},0);
}
});
$(document).keydown(function(event) {
if ( event.which == 39){
$('.button0 input').animate({'left': '+='+Math.cos(180*Math.PI/180) *30+'px','top': '+='+Math.sin(180*Math.PI/180) *30+'px'},0);
}
});
$(document).keydown(function(event) {
if ( event.which == 38){
$('.button0 input').animate({'left': '+='+Math.cos(270*Math.PI/180) *30+'px','top': '+='+Math.sin(270*Math.PI/180) *30+'px'},0);
}
});
$(document).keydown(function(event) {
if ( event.which == 40){
$('.button0 input').animate({'left': '+='+Math.cos(0*Math.PI/180) *30+'px','top': '+='+Math.sin(0*Math.PI/180) *30+'px'},0);
}
});
$('.button0 input').collision('.button1 input').each(function(){
alert('COLLISION')
});
});
</script>
<style type="text/css">
.button0 input{
position:fixed;
left:142px;
top:77px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
.button1 input{
position:fixed;
left:333px;
top:58px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
</style>
<body>
<div class="button0"><input type="button" style="width: 59px;height: 58px;" value="Button"/></div>
<div class="button1"><input type="button" style="width: 113px;height: 76px;" value="Button"/></div>
</body>
</html>