13 янв. 2015 г.

Функции: практика для самостоятельного разбора

Создайте html-файл с таким содержимым:

<div style="position: absolute; top: 0; left: 0; background: gray; width: 500; height: 360;" onmousemove="vpered()"></div>

<div style="position: absolute; top: 5; left: 5; background: orange; width: 5; height: 5;" id="sharik"></div>


<script>
// начальные координаты
sverhu = 5;
sleva = 5;

// направление движения
vverhVniz = 1;
vlevoVpravo = 1;


// эта функция запускается много раз при движении курсора мыши над серым прямоугольником
 function vpered(){
    // при каждом запуске надо изменить координаты шарика
    sverhu += vverhVniz;
    sleva += vlevoVpravo;


    // проверим, не долетел ли до стенки
    proverka();

    // вставим новые координаты в стили шарика
    document.getElementById('sharik').style.top = sverhu;
    document.getElementById('sharik').style.left = sleva;
}

function proverka(){
    // если долетел до нижней границы - меняем направление вертикального движения
    if(sverhu == 360){
        vverhVniz = -1;
    }
    // если взлетел до верхней границы - снова пусть летит вниз
    if(sverhu == 0){
        vverhVniz = 1;
    }

    // если долетел до правой границы - меняем направление горизонтального движения
    if(sleva == 500){
        vlevoVpravo = -1;
    }
    // если вернулся к левой границе - снова пусть летит вправо
    if(sleva == 0){
        vlevoVpravo = 1;
    }
}


</script>



Пояснение к коду:
onmousemove этот параметр html-элементов запускает js-код в момент, когда над ним движется курсор мыши;
vverhVniz эта переменная может быть положительным или отрицательным числом. Это нужно для того, чтобы менять направление движения — если надо уменьшать верхний отступ, прибавляем отрицательное число;
width: 500 это свойство стилей задает ширину;
height: 360 это свойство стилей задает высоту.


Следующий урок >>



8 комментариев:

  1. Алексей, я немножко хочу добавить и усложнить задачу по этому разделу. Как добавить, чтобы при каждом отскоке sharik'а от границ рамки создавался элемент div такого же размера, но, допустим другого цвета. При каждом касании создавался квадратик, если нубовским языком) Спасибо.

    ОтветитьУдалить
    Ответы
    1. Вопрос в том, как сделать создание такого же квадратика? Или добавить в задание? Если выходить за рамки пройденного, то интереснее как сделать так, чтобы квадратик перемещался без нашего участия.

      Удалить
    2. Да вопрос в том как именно сделать этот квадратик, а плюс ко всему,как Вы сказали, еще автономная работа без onmousemove - еще круче)

      Удалить
    3. Чтобы запустить шарик в самостоятельный полет, введите в консоли setInterval(vpered, 10) - функция будет вызываться каждые 10 миллисекунд. Про то, как создавать квадратики нужного цвета в нужном месте в двух словах не расскажешь. Рекомендую поразбираться тут http://learn.javascript.ru/modifying-document#создание-элементов-createelement или подождать новых уроков.

      Удалить
  2. Как сделать квадрат в рамки, чтобы при ударе шарика о квадрат, квадрат исчезал? Пожалуйста помогите. Если не понятен вопрос спрашивайте.

    ОтветитьУдалить
  3. Как сделать квадрат в рамке, чтобы при ударе шарика о квадрат, квадрат исчезал? Пожалуйста помогите. Если не понятен вопрос спрашивайте.

    ОтветитьУдалить
    Ответы
    1. Чтобы сделать квадрат, исчезающий при определенных условиях, надо понимать, что внешний вид (html-элементы) изменить легко
      document.getElementById('айди_квадрата').style.display = "none"
      А вот проследить в программном коде, что в данном пространстве координат уже нет препятствия - задачка посложнее.

      Например, можно хранить признак существования квадратика в отдельной переменной
      kvadratRealen = 1
      а когда шарик стукнулся о квадрат помимо скрытия html-элемента надо еще и изменить признак существования квадрата
      kvadratRealen = 0

      Теперь, во время движения шарика мы должна проверять не только условия ударов о стенки, но при существовании квадрата
      if (kvadtratRealen == 1){...}
      проверять также и не ударился ли шарик о стенку квадрата.

      Попробуйте разобраться в игре Арканоид http://kidsjs.blogspot.ru/2015/05/blog-post_26.html потихоньку, строчка за строчкой. Можно распечатать код на бумаге и делать пометки, чтобы разобраться. Надеюсь, вопрос понял правильно.

      Удалить
  4. Анонимный9 июля 2016 г., 08:40

    Kak izmenitj fon na kakuju libo kartinku.jpg?

    ОтветитьУдалить