<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 ); // 四角表示

           

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

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

           

            WrkCtx.stroke();

        }

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

 

    </script>

</body></html>