javascript - HTML5 キャンバス: キャンバスの端に図形を描く

Question

キャンバス上にランダムな位置に四角形を描く基本的なゲームを作成していますが、キャンバスの境界からはみ出しているために形が途切れることがあります。キャンバスの反対側に正方形を描画する方法を説明できる人はいますか (小惑星で行われる方法と同様)。私が思いついた検索は役に立ちませんでした。どんな助けでも大歓迎です。

Answer 1

OK、これで解決したと思います。基本的に、このコードはキャンバス内にある間だけ正方形を描画し、キャンバスを離れると、どの境界を離れているかをチェックして位置を更新します。そうしないと、正方形が常にキャンバスから離れてしまうため、ループ変数が必要です。

var canvas = document.getElementById('bg');
var ctx = canvas.getContext('2d');

var squares = [];
squares[squares.length] = new Square(200, 200, 20, 'red', 0.785398164);

function Square(x, y, size, colour, angle)
{
    this.x = x;
    this.y = y;
    this.size = size;
    this.colour = colour;
    this.speed = 5;
    this.angle = angle;
    this.looped = false;
}

Square.prototype.update = function()
{
    this.x += (Math.cos(this.angle) * this.speed);
    this.y += (Math.sin(this.angle) * this.speed);
    if (this.x < canvas.width && this.x + this.size > 0 &&
        this.y < canvas.height && this.y + this.size > 0)
    {
        this.draw();
        this.looped = false;
    }
    else
    {
        if (this.x > canvas.width && !this.looped)
        {
            this.x = -this.size;
        }
        if (this.x + this.size < 0 && !this.looped)
        {
            this.x = this.size + canvas.width;
        }
        if (this.y > canvas.height && !this.looped)
        {
            this.y = -this.size;
        }
        if (this.y + this.size < 0 && !this.looped)
        {
            this.y = this.size + canvas.height;
        }
        this.looped = true;
    }
}

Square.prototype.draw = function()
{
    ctx.fillStyle = this.colour;
    ctx.fillRect(this.x, this.y, this.size, this.size);
}

function gameLoop()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < squares.length; i++)
    {
        squares[i].update();
    }
    requestAnimationFrame(gameLoop);
}

gameLoop();

(function()
{
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
    {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element)
    {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function()
        {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id)
    {
        clearTimeout(id);
    };
}());

私は JSFiddle を実行しますが、requestAnimationFrame はうまく機能しません。