Başka bir div pozisyonuna bağlı olarak div pozisyonu nasıl ayarlanır?</p> <pre><code><div class="snake"> <div class="body"></div> </div> </code></pre> <p>işlevi aşağıda, son bloğunu alır kaldırır ve üstündeki koymak için bir tane oluşturur:

Question

Bu kodun html parçasıdır. Ben başın pozisyonuna yılan pozisyon eqal ayarlamak çalıştı aşağıda kod ile

//The snake turns right 
var turnRight = function() { 
    blocks_moved++; 
    $('.snake').children().last().remove(); 
    $('<div></div>').addClass('body').prependTo('.snake').css('top', 0 + '%').css('left', xPos * blocks_moved * 1.2 + '%'); 
    $('.snake').children().removeClass('head'); 
    $('.snake').children().first().addClass('head'); 
...more code 

yüzden her zaman yeni bir blok kafasını bir blok tarafından yılan hamle olur.

//Set the snake position equal to head's position 
var headPos = $('.snake').children().first().position(); 
    $('.snake').position(headPos); 

     if (blocks_moved === length) { 
      blocks_moved === 0; 
     } 
    } 

ben fonksiyonunu yerine turnRight(); baş ve vücut hareket ama yılan kalır diyoruz

. Ayrıca .css() yöntemiyle denedim, ancak başarılı olmadım. Bunu yapmak için başka yollar var mı?

Bu sorunu .offset() ve konumlandırma ile çözdüm. İşte canlı bir örnek: https://jsfiddle.net/dusth7gc/3/

Answer 1

, bu sorunu .offset() ve konumlandırma ile çözmüştür.

var turnRight = function() { 

    $('.body').css('background-color', 'gray'); 

    headPos_x = ($('.head').offset().left/$(window).width() * 100); 
    headPos_y = ($('.head').offset().top/$(window).height() * 100); 

    $('<div></div>').addClass('body').prependTo('.snake').css('top', headPos_y + '%').css('left', headPos_x + helper_width * 1.2 + '%'); 

      $('.snake').children().last().remove(); 
      $('.snake').children().removeClass('head'); 
      $('.snake').children().first().addClass('head'); 



      $('.helper').css('top', $('.head').offset().top + 'px').css('left',$('.head').offset().left + 'px'); 

     if(collision($('.helper'), $('.meal')) === true) { 
      $('.meal').remove(); 
      $('<div></div>').addClass('body').css('background-color', 'transparent').appendTo('.snake'); 
      foodCreate(); 
     } 
} 

İşte canlı örnektir: https://jsfiddle.net/dusth7gc/3/.