let WrkCtx = document.getElementById("WrkCanvas").getContext("2d");

class ViewTekiCls {

constructor( WrkCtx , StartX , StartY , Color ) {

this.WrkCtx = WrkCtx;

this.LastX = StartX;

this.LastY = StartY;

this.Color = Color;

}

move(){

switch( Math.floor( Math.random() * 4 ) ){ // 0～3の乱数

case 0:

this.LastX += 10;

break;

case 1:

this.LastX -= 10;

break;

case 2:

this.LastY += 10;

break;

case 3:

this.LastY -= 10;

break;

default:

}

WrkCtx.fillStyle = this.Color; // 敵の色

WrkCtx.fillRect( this.LastX , this.LastY , 10, 10 ); // 敵キャラクター

}

let ViewTeki1 = new ViewTekiCls( WrkCtx , 320 , 200 , "rgb(255, 0, 0)" );

let ViewTeki2 = new ViewTekiCls( WrkCtx , 320 , 100 , "rgb(0, 255, 0)" );

function ViewScreen(){

WrkCtx.beginPath();

WrkCtx.fillStyle = "rgb(0, 0, 0)"; // 塗りつぶしの色

WrkCtx.fillRect( 0, 0, 640, 400 ); // 四角表示

ViewTeki1.move();

ViewTeki2.move();

WrkCtx.stroke();

}

setInterval(ViewScreen, 200); // 0.2秒に１回再表示

</script>

</body></html>