Skip to content

Instantly share code, notes, and snippets.

@dursk
Created May 11, 2017
Embed
What would you like to do?
Exported from Popcode. Click to import: https://popcode.org/?gist=b14d0f3efc651005dd423a70f549d025
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="game">
<div id="bar"></div>
</div>
</body>
</html>
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.html"]}
$("body").keydown(function(event) {
var position = $("#bar").offset().left;
if (event.which === 37 && position > 13) {
$("#bar").css("left", position - 10);
} else if (event.which === 39 && position < 483) {
$("#bar").css("left", position + 10);
} else {
return;
}
});
var currentBlockIds = [];
function moveBlocks() {
for(var index = 0; index < currentBlockIds.length; index++) {
var blockId = currentBlockIds[index];
var element = $("#" + blockId);
var topOffset = element.offset().top;
if (topOffset < 483) {
element.css("top", topOffset + 10);
} else {
element.remove();
currentBlockIds.splice(index, 1);
}
}
}
function generateRandomId() {
return "A" + Math.floor(Math.random() * 10000);
}
function generateRandomOffset() {
return Math.floor(Math.random() * 480);
}
function createBlock() {
var id = generateRandomId();
var leftOffset = generateRandomOffset();
$("#game").append("<div id=" + id + " class=block style=left:" + leftOffset + "px></div>");
currentBlockIds.push(id);
}
window.setInterval(createBlock, 1200);
window.setInterval(moveBlocks, 100);
#game {
border: 5px solid black;
height: 500px;
width: 500px;
}
#bar {
background-color: black;
height: 8px;
width: 30px;
position: absolute;
margin-top: 480px;
}
.block {
background-color: red;
height: 10px;
width: 10px;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment