CODEWITHSUNDEEP
jqueryhtml
Rodrigo Lessa
Rodrigo Lessa

Reputation: 59

Trouble adding double the divs i already have

Okay so I am creating a game for fun. The game involves a 5 second timer and divs shapped like boxes. the first round you start off with 1 div the purpose is for you to click on that div before the timer runs out. if you pass you go to the next level which adds double the boxes so level 2 you have 2 boxes level 3 4 boxes and so on. I am having trouble creating always double the length of the div. I dont have much code because nothing ive tried has worked. here is the jsfiddle:

http://jsfiddle.net/JZdkQ/

<!doctype html>
<html>
<head>
<title>jQuery Project: An exploding game</title>
<meta charset="utf-8">
<style>
body, html {
width: 960;
height: 500%;
}
div.box {
position: relative;
width: 100px;
height: 100px;
background-color: orange;
}
div.exploding {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>


</head>
<body>
</body>
</html>

Upvotes: 2

Views: 75

Answers (3)

MyItchyChin
MyItchyChin

Reputation: 14041

Your javascript...

setTimeout(function(){$("body").append("<div class='box'></div>").length() *2;}, 5000);

is saying...

After 5 seconds get <body/> and append a <div class='box'/> to it, get the number of divs we just appended (i.e. 1) and multiply that number by 2 then discard the result.

Use this...

setInterval(function(){$(".box").clone().appendTo("body");}, 5000);

it says...

Every 5 seconds, get all the elements of class box, make a copy of them, and append the copy to body.

http://jsfiddle.net/JZdkQ/2/

Upvotes: 1

Pierre
Pierre

Reputation: 430

Awesome! If I where you I would put the doubling length staff in a function, that I will call recursively.

Upvotes: 0

Brian Phillips
Brian Phillips

Reputation: 4425

Use setInterval rather than setTimeout. setInterval is used for events that happen repeatedly based on the time you set, while setTimeout happens once.

jsfiddle

Upvotes: 1

Related Questions