Creating a game in JQuery
Hello. I am new to JQuery and I am trying to create a simple game on a webpage. The game should be like this
The web page should display at random times images placed in random positions on the browser window. Each image lasts on the browser window for a short period of time and then it dissapears. If the user clicks an image before it dissapears, he/she gets a point. The game ends when the user wins 10 points.
So far I managed to display all elements on a page on random positions and then delete them and displaying them again. Right now I am having problems with the count of each click and I hope someone will help me.I will share the code with you hoping that you will help me.
javascript
-
- $(document).ready(function(){
- timeOut();
-
-
- });
- function timeOut(){
-
- setInterval(function(){deleteImages();createImages(); }, 3000);
-
- }
- function createImages(){
- var myarray=["img/Angel.gif","img/Angry.gif","img/BigSmile.gif",
- "img/Confused.gif","img/Cool.gif","img/Crying.gif",
- "img/Eyebrow.gif","img/Goofy.gif","img/Happy.gif"
- ];
- var count=0;
- var div;
- for (var i = 0; i < 9; i++) {
-
-
- var randPos = 0 + Math.floor(Math.random() * 500);
- this.img = document.createElement("img");
- div = document.createElement("div");
-
- $("div").attr("id","div"+i);
- var randNew = 0 + Math.floor(Math.random() * (5));
- var rand = 0 + Math.floor(Math.random() * (9-count));
- this.img.src = myarray[rand];
-
- $('#div'+i).css("left", randPosition());
- $('#div'+i).css("right",randPosition());
- $('#div'+i).css("top",randPosition());
- $('#div'+i).css("bottom",randPosition());
- $('#div'+i).css("position","relative");
- $('#div'+i).show();
- div.appendChild(this.img);
- $("body").prepend(div);
- myarray.splice(rand,1);
- count++;
-
- }
-
- //setTimeout(function(){ jQuery("div").hide(); }, 3000);
-
- }
-
- function deleteImages(){
-
- $("div").remove();
-
-
- }
-
- function randPosition(){
-
- return 0 + Math.floor(Math.random() * 500);
- }
-
- $(function() {
- $("div").click(function(e) {
-
- var offset = $(this).offset();
- var relativeX = (e.pageX - offset.left);
- var relativeY = (e.pageY - offset.top);
-
- alert("X: " + relativeX + " Y: " + relativeY);
-
- });
- });
css
- .active-div{
- position:relative;
- }
-
- .menu-div{
- position:absolute;
- top:0;
- right:0;
- display:none;
- }