听指令的小方块（一）如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方

如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
- GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
- TUN LEF：向左转（逆时针旋转90度）
- TUN RIG：向右转（顺时针旋转90度）
- TUN BAC：向右转（旋转180度）
移动不能超出格子空间

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>听指令的小方块（一）</title>
    <style>
        .container{
            width:600px;
            margin:0 auto;
        }
        
        
    </style>
</head>
<body onload="draw()">
    <div class="container">
        <canvas width="500px" height="500px" id="canvas"></canvas>
        <div>
        <select id="order">
                <option value="go">GO</option>
                <option value="TUN_LEF" selected>TUN LEF</option>
                <option value="TUN_RIG">TUN RIG</option>
                <option value="TUN_BAC">TUN BAC</option>
        </select>
        <button id="doit">执行</button>
        </div>
    </div>
   
    <script>
       var x=0;//小方块行号，取值0~9
        var y=0;//小方块列号，取值0~9
        var direction=0;//小方块方向，

        function draw(){
            
            var can=document.getElementById("canvas");
            if(can.getContext){
                var ctx=can.getContext("2d");
                
                ctx.clearRect(0,0,500,500);
                /*必须，因为每次执行order都会执行一次draw()函数，
                    如果不清除，原有的内容（包括小方格）还会继续存在，继续往下执行就会重复，
                    小方格最明显，边框之类的多执行几次就能看出来变粗了*/
                    
                //画外边框
                //左边和上边看起来比右边和下边宽,但没找到原因
                ctx.lineWidth=1;
                ctx.strokeStyle='#000';
                ctx.strokeRect(50,50,450,450);
                

                //画坐标点
                ctx.font='16px Times New Roman';
                ctx.textAlign='center';
                for(var i=1;i<11;i++){
                    ctx.strokeText(i,i*45+25,25);
                    ctx.strokeText(i,25,i*45+30);
                }

                //画行线
                ctx.strokeStyle='#c2c2c2';
                for(var i=1;i<10;i++){
                    ctx.moveTo(50,i*45+50);
                    ctx.lineTo(500,i*45+50);
                    ctx.moveTo(i*45+50,50);
                    ctx.lineTo(i*45+50,500);
                }
                ctx.stroke();

                //小方块
                ctx.beginPath();
                ctx.fillStyle='rgb(255,0,0)';
                ctx.fillRect(x*45+50,y*45+50,45,45);
                ctx.fillStyle='rgb(0,0,255)';

                //蓝色部分的四种朝向
                switch(direction){
                    case 0://朝上
                        ctx.fillRect(x*45+50,y*45+50,45,10);
                        break;
                    case 1://朝右
                        ctx.fillRect(x*45+85,y*45+50,10,45);
                        break;
                    case 2://朝下
                        ctx.fillRect(x*45+50,y*45+85,45,10);
                        break;
                    case 3://朝左
                        ctx.fillRect(x*45+50,y*45+50,10,45);
                        break;
                }
                ctx.fill();
            }
                
            
        }


            //小方块移动（前进）
           function go(){
               switch(direction){
                   case 0:
                        if(y>0){
                            y--;
                        }
                        break;
                    case 1:
                        if(x<9){
                            x++;
                        }
                        break;
                    case 2:
                        if(y<9){y++;}
                        break;
                    case 3:
                        if(x>0){
                            x--;
                        }
                        break;
                    default:break;
               }
               draw();
           }
         

            //对button添加事件监听
           var doit=document.getElementById('doit');
           doit.addEventListener('click',function(){
               var sel=document.getElementById('order');
               var opt=sel.options[sel.selectedIndex].value;
               //根据指令，小方块将转向或移动
               switch(opt){
                   case 'go':
                        go();
                        break;
                    case 'TUN_LEF':
                        direction=(direction-1+4)%4;
                        draw();
                        break;
                    case 'TUN_RIG':
                        direction=(direction+1)%4;
                        draw();
                        break;
                    case 'TUN_BAC':
                        direction=(direction+2)%4;
                        draw();
                        break;
                    default:
                        break;
               }
           })


    </script>
</body>
</html>