Retro_1477,
Зеркально повернуть это метод
.scale() с отрицательными значениями, он же .setTransform() и .transform() c 1-м и 4-м аргументами.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flip horizontally & vertically</title>
</head>
<body>
<canvas id="game" width="500" height="250" style="outline:1px solid black"></canvas>
<script>
const ctx = document.getElementById('game').getContext('2d');
const SpriteSheet = {
load(map, onload) {
this.map = map;
this.image = new Image;
this.image.onload = onload;
this.image.src = 'https://i.imgur.com/EVUfjH2.png';
},
draw(ctx, sprite, x, y, frame, flip) {
let s = this.map[sprite],
a = flip.x ? -1 : 1,
d = flip.y ? -1 : 1,
e = flip.x ? x + s.w : x,
f = flip.y ? y + s.h : y;
ctx.save();
ctx.setTransform(a, 0, 0, d, e, f);
ctx.drawImage(this.image, s.x + frame * s.w, s.y, s.w, s.h, 0, 0, s.w, s.h);
ctx.restore();
}
};
const Animation = {
objects: [],
frame(timestamp) {
if (!this.previous) this.previous = timestamp;
let elapsed = timestamp - this.previous;
this.update(elapsed / 1000);
this.draw(1000 / elapsed);
this.previous = timestamp;
window.requestAnimationFrame(this.frame);
},
start() {
this.frame = this.frame.bind(this);
window.requestAnimationFrame(this.frame);
},
update(elapsed) {
for (let obj of this.objects) obj.update(elapsed);
},
draw(fps) {
ctx.clearRect(0, 0, 500, 250);
ctx.fillText(fps, 5, 10);
for (let obj of this.objects) obj.draw();
}
};
class Cat {
constructor(sprite, x, y, fx, fy, frame) {
this.x = x;
this.y = y;
this.sprite = sprite;
this.w = SpriteSheet.map[sprite].w;
this.h = SpriteSheet.map[sprite].h;
this.flip = {};
this[fx]();
this[fy]();
this.frame = frame;
this.subFrame = 4 * frame;
}
left() {
this.flip.x = true;
}
right() {
this.flip.x = false;
}
up() {
this.flip.y = false;
}
down() {
this.flip.y = true;
}
update(dt) {
this.frame = Math.floor(this.subFrame++ / 4);
if (this.subFrame >= 32) this.subFrame = 0;
}
draw() {
SpriteSheet.draw(ctx, this.sprite, this.x - this.w / 2, this.y - this.h / 2, this.frame, this.flip);
}
}
SpriteSheet.load({ bluecat: { x: 0, y: 0, w: 160, h: 80, frames: 8 } }, () => { Animation.start() });
Animation.objects.push(
new Cat('bluecat', 100, 60, 'right', 'up', 0),
new Cat('bluecat', 260, 60, 'left', 'up', 2),
new Cat('bluecat', 100, 160, 'right', 'down', 4),
new Cat('bluecat', 260, 160, 'left', 'down', 6));
</script>
</body>
</html>
