我正在用javascript创建一个基于瓷砖的游戏。我绝对是初学者。计划是在我尝试制作这个游戏的同时学习javascript。我在尝试滚动"游戏"时遇到严重的滞后问题

对于实时预览，您可以在此处看到不好的地方：http://iwansfactory.com/tycoon/index.html

我的javascript生成它们，它们的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);
  }
}