動きの制御

第２回図形を動かす

JavaScriptでゲーム作成を目指す学習コーナーです。今回はCanvasに描画した図形の動きを制御します。

2020.11.13

反転
プログラム

反転

図形が画面をはみ出さないように反転させます。

プログラム

プログラムを見ていきます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScriptでゲーム</title>
    <style>
    	* { padding: 0; margin: 0; }
        canvas {background: #000000;
            position: absolute;
        	top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);}
    </style>
</head>
<body>

<canvas id="canvas" width="640" height="480"></canvas>

<script>

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

    var x = 1;
    var x_houkou = 2;
    setInterval(draw, 10);

    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "blue";
        ctx.fillRect(x,440,50,30);

        x = x + x_houkou;
        if( x > canvas.width - 50){
          x_houkou = -3;
        }
        if( x < 1 ){
          x_houkou = 2;
        }
    }

</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScriptでゲーム</title>

<style>

* { padding: 0; margin: 0; }

canvas {background: #000000;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);}

</style>

</head>

<body>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var x = 1;

var x_houkou = 2;

setInterval(draw, 10);

function draw(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "blue";

ctx.fillRect(x,440,50,30);

x = x + x_houkou;

if( x > canvas.width - 50){

x_houkou = -3;

}

if( x < 1 ){

x_houkou = 2;

}

</script>

</body>

</html>

図形の横位置を決定している変数xは33行目で更新されます。

     x = x + x_houkou;

33	x = x + x_houkou;

x自身に変数x_houkouを足しています。変数x_houkouは25行目で定義されており初期値は2が設定されています。

   var x_houkou = 2;

25	var x_houkou = 2;

従って変数xは描画される度に2ずつ加算され、図形は横に2ピクセルずつ移動します。

2ずつ加算されるといずれ右横にはみ出てしまいます。それを防いでいるのが34行目～36行目の判断文です。(判断文については自分で判断できますを参考にしてください)

        if( x > canvas.width - 50){
          x_houkou = -3;
        }

if( x > canvas.width - 50){

x_houkou = -3;

}

変数xがcanvasの横幅を超えた時にx_houkouに-3を設定しています。これにより2ずつ右横に移動するのが3ずつ左横に移動します。

条件でcanvasの横幅から50を引いているのは、図形の横幅分(50)を考慮するために引いています。

図形が反転し左側に3ピクセルずつ移動しますが、いずれ左側にはみ出てしまいます。これを防いでいるのが37行目～39行目の判断文です。

        if( x < 1 ){
          x_houkou = 2;
        }

if( x < 1 ){

x_houkou = 2;

}

変数xが左にはみ出る(値が1より小さい)ならx_houkouに2を設定しています。これで再度右側に2ピクセルずつ移動することになります。

次に人の指示により図形を動かします。