Sveiki,
Iš neturėjimo ką veikti sugalvojau tokią nesąmonę - paspaudus kurs nors elemente atsiranda dar vienas kubas, o padėliojus keletą jų galima paspausti enter ir pamatyti kaip jie krenta žemyn ir pranyksta ( dingsta ir HTML kodas )
Daugiau nėra ką ir kalbėti, todėl štai paprastas kodas
<!DOCTYPE html>
<html>
<head>
<title>
Krentantys kubai
</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('mousemove',function(e){
var block = $('#block');
block.css('left',e.pageX - 25).css('top',e.pageY - 25);
});
$('#body').on('click',function(e){
var hue = 'rgb('
(Math.floor(Math.random() * 256)) ','
(Math.floor(Math.random() * 256)) ','
(Math.floor(Math.random() * 256)) ')';
var block = $('#block').clone().removeAttr('id').addClass('drop').css('background',hue);
$(this).append(block);
});
$(document).on('keypress',function(key){
if(key.keyCode == 13)
{
var size = $(document).height();
$('.drop').each(function(){
var time = Math.floor((Math.random()*10000) 500);
$(this).animate({
top: size 50,
},time,'',function(){
$(this).after().remove();
});
});
}
});
});
</script>
</head>
<body id="body" style="overflow: hidden;">
<div id="block" style="width:50px; height:50px; background: #D3D3D3; position:absolute;"></div>
</body>
</html>
