听指令的小方块（二）

最新推荐文章于 2018-11-04 17:24:47 发布

weixin_33938733

最新推荐文章于 2018-11-04 17:24:47 发布

阅读量112

点赞数

原文链接：https://juejin.im/post/5b6d5e4251882561ef4467c8

版权

在听指令的小方块（一）的基础上对于正方形的移动增加相应动画，包括移动和旋转每个指令的执行时间是1s（可以自己调整）增加新的指令如下：

TRA LEF：向屏幕的左侧移动一格，方向不变
TRA TOP：向屏幕的上面移动一格，方向不变
TRA RIG：向屏幕的右侧移动一格，方向不变
TRA BOT：向屏幕的下面移动一格，方向不变
MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格

demo:codepen.io/llldmiao/fu…

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>听指令的小方块（一）</title>
    <style>
        .container{
            width:600px;
            margin:0 auto;
        }
        
        
    </style>
</head>
<!--移动和旋转的动画待完善-->
<body onload="raf=window.requestAnimationFrame(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>
                <option value='TRA LEF'>TRA LEF</option>
                <option value='TRA TOP'>TRA TOP</option>
                <option value='TRA RIG'>TRA RIG</option>
                <option value='TRA BOT'>TRA BOT</option>
                <option value='MOV LEF'>MOV LEF</option>
                <option value='MOV TOP'>MOV TOP</option>
                <option value='MOV RIG'>MOV RIG</option>
                <option value='MOV BOT'>MOV BOT</option>
        </select>
        <button id="doit">执行</button>
        </div>
    </div>
   
    <script>
       var x=0;//小方块行号，取值0~9
        var y=0;//小方块列号，取值0~9
        var direction=0;//小方块方向，
        var raf;
        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();
            }
                
            raf=window.requestAnimationFrame(draw);
        }


            //小方块移动（前进）
           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;
                    case 'TRA LEF':
                        if(x>0){
                            x--;
                        }
                        draw();
                        break;
                    case 'TRA TOP':
                        if(y>0){
                            y--;
                        }
                        draw();
                        break;
                    case 'TRA RIG':
                        if(x<9){
                            x++;
                        }
                        draw();
                        break;
                    case 'TRA BOT':
                        if(y<9){
                            y++;
                        }
                        draw();
                        break;
                    case 'MOV LEF':
                        if(x>0){
                            x--;
                        }
                        direction=3;
                        raf=window.requestAnimationFrame(draw);
                        break;
                    case 'MOV TOP':
                        if(y>0){
                            y--;
                        }
                        direction=0;
                        raf=window.requestAnimationFrame(draw);
                        break;
                    case 'MOV RIG':
                        if(x<9){
                            x++;
                        }
                        direction=1;
                        raf=window.requestAnimationFrame(draw);
                        break;
                    case 'MOV BOT':
                        if(y<9){
                            y++;
                        }
                        direction=2;
                        raf=window.requestAnimationFrame(draw);
                        break;    
                    default:
                        break;
               }
           })


    </script>
</body>
</html>
复制代码

weixin_33938733

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
听指令的小方块（二）

在听指令的小方块（一）的基础上对于正方形的移动增加相应动画，包括移动和旋转每个指令的执行时间是1s（可以自己调整）增加新的指令如下：TRA LEF：向屏幕的左侧移动一格，方向不变TRA TOP：向屏幕的上面移动一格，方向不变TRA RIG：向屏幕的右侧移动一格，方向不变TRA BOT：向屏幕的下面移动一格，方向不变MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格MOV T...
复制链接

扫一扫