dursk/index.html

## index.html
<!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>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css"]}

## script.js
// 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);

## styles.css
#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;
}
	<!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>
	// 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;
	}