翻转 Sprite/Enemy p5.js JavaScript

Question

我一直在使用 p5.js 制作一个简单的小型平台游戏。我是编码新手，JavaScript 不知道如何将精灵的图像翻转到它行走的方向？

到目前为止我已经有了这个（如果它很乱我很抱歉，我还没有画完但你明白了）：

function enemy(x, y, range)
{
    this.x = x;
    this.y = y;
    this.range = range;
    
    this.currentX = x;
    this.inc = 1;
    
    this.update = function()
    {
        this.currentX += this.inc;
        
        if(this.currentX >= this.x + this.range)
            {
                this.inc = -1;   
            }
        else if(this.currentX < this.x)
            {
                this.inc = 1;
            }
    }
    
    this.draw = function()
    {
        this.update();
        
        fill(0, 0, 0);
        noStroke();
        ellipse(this.currentX, this.y, 40, 30);
        triangle(this.currentX + 15, this.y - 10, 
                 this.currentX + 50, this.y + 5, 
                 this.currentX + 15, this.y + 10);
        ellipse(this.currentX + 20, this.y, 20 ,20);
        ellipse(this.currentX + 15, this.y - 10, 15, 15);
    }
    
    this.checkContact = function(gc_x, gc_y)
    {
        var d = dist(gc_x, gc_y, this.currentX, this.y)
        
        if(d < 20)
            {
                return true;
            }
        return false;
    }
}

Answer 1

由于敌人只在X轴上移动，一个快速而肮脏的修复是根据构造的方向修改所述轴的所有偏移值：

function enemy(x, y, range)
{
    this.x = x;
    this.y = y;
    this.range = range;
    
    this.currentX = x;
    this.inc = 2;
    this.direction = 1  // new attribute
 
    this.update = function()
    {
        this.currentX += this.inc;
        
        if(this.currentX >= this.x + this.range)
            {
                this.inc = -2;
                this.direction = -1
            }
        else if(this.currentX < this.x)
            {
                this.inc = 2;
                this.direction = 1
            }
    }


    this.display = function()
    {
        this.update();

        fill(0, 0, 0);
        noStroke();
        ellipse(this.currentX, this.y, 40, 30);
        triangle(this.currentX + (this.direction*15), this.y - 10, 
                 this.currentX + (this.direction*50), this.y + 5, 
                 this.currentX + (this.direction*15), this.y + 10);
        ellipse(this.currentX + (this.direction*20), this.y, 20 ,20);
        ellipse(this.currentX + (this.direction*15), this.y - 10, 15, 15);
    }
}

let e = new enemy(100, 50, 200)

const setup = function(){
  createCanvas(400, 150)
}

const draw = function(){
  background(200)
  e.display()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>

翻转 Sprite/Enemy p5.js JavaScript

Flipping a Sprite/Enemy p5.js JavaScipt

javascript

sprite

p5.js