[英]Random moving position for sprite image
Currently when my sprite is moving on the canvas, it will only bounce off after hitting the side of the canvas. 目前,当我的精灵在画布上移动时,它只会在击中画布的一侧后反弹。 Is there a way to let my sprite change to another direction at random position on the canvas?
有没有办法让我的精灵在画布上的随机位置换到另一个方向?
Here is my code for the changing of direction and how it moves: 这是我改变方向及其移动方式的代码:
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;
}
};
One fairly simple option is to pick a random amount of time and have the fish change directions after that amount of time. 一个相当简单的选择是随机抽取一段时间,让鱼在这段时间后改变方向。 My first thought would be to use
setTimeout
. 我的第一个想法是使用
setTimeout
。 I noticed the comparison in your changeDirection
function was backward so I fixed that and set it to call itself after some random amount of time. 我注意到你的
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);
};
You can change how frequently they turn around by adjusting the time variable. 您可以通过调整时间变量来更改它们转动的频率。 Then you'll need to initialize the changeDirection loop when you add a new fish so
init
might look like this: 然后,当您添加新鱼时,您需要初始化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();
}
Also you don't want to change direction every frame so take the fish.changeDirection();
你也不想每帧都改变方向,所以拿
fish.changeDirection();
line out of your animate
function. 排除你的
animate
功能。
As a side note, you might consider making them change x and y directions independently or randomly instead of every time. 作为旁注,您可以考虑让它们独立或随机地改变x和y方向,而不是每次都改变。 This makes it look a more natural.
这使它看起来更自然。
var speedXSign = Math.random() < 0.5 ? 1 : -1;
var speedYSign = Math.random() < 0.5 ? 1 : -1;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.