Question

我正在尝试修改这个游戏，现在它在随机位置显示9个图像，用户必须点击它们，当它达到10次点击时游戏结束。我想只出现一张图片。我将分享原始功能和我修改过的功能。

原始

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++;
    }
}

我修改后

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++;
    }
}

问题是现在它出现了10次相同的图像，我希望它只出现一次然后消失并再次出现。任何人都可以帮我解决这个问题。

如果要问我想把这个图片放在div中，那就不会出现在整个页面上了。

function randPosition() {
    return 0 + Math.floor(Math.random() * 500);
}

Answer 1

在createImages()函数中，您有一个循环，可以将图像添加10次：

for (var i = 0; i < 9; i++) {
   ...
}

删除它，它只会执行一次。您还可以简化代码，删除一些未使用的随机变量。

此外，这两句话并不正确。第一个在名为div的变量中创建div。第二个是所有div元素的选择器，您没有按照我的预期引用新创建的元素。

div = document.createElement("div");
$("div").attr("id","div");

您应该使用新创建的div创建一个jQuery对象来使用它：

var div = document.createElement("div");

$div = $(div);  // << Create jQuery object wrapping the new div
$div.css("left", randPosition());

编辑功能：

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);
}

编辑：我为您构建了一个JSFiddle，以便您可以使用它：http://jsfiddle.net/6aLh9qam/3/

修改一个简单的jquery游戏

1 个答案: