index.html:
<!DOCTYPE HTML>
<div id="game_area">
</div>
script.js:
function rand(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function generate(){
var level, size;
level = 1;
for(var i = level;i<level+level+1;i++){
var num = rand(1,10);
$("#game_area").append('<div class="num'+i+'"><p class="numValue'+i+'">'+num+'</p></div>');
size = rand(50,100);
margin = rand(1,104);
marginLeft = rand(1, 300);
$(".num" +i).css({
'width':size,
'height':size,
'border-radius':size + 1,
'margin-top':margin,
'margin-left':marginLeft,
'border':'1px solid #000',
'text-align': 'center',
'cursor': ' pointer'
});
$(".numValue").css({
'padding':rand(50,100)/5
});
}
}
css:
#game_area{
width: 700px;
height: 500px;
border:1px solid #ccc;
margin: 0 auto;
margin-top: 5px;
}
