目前,当我在 Canvas 上绘制 Sprite 图像时,它将被绘制,但它将朝相同的方向开始。这是我的代码:
<!DOCTYPE html>
<html>
<button id="button" > Add a fish! </button>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fish Animation</title>
<style type='text/css'>
canvas {border:1px solid; background-color:#EFEFEF;}
</style>
<script type='text/javascript'>
window.onload=function(){
var canvas = document.getElementById('pondCanvas');
var context = canvas.getContext('2d');
polyFillRAFNow() ;
var frameCount = 8 ; // assumes all strip are on a single line
var frameWidth, frameHeight ; // what count is the frameWidth/frameHeight, not the image's.
var frameScale = 0.4 ; // scale to have a not-too-big fish
// one more level of complexity : we will run through the animation array
// with animIndex to get the frame.
// you can change the indexes like you want. Here I loop with a subtitle
// slow down before looping again.
var animIndex = 0 ;
var animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
// Other change : now xPos, yPos are the CENTER of the fish
var xPos = canvas.width / 2,
yPos = canvas.height / 2;
var speedX;
var speedY;
var speedXSign;
var speedYSign;
var fishes = [];
var anotherFish;
function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) {
this.image = imgFish;
this.xPos = canvas.width / 2;
this.yPos = canvas.height / 2;
this.speedX = speedX;
this.speedY = speedY;
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.frameCount = 8;
this.frameScale = 0.4;
this.animIndex = 0;
this.animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
}
Fish.prototype.changeDirection = function () {
speedXSign = this.speedX > 0 ? 1 : -1;
speedYSign = this.speedY > 0 ? 1 : -1;
this.speedX = speedXSign * (1 + Math.random() * 1.7);
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 / 1.8) >= canvas.width ||
(this.xPos - this.frameWidth * this.frameScale / 1.8) <= 0) {
this.speedX = -this.speedX;
}
this.yPos += this.speedY;
if ((this.yPos + this.frameHeight * frameScale / 1.8) >= canvas.height ||
(this.yPos - this.frameHeight * frameScale / 1.8) <= 0) {
this.speedY = -this.speedY;
}
};
Fish.prototype.drawFish = function () {
context.save();
// translate in the middle of where we'll draw the fish
context.translate(this.xPos, this.yPos);
// compute speed sign
var speedXSign = this.speedX > 0 ? 1 : -1;
var speedYSign = this.speedY > 0 ? 1 : -1;
// scale to have a mirror effect
// notice that at this point you could rotate rather than scale
// and the drawImage code would be ok.
context.scale(speedXSign, speedYSign);
var frameIndex = animFrames[this.animIndex];
context.drawImage(imgFish, frameIndex * this.frameWidth, 0, frameWidth, frameHeight,
-frameWidth * frameScale / 2, -this.frameHeight * this.frameScale / 2,
this.frameWidth * this.frameScale, this.frameHeight * this.frameScale);
context.restore();
};
function animate() {
// request another animation frame
requestAnimationFrame(animate);
// clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// move and redraw all fish in the fishes[] array
for (var i = 0; i < fishes.length; i++){
var fish = fishes[i];
fish.changeDirection();
fish.move();
fish.drawFish();
}
}
var imgFish = new Image();
imgFish.onload = init;
imgFish.src = 'http://dl.dropbox.com/s/4x14mv75dx7bmi5/FishStrip.png';
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) ;
// draw this new fish
anotherFish.drawFish();
}
animate();
}
function polyFillRAFNow() {
// requestAnimationFrame polyfill
var w = window,
foundRequestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || function (cb) {
setTimeout(cb, 1000 / 60);
};
window.requestAnimationFrame = foundRequestAnimationFrame;
}
}
</script>
</head>
<body>
<canvas id="pondCanvas" width="1024" height="600">
Canvas is not supported.
</canvas>
</body>
</html>
每次添加新的 Sprite 图像时,是否可以从 Canvas 中间开始但方向不同?
最佳答案
您可以通过在构造函数中随机设置 speedX 和 speedY 的符号来随机化新鱼的初始 X,Y 方向:
function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) {
this.image = imgFish;
this.xPos = canvas.width / 2;
this.yPos = canvas.height / 2;
this.speedX = speedX||(1 + Math.random() * 1.7);
this.speedY = speedY||(1 + Math.random() * 2);
this.frameWidth = frameWidth;
this.frameHeight = frameHeight;
this.frameCount = 8;
this.frameScale = 0.4;
this.animIndex = 0;
this.animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
// randomly change this fishes initial direction
if(Math.random()<0.50){this.speedX*=-1;}
if(Math.random()<0.50){this.speedY*=-1;}
}
关于javascript - Sprite 图像的不同起始方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24005979/