Форум

NuclleaR · #1 (**permalink**) 09.04.2014, 16:13

Добрго времени суток уважаемые знатоки
есть код который работает с косяком если посмотрите увидите его.
подскажите как исправить.
или хотябы наводящие вопросы. За любую помощь заранее благодарен

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
        #wrapper{
            position: relative;
            border: 2px solid #000000;
            width: 500px;
            height: 400px;
        }

        #test{
            width: 100px;
            height: 100px;
            position: absolute;
            background: #ff0000;
        }
    </style>

</head>
<body>

<div id="wrapper">
    <div id="test"></div>
</div>

<script type="text/javascript">
var direction = [[1,1],
    [1,-1],
    [-1,-1],
    [-1,1]];
var direct = 0;


function move() {

    var elem = document.getElementById('test');

    var left = 0; 
    var top = 0;  

    function frame() {

        var currentCoord = [left, top];
        var nextCoord = currentCoord.map(function(value, index) { return value + direction[direct][index] } );

        elem.style.left = nextCoord[0] + 'px';
        elem.style.top = nextCoord[1] + 'px';

        left = nextCoord[0];
        top = nextCoord[1];

        var x = 0;
        var y = 1;

        if ( nextCoord[y] == 300  ) {
            direct = 1;


            
        }
        if ( nextCoord[x] == 400 ) {
            direct = 2;
    

        }
        if ( nextCoord[y] == 0  ) {
            direct = 3;
           
        }
        if( nextCoord[x] == 0 ) {
            direct = 0;
        }
            


    }
    var timer = setInterval(frame, 1); 
}
move();
</script>

</body>
</html>

jsnb · #2 (**permalink**) 09.04.2014, 16:51

А эти извращения с массивами принципиальны? И если да, то почем всё-таки не сделать как-то так:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style>
        #wrapper{
            position: relative;
            border: 2px solid #000000;
            width: 500px;
            height: 400px;
        }

        #test{
            width: 100px;
            height: 100px;
            position: absolute;
            background: #ff0000;
        }
    </style>

</head>
<body>

<div id="wrapper">
    <div id="test"></div>
</div>

<script type="text/javascript">
var direction = [[1,1],
    [1,-1],
    [-1,-1],
    [-1,1]];
var direct = 0;

var directionDif = [1,1];

function move() {

    var elem = document.getElementById('test');

    var left = 0; 
    var top = 0;  

    function frame() {

        var currentCoord = [left, top];
        var nextCoord = currentCoord.map(function(value, index) {
          return value + directionDif[index];
        });

        elem.style.left = nextCoord[0] + 'px';
        elem.style.top = nextCoord[1] + 'px';

        left = nextCoord[0];
        top = nextCoord[1];

        var x = 0;
        var y = 1;

        if ( nextCoord[y] >= 300  ) {
            directionDif[y] = -1;
        }
        if ( nextCoord[x] >= 400 ) {
            directionDif[x] = -1;
        }
        if ( nextCoord[y] <= 0  ) {
            directionDif[y] = 1;
        }
        if( nextCoord[x] <= 0 ) {
            directionDif[x] = 1;
        }
            


    }
    var timer = setInterval(frame, 1); 
}
move();
</script>

</body>
</html>

?

NuclleaR · #3 (**permalink**) 09.04.2014, 17:48

jsnb,
Спасибо. А я просто не сообразил как сделать без массива направления. если подскажете буду благодарен.

jsnb · #4 (**permalink**) 09.04.2014, 17:56

Сообщение от NuclleaR

jsnb,
Спасибо. А я просто не сообразил как сделать без массива направления. если подскажете буду благодарен.

Делаешь 2 переменных отвечающих за направления смещения по x и y.
Пусть это будут dx и dy соответственно. Если подошли к левой границе по x делаем dx положительным, а если к правой, то отрицательным. С dy аналогично. Соответственно на каждом шаге прибавляем dx и dy к текущим координатам.

NuclleaR · #5 (**permalink**) 09.04.2014, 17:59

Сообщение от jsnb

Делаешь 2 переменных отвечающих за направления смещения по x и y.
Пусть это будут dx и dy соответственно. Если подошли к левой границе по x делаем dx положительным, а если к правой, то отрицательным. С dy аналогично. Соответственно на каждом шаге прибавляем dx и dy к текущим координатам.

Спасибо попробую

Форум

Справочник

Discord чат

Курсы javascript