Skip to content

Instantly share code, notes, and snippets.

@dursk
Created May 30, 2017
Embed
What would you like to do?
Exported from Popcode. Click to import: https://popcode.org/?gist=b1b68648b8fe8f9a2f2f36510bb928b1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="score">Score: <span id="score_value">0</span></div>
<div id="game">
<div id="bar"></div>
</div>
<p>Bar left position: <span id="bar_info"></span></p>
<p>Blocks info:</p> <p id="blocks_info"></p>
</body>
</html>
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css"]}
// Move the bar left and right with the keys
$("body").keydown(function(event) {
var bar_position = $("#bar").offset().left;
if (event.which === 37 && bar_position > 13) {
$("#bar").css("left", bar_position - 10);
$("#bar_info").text(bar_position - 10); // show the bar left position
} else if (event.which === 39 && bar_position < 483) {
$("#bar").css("left", bar_position + 10);
$("#bar_info").text(bar_position + 10); // show the bar right position
} else {
return;
}
});
// This array stores the IDs for all the blocks so we can keep track of them
var all_blocks = [];
// Generate a random block ID, eg B12345
function generateRandomBlockId() {
var randomNumber = Math.floor(Math.random() * 10000);
return "B" + randomNumber;
}
// Generate a random left offset
function generateRandomLeftOffset() {
return Math.floor(Math.random() * 470)+13;
}
// Create a block as a div, set a random ID, add the ID to the all_blocks array
function createBlock() {
var randomBlockId = generateRandomBlockId(); // eg A12345
var randomLeftOffset = generateRandomLeftOffset(); // eg. 73
// set the block's left position and give it an ID
$("#game").append("<div id='" + randomBlockId + "' class='block' style='left:" + randomLeftOffset + "px'></div>");
// save the ID in the array so we can remember it for later
all_blocks.push(randomBlockId);
}
var score = 0;
function increaseScore(){
score = score + 1;
$("#score_value").html(score);
}
function detectCollision(block) {
var blockLeftEdge = block.offset().left;
var blockRightEdge = blockLeftEdge + 10;
var barLeftEdge = $("#bar").offset().left;
var barRightEdge = barLeftEdge + 30;
return blockLeftEdge <= barRightEdge && blockRightEdge >= barLeftEdge;
}
// For each block we have already created, increase it's top offset so it falls
function makeBlocksFall() {
$("#blocks_info").text('makeBlocksFall() called at '+new Date()); // this is just to clear the blocks info <p>
var blocksToDelete = [];
// Go through all the blocks we have created
for(var count=0; count<all_blocks.length; count++) {
var block = $("#" + all_blocks[count]); // select the block div
var top = block.offset().top; // get the current top position
if (top === 543 && detectCollision(block)) {
increaseScore();
block.remove();
blocksToDelete.push(all_blocks[count]);
} else if(top < 560) {
block.css("top", (top+5));
// set the blocks info text
$("#blocks_info").append('<br/>[setting top poisition of block ID ' + all_blocks[count] + ' to '+(top+5)+']');
} else {
block.remove();
blocksToDelete.push(all_blocks[count]);
}
}
for(var index = 0; index < blocksToDelete.length; index ++) {
all_blocks.splice(all_blocks.indexOf(blocksToDelete[index]), 1);
}
}
// Call the functions to create the blocks and make them fall
function doBlocks() {
createBlock();
makeBlocksFall();
}
// Start the game
window.setInterval(doBlocks, 200);
#game {
border: 5px solid black;
height: 500px;
width: 500px;
}
#score{
margin-top: 30px;
margin-bottom: 20px;
margin-left: 50px;
}
#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