Fayans tabanlı javascript oyunu - laggy kaydırma

Question

Javascript'te kiremit tabanlı bir oyun oluşturuyorum. Ben kesinlikle yeni başlıyorum. Plan, bu oyunu yapmaya çalışırken javascript öğrenmek. Ben neyin kötü Burada görebileceğiniz bir canlı önizleme için "oyun"

kaydırmak çalışıyorum zaman ciddi gecikmeli sorunlar yaşıyorum: http://iwansfactory.com/tycoon/index.html

Benim javascript bunları üretir ve bunlar parçası HTML şuna benzer: <div class="tiletype100" id="x0y0" style="left: 2151px; top: -540px;"></div>

css:

.tiletype2 { 
    z-index: 0; 
    position: absolute; 
    width: 600px; 
    height: 800px; 
    background-image: url("http://iwansfactory.com/tycoon/road2.png"); 
    background-repeat: no-repeat; 
} 

javascript kaydırma fonksiyonu şudur:

var right = document.documentElement.scrollLeft; 
var bottom = document.documentElement.scrollTop; 
var rightscrollvalue = 0; 
var bottomscrollvalue = 0; 

function rightenter() { 
    rightscrollvalue = 40; 
    scrollright(); 
} 

function leftenter() { 
    rightscrollvalue = -40; 
    scrollright(); 
} 

function rightout() { 
    rightscrollvalue = 0; 
} 

function scrollright() { 
    if (rightscrollvalue != 0) { 
    right = right + rightscrollvalue; 
    console.log(right); 
    window.scrollTo(right, bottom); 
    setTimeout(function() { 
     scrollright(); 
    }, 50); 
    } 
} 

function bottomenter() { 
    bottomscrollvalue = 40; 
    scrollbottom(); 
} 

function topenter() { 
    bottomscrollvalue = -40; 
    scrollbottom(); 
} 

function bottomout() { 
    bottomscrollvalue = 0; 
} 

function scrollbottom() { 
    if (bottomscrollvalue != 0) { 
    bottom = bottom + bottomscrollvalue; 
    console.log(bottom); 
    window.scrollTo(right, bottom); 
    setTimeout(function() { 
     scrollbottom(); 
    }, 50); 
    } 
} 

Answer 1

Tasarımınız, çoğunlukla saydam olan büyük örtüşen döşemeler kullanır. Bu, render yapmak için çok fazla CPU gücü gerektirir, böylece oyun laggy olur.

onlar olmak zorunda (böylece görüntünün her kenarında bir şeffaf olmayan piksel vardır) ve onlar doğru pozisyonda render olsun böylece büyük kaplamalar için uzaklıklar kullandıkça size fayans küçük, tıpkı büyük yapmak teklif .