Question

我正在用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);
  }
}

Answer 1

您的设计使用大部分透明的大型重叠拼贴。这需要大量的CPU能力进行渲染，从而使游戏变得迟钝。

我建议你让你的瓷砖更小，就像它们必须一样大（所以在图像的每个边缘都有一个不透明的像素），并使用偏移来处理更大的瓷砖，这样它们就会被渲染到正确的位置。

基于平铺的javascript游戏 - 滞后滚动

1 个答案: