javascript - Sprite 图像的不同起始方向

标签 javascript arrays html5-canvas sprite-sheet

目前,当我在 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/

相关文章:

javascript - 动画和 Wow JS

javascript - 在 Blazor Web Assembly 应用程序中显示本地计算机摄像头源

javascript - 使用 jquery 添加 CSS

java - Java 数组参数声明语法 "..."是如何工作的?

Javascript RegExp 总是失败

java - Android 批量插入或忽略 JSONArray

python - 如何在对数组应用花式索引过滤器的同时将数组的一列放入新数组中?

javascript - p5.j​​s 3D 草图中的背景图像

javascript - HTML5 从中心点旋转图像

javascript - Three.js 从子对象获取父对象(一组)