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

2019年7月27日 192次阅读

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

最佳答案 您的设计使用大多数透明的大型重叠瓷砖.这需要大量的CPU能力进行渲染,从而使游戏变得滞后.

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

点赞