使用 canvas 进行无限图像移动

Question

class Obstacle {
  constructor(image, x, y, w, h) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    this.dx = gameSpeed;
  }

  animate() {
    this.x += this.dx;
    this.draw();
    this.dx = gameSpeed; 
  }

  draw() {

//////1
    var pat = ctx.createPattern(landImage, "repeat-x");
    ctx.fillStyle = pat;
    ctx.fillRect(this.x, this.y, this.w, this.h);
//////2
    ctx.drawImage(pat, this.x, this.y, this.w, this.h);
  }
}

function update() {
  requestAnimationFrame(update);
  ctx.clearRect(0, 0, canvas.width, canvas.height);  

    ... etc code...

  terrain.animate();
}

function start() {

    ...etc code...

  terrain = new Obstacle(landImage, 0, canvas.height - 20, 20000, 20);
  update();
}
start();

地形图

问题

我正在尝试制作霸王龙游戏。我想让Dino（跑步者）移动时地面不断移动。

在我的代码中移动图像的不是ctx.translate()函数，而是使用requestAnimationframe()函数移动Class的'this.dx'坐标值。

写为'/////2'的第一个代码不会无限期地移动地面。
一个解决方案代码写成'/////1'，但是没有用。

如何实现无限移动的土地？

Answer 1

我自己找到了答案。希望这个问题对阅读的人有所帮助

Reference : https://jongbeom-dev.tistory.com/109

将背景图片消失的部分存储到偏移变量中并绘制相应的坐标值，这是一个问题。 //left //right分成两部分画了背景图

  animate() {
    this.x += this.dx;
    this.draw();
    this.dx = gameSpeed;
    //그림의 최대길이는 2380 * 23 (px)
    if (offset > 2300) offset = 0;
    else offset += this.dx;
  }

  draw() {
    // left
    ctx.drawImage(
      this.image,
      2380 - offset,
      0,
      offset,
      23,
      0,
      canvas.height - this.h,
      offset,
      this.h
    );
    // right
    ctx.drawImage(
      this.image,
      0,
      0,
      2380 - offset,
      23,
      offset,
      canvas.height - this.h,
      2380 - offset,
      this.h
    );
  }

使用 canvas 进行无限图像移动

Infinite image movement using canvas

javascript

canvas

image

drawimage