Skip to content

Instantly share code, notes, and snippets.

@courtney-scripted

courtney-scripted/index.html

Created March 10, 2017 16:57
Show Gist options
  • Save courtney-scripted/9a081e5b5bf144f66813b8d3a53891b8 to your computer and use it in GitHub Desktop.
Save courtney-scripted/9a081e5b5bf144f66813b8d3a53891b8 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=9a081e5b5bf144f66813b8d3a53891b8
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>X movement left-only</title>
</head>
<body>
<!-- Put your page markup here -->
<div class="box" id="blue"></div>
<div class="box" id="red"></div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
$("body").keydown(function(event) {
//moves left
if (event.which === 37) {
$("#blue").css("left", $("#blue").offset().left - 10);
console.log($("#blue").offset().left);
//moves right
} else if (event.which === 39) {
//your code here
$("#blue").css("left", $("#blue").offset().left + 10);
}
else if (event.which === 40){
$("#blue").css("top", $("#blue").offset().top + 10);
}
else if (event.which === 38){
$("#blue").css("top", $("#blue").offset().top - 10);
}
else {
return;
}
});
Raw
styles.css
.box {
height: 100px;
width: 100px;
position: absolute;
}
#blue {
background-color: rgba(0, 0, 255, 0.7);
z-index: 1;
left: 120px;
}
#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