<html><body>

    <canvas id="WrkCanvas" width="640" height="400"></canvas>

    <script language="JavaScript">

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

        let PosX = 320;

        let PosY = 200;

        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 ); // 敵キャラクター

           

            WrkCtx.stroke();

        }

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

 

    </script>

</body></html>