Пример решения задачи на языке программирования JavaScript - пример управляемой анимации - OkZachet.Ru
 

OkZachet.Ru

Решение задач и контрольных работ|Помощь на экзамене|Онлайн тесты

Скоро сессия студент? OkZachet.Ru - и нет проблем
Опыт. Качество. Гарантии. Бесплатные доработки.
г. Первоуральск, тел. 8(908)639-54-09, email: admin@okzachet.ru

  • Увеличить размер шрифта
  • Размер шрифта по умолчанию
  • Уменьшить размер шрифта
Главная Информатика и программирование JavaScript Пример решения задачи на языке программирования JavaScript - пример управляемой анимации
E-mail Печать PDF

Пример решения задачи на языке программирования JavaScript - пример управляемой анимации

javascript программирование

Условие:
Разработать скрипт для движения квадрата внутри другого квадрата с управлением клавиш W,A,S,D.

Результат работы:
Для управления квадратом используйте клавиши W,A,S,D.

Код javascript (вставлять между тегами <head> и </head>):

<script language="javascript">
function move(e) {

var box = document.getElementById('box'); //получить элемент box
var lpos = move.lpos; //положение left элемента box внутри элемента container
var tpos = move.tpos; //положение top элемента box внутри элемента container

switch(e.keyCode){
case 65: // если нажата клавиша 'a'
if(lpos>0)
{
lpos--;
box.style.left = lpos + 'px';
}
break;
case 87: // если нажата клавиша 'w'
if(tpos>0)
{
tpos--;
box.style.top = tpos + 'px';
}
break;
case 68: // если нажата клавиша 'd'
if(lpos < 150)
{
lpos++;
box.style.left = lpos + 'px';
}
break;
case 83: // если нажата клавиша 's'
if(tpos < 150)
{
tpos++;
box.style.top = tpos + 'px';
}
break;
}
move.lpos = lpos; //это статические переменные через свойства функции
move.tpos = tpos; //это статические переменные через свойства функции
}
move.lpos = 0;
move.tpos = 0;

addEventListener("keydown", move);
</script>

Код CSS (вставлять между тегами <head> и </head>):

<style>
#container {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: white;
position: absolute;
}
</style>

Код HTML (вставлять между тегами <body> и </body>):

<div id="container">
<div id="box"> </div>
</div>

Решение задачи на языке программирования JavaScript завершено.

Если все же у Вас остались вопросы по выполнению заданий, то Вы можете ознакомиться с общей информацией по решению контрольных работ и задач на заказ на сайте OkZachet.Ru.

С Уважением, Администратор сайта.

Обновлено 06.09.2017 17:51  

Добавить комментарий

Перед опубликованием все комментарии модерируются!


Пройти опрос 1

По какому предмету Вам нужна помощь?
 

Пройти опрос 2

Из какого вы города?
 

Пройти опрос 3

Что нужно добавить на сайт?