Skip to content

Instantly share code, notes, and snippets.

@Bijesse

Bijesse/index.html

Created August 3, 2016 14:07
Show Gist options
  • Save Bijesse/716b5f77f412b00f4354a9b5c136e091 to your computer and use it in GitHub Desktop.
Save Bijesse/716b5f77f412b00f4354a9b5c136e091 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=716b5f77f412b00f4354a9b5c136e091
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>X movement Collision Left & Right</title>
</head>
<body>
<!-- Put your page markup here -->
<div class="box" id="blue"></div>
<div class="box" id="red"></div>
</body>
</html>
Raw
script.js
function checkCollision() {
var blueLeft = $("#blue").offset().left;
var redLeft = $("#red").offset().left;
var blueRight = blueLeft + $("#blue").width();
var redRight = redLeft + $("#red").width();
if(blueRight > redLeft && blueLeft < redRight) {
alert("Touching");
}
}
$("body").keydown(function(event) {
//moves left
if (event.which === 37) {
$("#blue").css("left", $("#blue").offset().left - 10);
//moves right
} else if (event.which === 39) {
$("#blue").css("left", $("#blue").offset().left + 10);
} else {
return;
}
//Checks for position relative to each other
checkCollision();
});
Raw
styles.css
.box {
height: 100px;
width: 100px;
position: absolute;
}
#blue {
background-color: rgba(0, 0, 255, 0.7);
z-index: 1;
}
#red {
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