0
108
ViewsMovimiento de imagen infinito usando lienzo
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();Imagen del terreno
Pregunta
Estoy tratando de hacer un juego de t-rex. Quiero que el suelo se mueva constantemente cuando Dino (corredor) se mueva.
No es la función ctx.translate() la que mueve la imagen en mi código, pero el valor de la coordenada 'this.dx' de la Clase se mueve usando la función requestAnimationframe().
El Primer Código escrito como '/////2' no mueve el suelo indefinidamente.
Un código de solución escrito como '/////1', pero no funcionó.
¿Cómo puedo implementar terrenos que se mueven indefinidamente?
1 answers
Answer question0
Encontré la respuesta yo mismo. Espero que esta pregunta ayude a quienes la leen.
Referencia: https://jongbeom-dev.tistory.com/109
Era un problema almacenar tanto como la parte donde la imagen de fondo desaparece en la variable de compensación y dibujar tanto como el valor de la coordenada correspondiente. //izquierda //derecha dividida en dos partes y dibujó una imagen de fondo.
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 ); }