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) 。
...等代碼...
terrain.animate（）。
}
function start（） {
...等代碼...
terrain = new Obstacle(landImage, 0, canvas. height - 20, 20000, 20）。)
update（）。
}
start()。
地形圖
問題
我正在嘗試制作一個T-rex游戲。我想讓地面在Dino（跑者）移動時不斷移動。
在我的代碼中，不是ctx.translate()函式移動了影像，而是使用 requestAnimationframe()函式移動了Class的'this.dx'坐標值。
寫成'/////2'的第一個代碼并沒有無限期地移動地面。
寫成'/////1'的解決方案代碼，但它沒有發揮作用。
如何實作土地的無限期移動？
uj5u.com熱心網友回復：
我自己找到了答案。
在偏移量變數中存盤盡可能多的背景影像消失的部分，并繪制盡可能多的相應坐標值，這是一個問題。 //left //right分為兩部分，并繪制了一個背景影像。
animate（） {
this.x = this.dx。
this.draw（）。
this.dx = gameSpeed;
if (offset > 2300) offset = 0;
else offset = this.dx。
}
draw（）{
//左
ctx.drawImage(
this.image。
2380 - offset,
0,
偏移量。
23,
0,
canvas.height - this.h。
偏移量。
this.h, offset, this.
);
// Right
ctx.drawImage(
this.image。
0,
0,
2380 - offset,
23,
偏移量。
canvas.height - this.h。
2380 - offset,
this.h.
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326131.html
標籤：