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

let PosX = 320;

let PosY = 200;

let PosX2 = 320;

let PosY2 = 100;

function ViewScreen(){

WrkCtx.beginPath();

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

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

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

case 0:

PosX += 10;

break;

case 1:

PosX -= 10;

break;

case 2:

PosY += 10;

break;

case 3:

PosY -= 10;

break;

default:

}

WrkCtx.fillStyle = "rgb(255, 0, 0)"; // 敵の色

WrkCtx.fillRect( PosX , PosY , 10, 10 ); // 敵キャラクター

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

case 0:

PosX2 += 10;

break;

case 1:

PosX2 -= 10;

break;

case 2:

PosY2 += 10;

break;

case 3:

PosY2 -= 10;

break;

default:

}

WrkCtx.fillStyle = "rgb(0, 255, 0)"; // 敵の色

WrkCtx.fillRect( PosX2 , PosY2 , 10, 10 ); // 敵キャラクター

WrkCtx.stroke();

}

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

</script>

</body></html>