Question

这只是我正在做的练习，我在setInterval函数中翻转了sin和cos函数，它就像一个魅力。我找不到如何设法翻转它们。所有x和y就像我应该看到的那样。

这只是jsfiddle下面代码的链接。 http://jsfiddle.net/Lf5sZ/5/

//Creating the cube.
var el = document.createElement('div');
el.style.position = 'fixed';
el.style.width = '100px';
el.style.height = '100px';
el.style.background = '#000';

//Creating the cube target dot.
var tp = document.createElement('div');
tp.style.position = 'fixed';
tp.style.margin = '45px 0 0 45px';
tp.style.width = '10px';
tp.style.height = '10px';
tp.style.borderRadius = '5px';
tp.style.background = '#f00';

//Current X position start with random cord within window width.
var cPosX = Math.ceil(Math.random()*(window.innerWidth-100));
//Current Y position start with random cord within window height.
var cPosY = Math.ceil(Math.random()*(window.innerHeight-100));

//Target is the same as the current position since we don't want to move anywhere.
var tPosX = cPosX;
var tPosY = cPosY;

//The length of each move the update will take the cube to it's target. 
var step = 4;

//The mouse position last known position.
var mPosX = 0;
var mPosY = 0;

//Then mouse move update the last known position.
document.onmousemove = function(e){
    mPosX = e.clientX;
    mPosY = e.clientY;
}

//change the target if the mouse hits the cube.
el.onmouseover = function(){
    //stores the distance between the mouse position and the closes edge.
    dist=0;

    //If the degrees are in specific range we know where the mouse pointer is.
    if( Math.abs(mPosX-cPosX) < Math.abs(mPosX-(cPosX+100)) ){
        direction = 'l';
        dist = Math.abs(mPosX-cPosX);
    }else{
        direction = 'r';
        dist = Math.abs(mPosX-(cPosX+100));
    }
    if( Math.abs(mPosY-cPosY) < Math.abs(mPosY-(cPosY+100)) ){
        if( dist > Math.abs(mPosY-cPosY) ){
            direction = 't';
        }
    }else{
        if( dist > Math.abs(mPosY-(cPosY+100)) ){
            direction = 'b';
        }
    }

    //Based on the direction we know what direction not to go to.
    switch(direction){
        case 'l':
            deg = Math.ceil(Math.random()*180)-90;
            break;
        case 'r':
            deg = Math.ceil(Math.random()*180)+90;
            break;
        case 't':
            deg = Math.ceil(Math.random()*180)-180;
            break;
        case 'b':
            deg = Math.ceil(Math.random()*180);
            break;
    }

    //Turns the degrees into radians
    rad = deg * Math.PI/180;
    if( rad < 0 ){
        rad += 2*Math.PI;
    }

    //Need to get a random length here

    //Update the target.
    tPosX = Math.ceil(Math.random()*(window.innerWidth-100));
    tPosY = Math.ceil(Math.random()*(window.innerHeight-100));
}

setInterval(function(){
    //if the mouse is in the current position get new target.
    if( (cPosX > mPosX > cPosX+100) && (cPosY > mPosY > cPosY+100) ){
        el.onmouseover();
    }

    //if current and target is not the same we are moving the cubes current location.
    if( (cPosX != tPosX) && (cPosY != tPosY) ){
        //Get the distance between the current and target position
        dist = (Math.round(Math.abs(Math.sqrt((tPosX-cPosX)^2 + (tPosY-cPosY)^2))*1000)/1000);

        //If distance between target and current position is less then a step move to target directly.
        if( dist < step  ){
            cPosX = tPosX;
            cPosY = tPosY;
        }else{
            //the angle between target and current position.
            rad = Math.atan2(tPosX-cPosX,tPosY-cPosY);

            //Makes the angle positive.
            if( rad < 0){
                rad += 2*Math.PI;
            }

            //Update the current position.
            cPosX += step * Math.sin(rad);
            cPosY += step * Math.cos(rad);
        }
    }

    //Set the current and target cords to the cube and target dot.
    el.style.left = cPosX + 'px';
    el.style.top = cPosY + 'px';
    tp.style.left = tPosX + 'px';
    tp.style.top = tPosY + 'px';
},1000/30);

//Adds the cube and target dot to the document.
document.body.appendChild(el);
document.body.appendChild(tp);

Answer 1

您的atan2来电应为atan2(dy, dx)，而不是dx, dy，因此您的角度不正确。

假设沿正X轴放置0度的笛卡尔约定，当然页面上的Y坐标是反转的，并向下运行而不是向上运行。

Sin和Cos翻了我怎么处理这个？

1 个答案: