Canvas上で動かしている箱が端に到達した時に移動の向きを逆にする

前回のコードだと、箱がCanvasの右端に到達後、フェードアウトで消えていきます。せっかくなので、端に到達したら逆向きに移動するようにコードを変更してみます。前回のコードでは、draw関数の最後の行でmx変数に1足して、次の描写で1px右で箱を描写しています。逆向きに移動するにはmx変数に1引くことで実現でいます。向きの数字が変更ということで、新たに向きに関するdxという変数を追加して、右端に到達したら、向きについてを変更してみます。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

//移動の向きに関する値を入れる変数
var dx = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    //右端は400pxになるので、mxが400よりも大きければ右端にいると見なす
    if(mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}
</script>

mxの中の値を見て、箱が右端にいることが分かれば、向きdxの値の符号を逆にする。この処理により、

箱が右端に到達したら、向きを逆にして、移動を開始します。次に左端に到達したら先ほどと同様にフェードアウトしてしまうので、左端でも折り返す処理を追加します。

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    if(mx < 0 || mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}

mxが左端に到達、つまりは0以下になった時も逆向きにするという処理を追加して

箱が往復し続けるアニメーションができました。Y軸でも同様の処理を追加すると箱が縦横無尽に移動するアニメーションになります。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

var dx = 1;
var dy = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    mx = mx + dx;
    my = my + dy;

    if(mx < 0 ||mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }

    //Y軸の下の端は300なので、0と300を判断する
    if(my < 0 ||my > 300){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dy = -1 * dy;
    }
}
</script>