笔记二十二（越界处理）

来源：互联网发布：windows无法激活怎么办编辑：程序博客网时间：2024/04/28 23:55

应用动画时需关注动画所实现的环境，动画对象需要根据环境的变化而改变运动状态。这里系统总结处理物体越界以及应用摩擦力的公式。
注：
left为环境右部边界所在坐标x值;
right为环境左部边界所在坐标x值;
top 为环境顶部边界所在坐标y值;
bottom为环境底部边界所在坐标y值。
1、移除越界的对象

if(object.x - object.width/2 > right || object.x + object.width/2 < left ||object.y - object.height/2 > bottom || object.y + object.height/2 < top){//移除对象代码块}

2、重置越界的对象

if(object.x - object.width/2 > right || object.x + object.width/2 < left ||object.y - object.height/2 > bottom || object.y + object.height/2 < top){//重置对象状态代码块}

3、设置对象为屏幕环绕

if(object.x - object.width/2 > right){    object.x = left - object.width/2;}else if(object.x + object.width/2 < left){    object.x = right + object.width/2;}if(object.y - object.height/2 > bottom){    object.y = top - object.height/2;}else if(object.y + object.height/2 < top){    object.y = bottom + object.height/2;}

4、应用摩擦力（正确方法）

speed = Math.sqrt(vx * vx + vy * vy);angle = Math.atan(vy , vx);if(speed > friction){    speed -= friction;          //friction代表摩擦效果，可设为0.1}else{    speed = 0;}vx = Math.cos(angle) * speed;vy = Math.sin(angle) * speed;

5、应用摩擦力（简便方法）

vx *= friction;     //friction代表摩擦效果，可设为0.98vy *= friction;

这里讲前面的飞船应用稍加改变，添加屏幕环绕和摩擦效果。
代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>飞船</title><style type="text/css">    #canvas{background-color: #000}</style></head><body><canvas id="canvas" width="400" height="400"></canvas><script type="text/javascript" src="utils.js"></script><script type="text/javascript" src="ship.js"></script><script type="text/javascript">    window.onload = function(){        var canvas = document.getElementById("canvas"),            context = canvas.getContext("2d"),            ship = new Ship(),            vr = 0,            vx = 0,            vy = 0,            thrust = 0;            friction = 0.98;    //摩擦系数        ship.x = canvas.width/2;        ship.y = canvas.height/2;        window.addEventListener("keydown",function(event){            switch(event.keyCode){                case 37: //left                    vr = -5;                    break;                case 39: //right                    vr = 5;                    break;                case 38: //up                    thrust = 0.1;                    ship.showFlame = true;                    break;            }        },false);        window.addEventListener("keyup",function(event){            vr = 0;            thrust = 0;            ship.showFlame = false;        },false);        (function drawFrame(){            window.requestAnimationFrame(drawFrame,canvas);            context.clearRect(0,0,canvas.width,canvas.height);            ship.rotation += vr * Math.PI/180;            var angle = ship.rotation,                ax = Math.cos(angle)*thrust,                ay = Math.sin(angle)*thrust,                left = 0,                right = canvas.width,                top = 0,                bottom = canvas.height;            vx += ax;            vy += ay;            vx *= friction; //添加摩擦效果            vy *= friction; //添加摩擦效果            ship.x += vx;            ship.y += vy;            //屏幕环绕            if (ship.x - ship.width/2 > right) {                ship.x = left - ship.width/2;            }else if(ship.x + ship.width/2 < left){                ship.x = right + ship.width/2;            }            if(ship.y - ship.height/2 > bottom){                ship.y = top - ship.height/2;            }else if(ship.y + ship.height/2 < top){                ship.y = bottom + ship.height/2;            }            ship.draw(context);        }());    }</script></body></html>

参见《HTML5+Javascript动画基础》。

0 0