タイルベースのJavaScriptのゲーム - ラグビーのスクロール

Question

私はjavascriptでタイルベースのゲームを作成しています。私は絶対に初心者です。 このゲームを作ろうとしているうちに、javascriptを学ぶ予定です。私のjavascriptのは、それらを生成

http://iwansfactory.com/tycoon/index.html

、彼らは一部を次のようになりますHTML：：私はいただきました！悪いあなたがここに見ることができるライブプレビューのために「ゲーム」

をスクロールしようとしているとき、私は深刻な遅れの問題が生じています <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のスクロール機能はこれです：

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

デザインでは、ほとんどが透明な大きなオーバーラップタイルが使用されます。これはレンダリングに多くのCPUパワーを必要とするため、ゲームが遅くなります。

私はあなたのタイルをもっと小さくするようにしなければならない（画像の各辺に不透明なピクセルがある）ように大きくし、大きなタイルのオフセットを使用して正しい位置にレンダリングするように提案します。