精灵图像的随机移动位置

Posted

技术标签:

【中文标题】精灵图像的随机移动位置【英文标题】:Random moving position for sprite image 【发布时间】:2014-08-14 05:09:58 【问题描述】:

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

这是我改变方向及其移动方式的代码:

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;
    
;

【问题讨论】:

【参考方案1】:

一个相当简单的选择是随机选择一段时间,然后让鱼在这段时间后改变方向。我的第一个想法是使用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();

此外,您不想在每一帧都改变方向,因此请从您的 animate 函数中取出 fish.changeDirection(); 行。

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

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

编辑:JSFiddle

【讨论】:

@Bernard 如果您需要更改应该是一个单独问题的速度,Zacru 已经很好地回答了您当前的问题,并且应该得到一个赞成票,并且接受我的投票 +1 做得很好。跨度>

以上是关于精灵图像的随机移动位置的主要内容,如果未能解决你的问题,请参考以下文章

在 Sprite Kit 中永远随机移动精灵的最佳方法

按键精灵 怎么让鼠标移动到固定位置

使用 SpriteKit 如何以随机但一致的速度将精灵节点移动到一个点

按键精灵,8张图里会随机出现某几张,出现1张,2张,三张,的时候都有,怎么写能找到随机出现的图。

SpriteKit MoveToX:当前状态的持续时间

JS:飞行随机物体(图像)