Javascript 在JQuery中创建游戏

我试图在网页上创建一个简单的游戏

游戏应该是这样的：

网页应在随机时间显示放置在浏览器窗口随机位置的图像。 每个图像在浏览器窗口中持续很短时间，然后消失。 如果用户在图像消失之前单击图像，他/她会得到一分。 当用户赢得10分时，游戏结束。 到目前为止，我设法以随机位置显示页面上的所有元素，然后删除它们，然后再次显示它们

现在我对每次点击的次数都有问题

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

    });
});

---

使用递增变量，如下所示：

$(function() {
    var click_count = 0;
    $("div").click(function(e) {
        click_count++;
    });
});

---

单击图像时使用计数器和增量：

var count = 0;
count++; 

您还需要重新应用“单击”事件，因为您正在重新创建新元素，而不是移动已创建的元素：

称之为：

    $("div").click(function(e) {

      var offset = $(this).offset();
      var relativeX = (e.pageX - offset.left);
      var relativeY = (e.pageY - offset.top);

    });

在createImages完成如下功能后：

var计数=0； 风险值持有人； $document.readyfunction{ 超时； }; 函数addOnClicks{ $div.on'click'，函数E{ var offset=$this.offset； var relativeX=e.pageX-offset.left； var relativeY=e.pageY-offset.top； 计数++； 如果计数>=10 { 删除图像； 票据持有人； 游戏结束； } }; } 函数超时{ holder=setIntervalfunction{deleteImages；createImages；addOnClicks；}，3000； } 函数createImages{ var myarray=[img/angle.gif，img/angle.gif，img/BigSmile.gif， img/fuzzle.gif，img/Cool.gif，img/Crying.gif， img/眉毛.gif，img/Goofy.gif，img/Happy.gif ]; var计数=0； var-div； 对于变量i=0；i<9；i++{ var randPos=0+Math.floorMath.random*500； this.img=document.createElementimg； div=document.createElementdiv； $div.attrid，div+i； var randNew=0+Math.floorMath.random*5； var rand=0+Math.floorMath.random*9-计数； this.img.src=myarray[rand]； $'div'+i.cssleft，randPosition； $'div'+i.cssright，randPosition； $'div'+i.csstop，随机位置； $'div'+i.cssbottom，randPosition； $'div'+i.cssposposition，相对； $'div'+i.show； div.appendChildthis.img； $body.prependdiv； myarray.Rand，1； 计数++； } //setTimeoutfunction{jQuerydiv.hide；}，3000； } 函数删除图像{ $div.remove； } 功能位置{ 返回0+Math.floorMath.random*500； } .现役部队{ 位置：相对位置； } .菜单部{ 位置：绝对位置； 排名：0； 右：0； 显示：无； }

---

更新了我的答案以解决增量问题，并解决了未应用的单击事件。为什么要显示单击元素的位置？我不需要那个。当计数达到10时，我需要一种结束游戏的方法。@dres这是你的代码。。。。lol。我告诉你如何解决点击问题，因为你的图像都不可点击，还告诉你如何实现计数器。你有警报在那里，我只是没有删除它。@dres修复了，在游戏结束时增加了计数。点击图像10次，游戏结束。@dres增加了功能，不仅可以说放弃了，还可以停止你设定的间隔，方法是在holder中按住间隔。非常感谢！我将在大约5分钟内接受答案，系统不会让我更快。再次感谢你

    $("div").click(function(e) {

      var offset = $(this).offset();
      var relativeX = (e.pageX - offset.left);
      var relativeY = (e.pageY - offset.top);

    });