Changing a simple jquery game
I am trying to change this game, right now it displays 9 images in random positions and the user has to click on them and when it reaches 10 clicks the game ends. I only want to show one image. I will share the original function and the function I modified it.
Original
function createImages(){
var myarray= ["img/img1.gif","img/img2.gif","img/img3.png",
"img/img4.gif","img/img5.gif","img/img6.gif",
"img/img7.gif","img/img8.png", "img/img9.jpg"];
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++;
}
}
After I changed it
function createImages(){
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");
var randNew = 0 + Math.floor(Math.random() * (5));
var rand = 0 + Math.floor(Math.random() * (9-count));
this.img.src = "img/img1.gif";
$('#div').css("left", randPosition());
$('#div').css("right", randPosition());
$('#div').css("top", randPosition());
$('#div').css("bottom",randPosition());
$('#div').css("position","relative");
$('#div').show();
div.appendChild(this.img);
$("body").prepend(div);
count++;
}
}
The problem is now it appears the same image 10 times, I want it to appear only once and then disappear and reappear. Can anyone help me fix this issue.
If I have nothing to ask for, I would like to place this image in a div so that it does not appear on the whole page.
function randPosition() {
return 0 + Math.floor(Math.random() * 500);
}
source to share
In a function createImages()
, you have a loop that adds the image 10 times:
for (var i = 0; i < 9; i++) {
...
}
Delete it and it will only do it once. You can also simplify the code by removing some random variables that are not used.
Also, these two sentences are wrong. The first one creates div
in a variable named as well div
. The second is a selector for all elements div
, you are not referencing the newly created one as I think you expect.
div = document.createElement("div");
$("div").attr("id","div");
You need to create a jQuery object with a newly created div to work with it:
var div = document.createElement("div");
$div = $(div); // << Create jQuery object wrapping the new div
$div.css("left", randPosition());
Edited function:
function createImages(){
var div = document.createElement("div");
$div = $(div);
$div.css("left", randPosition());
$div.css("right", randPosition());
$div.css("top", randPosition());
$div.css("bottom",randPosition());
$div.css("position","relative");
$div.show();
var img = document.createElement("img");
img.src = "http://dummyimage.com/25x25/4F4/000.png";
div.appendChild(img);
$("body").prepend(div);
}
EDIT: I created a JSFiddle for you to play with: http://jsfiddle.net/6aLh9qam/3/
source to share