Блог

Главная - Вопросы по программированию - Создание отскока круга с помощью javascript

Создание отскока круга с помощью javascript

#javascript

#javascript

Вопрос:

Моя цель — заставить круг двигаться вправо, пока он не достигнет конца окна. После этого он должен поворачивать налево, пока не попадет в левую часть окна. Мне трудно понять, почему мой круг не отскакивает, как только он попадает в правую часть окна. Круг не занимает всю ширину окна, прежде чем «отскочить».

Вот часть html:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Animate</title>
    <script src="animate.js"></script>
</head>
<body>
    <h2>JavaScript Timers</h2>
    <p>
        <button onclick="left('thingToMove');">amp;larr; Move Left</button>
        <button onclick="stopMoving();">Stop</button>
        <button onclick="right('thingToMove');">Move Rightamp;rarr;</button>
    </p>
    <div id='thingToMove' style="left:10px; position:absolute;">
        <img src="bluecircle.png" >
    </div>
    <div id="instructions" style="position: relative; top:1.25in;">
        <h3>Instructions</h3>
        <ol>
            <li>Re-write animate.js to use <code>setInterval()</code> instead of <code>setTimeout</code></li>
            <li>Add functionality to "bounce" off the side of the window rather than disappear.<br /><em>hint:</em> <code>window.innerWidth</code></li>
        </ol>
    </div>
</body>
</html>

Это то, что у меня есть до сих пор для моего javascript.

 var moving = "";
function $(id){
    return document.getElementById(id);
}
function right(id){
        stopMoving();
        $(id).style.left = parseInt($(id).style.left)   1   'px';
        moving = setInterval(function(){right(id);},10);
        alert(window.innerWidth);
        if($(id).style.left > (window.innerWidth)   'px'){
            left(id);
        }
}

function left(id){ 
        stopMoving();
        $(id).style.left = parseInt($(id).style.left) - 1   'px';
        moving = setInterval(function(){left(id);},10);
        if($(id).style.left < 0   'px'){
            right(id);
        }
}

function stopMoving(){
        window.clearInterval(moving);
}

Обычно круг перемещается примерно на 90 пикселей вправо, прежде чем он отскочит влево. Я не уверен, почему.

Ответ №1:

Вы сравниваете строки для этих ширин, что означает, что применяются правила сравнения строк: '90px' > '100px' верно, потому 9 что больше, чем 1 .

Правила сравнения строк не являются правилами «человеческого сравнения».