精灵图像的随机移动位置

Random moving position for sprite image

本文关键字：移动 位置 随机 图像 精灵      更新时间：2023-09-26

目前，当我的精灵在画布上移动时，它只会在击中画布的一侧后反弹。是否有办法让我的精灵在画布上的随机位置改变到另一个方向?

这是我的代码改变方向和它如何移动:

Fish.prototype.changeDirection = function () {
    speedXSign = this.speedX > 0 ? 1 : -1;
    speedYSign = this.speedY > 0 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 2);
    this.speedY = speedYSign * (1 + Math.random() * 2);
};
Fish.prototype.move = function () {
    this.animIndex++;
    if ( this.animIndex == animFrames.length) this.animIndex = 0;
    this.xPos += this.speedX;
    if ((this.xPos + this.frameWidth * this.frameScale / 2) >= canvas.width && this.speedX > 0 || 
        (this.xPos - this.frameWidth * this.frameScale / 2) <= 0 && this.speedX <= 0) {
        this.speedX = -this.speedX;
    }
    this.yPos += this.speedY;
    if ((this.yPos + this.frameHeight * this.frameScale / 2) >= canvas.height && this.speedY > 0 || 
        (this.yPos - this.frameHeight * this.frameScale / 2) <= 0 && this.speedY <= 0) {
        this.speedY = -this.speedY;
    }
};

一个相当简单的选择是随机选择一段时间，让鱼在这段时间后改变方向。我的第一个想法是用setTimeout。我注意到你的changeDirection函数的比较是向后的，所以我修复了这个问题，并将其设置为在一些随机的时间后调用自己。

Fish.prototype.changeDirection = function () {
    var me = this;
    var speedXSign = this.speedX < 0 ? 1 : -1;
    var speedYSign = this.speedY < 0 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 2);
    this.speedY = speedYSign * (1 + Math.random() * 2);
    var time = 1000 + 2000*Math.random();
    setTimeout(function() {me.changeDirection()}, time);
};

你可以通过调整时间变量来改变它们旋转的频率。然后，当你添加一条新鱼时，你需要初始化changeDirection循环，这样init可能看起来像这样:

function init() {
    frameWidth = imgFish.width / frameCount ; 
    frameHeight = imgFish.height ; 
    document.getElementById("button").onclick = function() {
        // create another fish using the Fish class
        var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
        // put this new fish into the fishes[] array
        fishes.push(anotherFish) ;
        // make it start changing directions
        anotherFish.changeDirection();
        // draw this new fish
        anotherFish.drawFish();
    }
    animate();
}

你也不想每一帧都改变方向，所以把fish.changeDirection();线从animate函数中去掉。

作为旁注，您可以考虑让它们独立或随机地改变x和y方向，而不是每次都改变。这使它看起来更自然。

    var speedXSign = Math.random() < 0.5 ? 1 : -1;
    var speedYSign = Math.random() < 0.5 ? 1 : -1;

编辑:JSFiddle

相关文章：