Canvas干游戏实践分享(十)

Canvas做游戏实践分享(十)
6??? 用户交互——移动物体

????? 游戏的核心在于交互，很多时候需要用户动手来操作游戏对象，很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体，在画布上扔物体等。

??????? 使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下，鼠标移动及鼠标释放。这涉及到三个鼠标事件：mousedown,mousemove,mouseup。我们按此思路，仍旧以前面介绍的小球系统来实现。
??????? 首先需要检测到鼠标是否进入到小球中，为了简化处理，我们把小球看成一个与其外接矩形等效的图形。先得到小球在画布中所占据的位置。如下代码：

window.onload=function(){                var canvas=document.getElementById("canvas");                var context=canvas.getContext("2d");                var mouse=utils.captureMouse(canvas);                //定义系统环境变量               ?var top=0,left=0,right=canvas.width,left=0,bottom=canvas.height;                var fix_mouse_drag_offset_x=0;                var fix_mouse_drag_offset_y=0;                var bounce=-0.7;                var gravity=0.2;                var isMouseDown=false;                var oldX=oldY=0;               //初始化小球                var ball=new Ball(40);                               ball.x=canvas.width/2;                ball.y=canvas.height/2;                               ball.vx=Math.random()*10-5;                ball.vy=-10;                //鼠标按下时检测鼠标是否位于小球内部                canvas.addEventListener("mousedown",function(){                    if(utils.containsPoint(ball.getBounds(),mouse.x,mouse.y)){                        isMouseDown=true;                         //小球跳动处理                        fix_mouse_drag_offset_x=mouse.x-ball.x;                        fix_mouse_drag_offset_y=mouse.y-ball.y;                        //将小球置于静止状态                       ?oldX=ball.x;                        oldY=ball.y;                        mouse.vx=mouse.vy=0;                        canvas.addEventListener("mousemove",onMouseMove,false);                        canvas.addEventListener("mouseup",onMouseUp,false);                    }                },false);                               function onMouseMove(){                    ball.x=mouse.x-fix_mouse_drag_offset_x;                    ball.y=mouse.y-fix_mouse_drag_offset_x;                }                               function onMouseUp(){                    isMouseDown=false;                    canvas.removeEventListener("mousemove",onMouseMove,false);                    canvas.removeEventListener("mouseup",onMouseUp,false);                }               //计算小球被投掷后的速度                function trackVelocity(){                    ball.vx=ball.x-oldX;                    ball.vy=ball.y-oldY;                    oldX=ball.x;                    oldY=ball.y;                }               //边缘检测，碰撞出理                function checkBoundary(){                    ball.vy+=gravity;                    ball.x+=ball.vx;                    ball.y+=ball.vy;                                       if(ball.x-ball.radius<left){                        ball.x=left+ball.radius;                        ball.vx*=bounce;                    }else if(ball.x+ball.radius>right){                        ball.x=right-ball.radius;                        ball.vx*=bounce;                    }                                       if(ball.y-ball.radius<top){                        ball.y=top+ball.radius;                        ball.vy*=bounce;                    }else if(ball.y+ball.radius>bottom){                        ball.y=bottom-ball.radius;                        ball.vy*=bounce;                    }                }                               (function drawFrame(){                    window.requestAnimFrame(drawFrame,canvas);                    context.clearRect(0,0,canvas.width,canvas.height);                    //鼠标按下时，进行投掷处理，否则进行边缘检测及碰撞处理                   ?if(!isMouseDown){                        checkBoundary();                       }else{                        trackVelocity();                    }                    ball.draw(context);                })();                           };

?