Создание игры в JQuery

Question

Я пытаюсь создать простую игру на веб-странице.

Игра должна быть такой:

1. Веб-страница должна отображаться в случайные моменты времени изображений, размещенных в случайных местах на окне браузера.
2. Каждое изображение длится в окне браузера в течение короткого периода времени, а затем оно исчезает.
3. Если пользователь нажимает изображение до его исчезновения, он/она получает очко.
4. Игра заканчивается, когда пользователь выигрывает 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); 

    }); 
}); 

CSS

.active-div{ 
    position:relative; 
} 

.menu-div{ 
    position:absolute; 
    top:0; 
    right:0; 
    display:none; 
} 

Answer 1

использовать счетчик и приращению при нажатии изображение:

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 count = 0; 
 
var holder; 
 

 
$(document).ready(function(){ 
 
    timeOut(); 
 
}); 
 

 
function addOnClicks() { 
 
    $("div").on('click',function(e) { 
 

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

 
     count++; 
 
     if(count >= 10) 
 
     { 
 
      deleteImages(); 
 
      clearInterval(holder); 
 
      alert("Game Over"); 
 
     } 
 
    }); 
 
} 
 

 
function timeOut(){ 
 

 
    holder = setInterval(function(){deleteImages();createImages();addOnClicks(); }, 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); 
 
}

.active-div{ 
 
position:relative; 
 
} 
 

 
.menu-div{ 
 
position:absolute; 
 
top:0; 
 
right:0; 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Используйте порядковым переменную следующим образом:

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