精灵图像的起始方向不同

Different start off direction for sprite image

本文关键字：方向图像精灵更新时间：2023-09-26

目前，当我在画布上绘制精灵图像时，它会被绘制，但它会朝着相同的方向开始。以下是我的代码:

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

是否有可能开始在画布的中间，但在不同的方向，每次当我添加一个新的精灵图像?

您可以通过在构造函数中随机设置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;}
}