<html><body>
<canvas id="WrkCanvas" width="640" height="400"></canvas>
<script language="JavaScript">
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;
this.LastDirec = Math.floor( Math.random() * 4 );
}
move(){
if( Math.random() < 0.3 ){
this.LastDirec = Math.floor( Math.random() * 4 ); // 0～3の乱数
}
switch( this.LastDirec ){
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 ViewTekiArr = [];
for(let i = 0; i < 10; i++) {
ViewTekiArr[i] = new ViewTekiCls( WrkCtx
, Math.random() * 640
, Math.random() * 400
, "rgb(" + Math.random() * 255 +
"," + Math.random() * 255 +
"," + Math.random() * 255 + ")" );
}
function ViewScreen(){
WrkCtx.beginPath();
WrkCtx.fillStyle = "rgb(0, 0, 0)"; // 塗りつぶしの色
WrkCtx.fillRect( 0, 0, 640, 400 ); // 四角表示
for (let ViewTeki of ViewTekiArr){
ViewTeki.move();
}
WrkCtx.stroke();
}
setInterval(ViewScreen, 200); // 0.2秒に１回再表示
</script>
</body></html>