• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
اجرای چند باره یک تابع بدون اختیار
#1
سلام
دوستان یه پروژه دارم و باید یه بازی پارل طراحی میکردم اما یه مشکل خوردم اونم اینه که وقتی کاربر روی گزینه آپلود تصویر دلخواه کلیک میکنه و یه عکس انتخاب میکنه و وسط بازی دلش میخواد عکس رو عوض کنه اونوقت تابع شمارنده تایمر دو بار و اگر n بار بخواد وسط بازی این کار رو انجام بده n بار تابع تکرار میشه و تایمر کلا بهم میریزه
میشه کد JSم رو بررسی کنید ببینید چرا داره این اتفاق میوفته؟؟؟؟؟؟؟

کد:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Puzzle Game</title>
   </head>
<body>
   <div class="main">
       <div class="container" id="cont">
           <div class="row">
               <div class="col-7 col-sm-7 mr-auto justify-content-center container-custom" id="main">
                   <h1>Puzzle Game</h1>
                   <span id="upload">آپلود تصویر دلخواه</span>
                   <input type="file" id="uploadfile">
                   <span id="assumption">استفاده از تصاویر پیش فرض</span>
               </div>
           </div>
       </div>
   </div>
</body>
</html>


کد:
$(document).ready(function () {

   var time;
   var numberGame = 0;
   var s = 0;
   var m = 0;
   var id_span;


   //------------------ اتفاقات مشترک ------------------

   $("#main span").each(function () {
       $(this).click(function () {
           id_span = $(this).attr('id');
           if (id_span == "assumption"){
               assumption();
           }else if(id_span == "upload"){
               upload();
           }
           $("#main span").animate({
               width: 150,
               height: 50
           });
           $(".container-custom").css("margin","0 auto 10px auto");
           $("#main h1").css({"font-size":"50px","margin":"10px auto"});
           $("#upload").css({"font-size":"10px","line-height":"50px"});
           $("#assumption").css({"font-size":"10px","line-height":"50px"});
       })
   });

   function myClear(){
       setTimeout(function () {
           clearInterval(time);
       },900)
   }

   function timer(){
       s++;
       if(s > 59){
           m++;
           s=0;
       }
       $('#timer').text(m+" : "+s);
   }

   //------------------ تابع ایجاد div های مورد نیاز ------------------

   function createContainer(url_pic) {
       $("#cont").append("<div class='row' id='puzzle'><div class='col-8'><div class='pic_puzzle'></div></div><div class='col-4'><div class='pic_main'></div><div class='counter'></div> </div> </div>");
       $(".pic_puzzle").append("<div class=\"pic_sec\" id=\"sec1\"></div>" +
           "<div class=\"pic_sec\" id=\"sec2\"></div>" +
           "<div class=\"pic_sec\" id=\"sec3\"></div>" +
           "<div class=\"pic_sec\" id=\"sec4\"></div>" +
           "<div class=\"pic_sec\" id=\"sec5\"></div>" +
           "<div class=\"pic_sec\" id=\"sec6\"></div>" +
           "<div class=\"pic_sec\" id=\"sec7\"></div>" +
           "<div class=\"pic_sec\" id=\"sec8\"></div>");

       numberGame = 1;

       $(".pic_sec").css({"background":"url("+url_pic+")","background-size":"640px 360px"});
       $(".pic_main").append("<img src='"+url_pic+"' width='280' height='157'>");
       $(".counter").append("<p id='timer'>0 : 0</p>");
       $(".counter").append("<p id='moves'>0</p>");
   }


   //------------------ تابع بازی ------------------

   function startGame() {
       var tileClicked = false;
       var firstTileClicked;
       var secondTileClicked;
       var topPosFir = 0;
       var leftPosFir = 0;
       var topPosSec = 0;
       var leftPosSec = 0;
       var shuffle = Math.floor((Math.random() * 4) + 1);
       var moves = 0;
       function shuffleTiles(){
           if(shuffle == 1){
               $('#sec1').css({top: 180, left: 160});
               $('#sec2').css({top: 0, left: 480});
               $('#sec3').css({top: 180, left: 0});
               $('#sec4').css({top: 0, left: 0});
               $('#sec5').css({top: 180, left: 320});
               $('#sec6').css({top: 180, left: 480});
               $('#sec7').css({top: 0, left: 160});
               $('#sec8').css({top: 0, left: 320});
           } else if(shuffle == 2){
               $('#sec1').css({top: 0, left: 480});
               $('#sec2').css({top: 180, left: 0});
               $('#sec3').css({top: 180, left: 320});
               $('#sec4').css({top: 0, left: 0});
               $('#sec5').css({top: 0, left: 160});
               $('#sec6').css({top: 180, left: 480});
               $('#sec7').css({top: 0, left: 320});
               $('#sec8').css({top: 180, left: 160});
           } else if(shuffle == 3){
               $('#sec1').css({top: 0, left: 0});
               $('#sec2').css({top: 180, left: 0});
               $('#sec3').css({top: 180, left: 480});
               $('#sec4').css({top: 0, left: 320});
               $('#sec5').css({top: 180, left: 320});
               $('#sec6').css({top: 180, left: 160});
               $('#sec7').css({top: 0, left: 160});
               $('#sec8').css({top: 0, left: 480});
           } else if(shuffle == 4){
               $('#sec1').css({top: 180, left: 480});
               $('#sec2').css({top: 0, left: 320});
               $('#sec3').css({top: 180, left: 0});
               $('#sec4').css({top: 180, left: 160});
               $('#sec5').css({top: 180, left: 320});
               $('#sec6').css({top: 0, left: 160});
               $('#sec7').css({top: 0, left: 0});
               $('#sec8').css({top: 0, left: 480});
           }
       }

       setTimeout(function(){
           shuffleTiles();
           time = setInterval(timer,1000);
       }, 1000);

       //  play the game

       $('.pic_sec').click(function(){

           if(tileClicked == false){  //  if no tile is clicked

               //  set variables
               firstTileClicked = $(this).attr('id');
               topPosFir = parseInt($(this).css('top'));
               leftPosFir = parseInt($(this).css('left'));

               //  highlight tile
               $(this).addClass('glow');
               tileClicked = true;

           } else{  //  if you've clicked a tile

               //  set variables
               secondTileClicked = $(this).attr('id');
               topPosSec = parseInt($(this).css('top'));
               leftPosSec = parseInt($(this).css('left'));

               //  animations
               $('#' + firstTileClicked).css({'top' : topPosSec , 'left' : leftPosSec});
               $('#' + secondTileClicked).css({'top' : topPosFir , 'left' : leftPosFir});

               //  remove the glow and reset the first tile
               $('.pic_sec').removeClass('glow');
               tileClicked = false;

               //  test for the win

               setTimeout(function(){
                   if(
                       $('#sec1').css('left') == '0px' && $('#sec1').css('top') == '0px' &&
                       $('#sec2').css('left') == '160px' && $('#sec2').css('top') == '0px' &&
                       $('#sec3').css('left') == '320px' && $('#sec3').css('top') == '0px' &&
                       $('#sec4').css('left') == '480px' && $('#sec4').css('top') == '0px' &&
                       $('#sec5').css('left') == '0px' && $('#sec5').css('top') == '180px' &&
                       $('#sec6').css('left') == '160px' && $('#sec6').css('top') == '180px' &&
                       $('#sec7').css('left') == '320px' && $('#sec7').css('top') == '180px' &&
                       $('#sec8').css('left') == '480px' && $('#sec8').css('top') == '180px'
                   ){
                       clearInterval(time);
                       $('.pic_puzzle').addClass('glow-2');
                   }
               }, 1000);

               //  increment the move counter
               moves++
               $('#moves').text(moves);

           }
       });
   }


   //------------------ اگر روی تصاویر پیش فرض کلیک شد ------------------

   function assumption(){
       $("#puzzle").remove();
       $("#cont").append('<div id="select_pic"></div>');
       setTimeout(loadPage,1000);
       function loadPage() {
           $.ajax({url: "assumption.html", success: function(result){
                   $("#select_pic").html(result);
                   $(".select-pic img").click(function () {
                       var url_pic = $(this).attr("src");
                       if (numberGame == 1) {
                           $("#puzzle").remove();
                           numberGame = 0;
                           myClear();
                           s = 0;
                           m = 0;
                       }

                       createContainer(url_pic);
                       startGame();
                   });
               }});
       }
   }

   //------------------ اگر روی آپلود تصویر دلخواه کلیک شد ------------------

   function upload() {
       $("#uploadfile").click();

       $('input[type="file"]').change(function(select){
           // alert("kjhgf");
           if (numberGame == 1) {
               $("#puzzle").remove();
               numberGame = 0;
               // alert("sdfghjkl");
               myClear();
               s = 0;
               m = 0;
           }
           $("#select_pic").remove();
           var fileType = select.target.files[0].type;
           var fileAddress = URL.createObjectURL(select.target.files[0]);
           se
           if (fileType == "image/jpeg" || fileType == "image/png" || fileType == "image/jpg"){
               createContainer(fileAddress);
               startGame();
           }else{
               alert("فایل با فرمت صحیح انتخاب نشده است. \n فایل مجاز عکس انتخاب کنید.");
           }
       });
   }


})
  پاسخ
تشکر شده توسط :
#2
این تیکه کدت اصلن خوب نیست:
کد پی‌اچ‌پی:
$("#main span").each(function () {
 
       $(this).click(function () { 

شما دوتا id داری و باید برای هرکدوم یه فانکشن بنویسی.
اینکه توی فورایچ بذاری اصلن منطقی نیست.
فکر کنم همین حل بکنه
همه جوره اش رو داریم ظاهرن
  پاسخ
تشکر شده توسط : ayoubsys


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان