Создайте 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 — это свойство стилей задает высоту.
<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 — это свойство стилей задает высоту.
Алексей, я немножко хочу добавить и усложнить задачу по этому разделу. Как добавить, чтобы при каждом отскоке sharik'а от границ рамки создавался элемент div такого же размера, но, допустим другого цвета. При каждом касании создавался квадратик, если нубовским языком) Спасибо.
ОтветитьУдалитьВопрос в том, как сделать создание такого же квадратика? Или добавить в задание? Если выходить за рамки пройденного, то интереснее как сделать так, чтобы квадратик перемещался без нашего участия.
УдалитьДа вопрос в том как именно сделать этот квадратик, а плюс ко всему,как Вы сказали, еще автономная работа без onmousemove - еще круче)
УдалитьЧтобы запустить шарик в самостоятельный полет, введите в консоли setInterval(vpered, 10) - функция будет вызываться каждые 10 миллисекунд. Про то, как создавать квадратики нужного цвета в нужном месте в двух словах не расскажешь. Рекомендую поразбираться тут http://learn.javascript.ru/modifying-document#создание-элементов-createelement или подождать новых уроков.
УдалитьКак сделать квадрат в рамки, чтобы при ударе шарика о квадрат, квадрат исчезал? Пожалуйста помогите. Если не понятен вопрос спрашивайте.
ОтветитьУдалитьКак сделать квадрат в рамке, чтобы при ударе шарика о квадрат, квадрат исчезал? Пожалуйста помогите. Если не понятен вопрос спрашивайте.
ОтветитьУдалитьЧтобы сделать квадрат, исчезающий при определенных условиях, надо понимать, что внешний вид (html-элементы) изменить легко
Удалитьdocument.getElementById('айди_квадрата').style.display = "none"
А вот проследить в программном коде, что в данном пространстве координат уже нет препятствия - задачка посложнее.
Например, можно хранить признак существования квадратика в отдельной переменной
kvadratRealen = 1
а когда шарик стукнулся о квадрат помимо скрытия html-элемента надо еще и изменить признак существования квадрата
kvadratRealen = 0
Теперь, во время движения шарика мы должна проверять не только условия ударов о стенки, но при существовании квадрата
if (kvadtratRealen == 1){...}
проверять также и не ударился ли шарик о стенку квадрата.
Попробуйте разобраться в игре Арканоид http://kidsjs.blogspot.ru/2015/05/blog-post_26.html потихоньку, строчка за строчкой. Можно распечатать код на бумаге и делать пометки, чтобы разобраться. Надеюсь, вопрос понял правильно.
Kak izmenitj fon na kakuju libo kartinku.jpg?
ОтветитьУдалитьпочему у меня шар не летает? а стоит на 1 мосте в углу
ОтветитьУдалить