Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты

“Одну заварку чая можно использовать семь раз, на седьмой раз чаинки всплывут, чтобы посмотреть на этого жлоба.” - анекдот дня



+ Подписаться

Последние комментарии
Статья: Разгадывать кроссворды онлайн бесплатно
Автор:Dima
Дата: 2019-02-13 00:24:02

AlexMaster, физрук

Статья: Разгадывать сканворды онлайн бесплатно
Автор:Lisa
Дата: 2019-02-13 00:23:07

AlexMaster, ну это легко “эскимо”

Статья: Человек Паук против Бэтмена 2099 год
Автор:FanatMarvel
Дата: 2019-02-12 19:36:19

Крутая битва я с самого начала знал, что Человек Паук победит.

Статья: Онлайн шарики игры бесплатно без регистрации
Автор:AlexMaster
Дата: 2019-02-12 18:59:31

Если кому интересны игры похожие на зуму лягушку, то рекомендую поиграть в “Повелитель сфер”. Более подробное описание этой игры находится по ссылке “Меткий стрелок”, в этом разделе.

Статья: Меткий стрелок шарики онлайн играть бесплатно без регистрации
Автор:Artem
Дата: 2019-02-12 02:26:27

Magician, я давно играл в эту игру, но по моему там 5 здоровья прибавляется, тогда когда каждый раз используешь заклинание исцеление.

Статья: Разгадывать кроссворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-12 00:03:06

Первый вопрос на кроссворд “Препод” в спортзале?

Статья: Разгадывать сканворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:57:29

Первый вопрос как называется мороженное посаженное на “кол”?

Статья: Разгадывать сканворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:43:38

Всем любителям разгадывать сканворды я предлагаю сыграть в одну игру. Случайным образом я буду брать один вопрос из любого сканворда и размещать его здесь, а ваша задача дать правильный ответ.

Статья: Разгадывать сканворды онлайн бесплатно
Автор:Misha
Дата: 2019-02-11 23:38:47

Правильный ответ “Ранет”.

Статья: Разгадывать кроссворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:31:01

Если здесь есть такие кто зарегистрирован на разных форумах, то вы должно быть видели, что на некоторых форумах есть такая тема “форумные игры”. Тут будут сообщения-игра. Суть игры заключается я буду брать любой вопрос любого кроссворда который у меня есть и размещать его здесь, а ваша задача на него правильно ответить. Посмотрим насколько вы эрудированные?

Поиск предметов

Летний легкий жакетик

Шарф



HTML5-> Статьи->Разгадывать кроссворды онлайн бесплатно

События клавиш.

0

Добавил: AlexMaster

Дата: 15.09.2016


keydown – вызывается, когда клавиша клавиатуры была нажата.
keyup – вызывается, когда клавиша клавиатуры была отпущена.
В следующем примере используется событие keydown. При нажатии любой клавиши в fillText, будет отображен код нажатой клавиши.
Пример листинг 1.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Key event</title>
</head>
<body>
<script>
var canvas, ctx;
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);
ctx.font = '24px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText("Код клавиши ", 50, 50);

document.addEventListener("keydown",function(evt)
{
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillText("Код клавиши "+evt.keyCode, 50, 50);
});
}

main();
</script>
</body>
</html>

В примере “листинг 2” показано перемещение квадрата с помощью стрелок. Благодаря предыдущему примеру, можно узнать код каждой клавиши - стрелки и занести их в соответствующие переменные. Например, в такие переменные как UpArrow, DownArrow , LeftArrow и RightArrow. Потом установить координаты нашего квадрата по оси x и y. Для этого нужно создать переменные со значением x = 40 и y = 80. При нажатии любой клавиши (событие keydown), переменная - массив keystate запоминает код нажатой клавиши и присваивает этому коду значение true. В случае если пользователь отпустит клавишу (событие keyup). То код нажатой клавиши удаляется delete keystate[evt.keyCode];. Функция player отвечает за перемещения героя. В этой функции запускается бесконечный цикл, где вызывается функция update. Она отвечает за перемещения квадрата. Чтобы квадрат перемещался нужно взять переменную - массив keystate и подставить элемент кода клавиши которую вы нажали, потом создать условие проверки. Например, if(keystate[UpArrow]) и если условия равно true, то можно менять переменные x или y вычитая или прибавляя 7 в зависимости от нажатой клавиши. В этой же функции update нужно нарисовать наш квадрат (fillRect) с новыми координатами x и y. В начале функции нужно не забыть очистить экран (clearRect). Далее, чтобы ваш квадрат не перемещался за пределами поля нужно сделать следующее:

y = Math.max(Math.min(y, canvas.height - 80),0);
x = Math.max(Math.min(x, canvas.width - 40),0);

Всё, управление с помощью стрелок готово, весь код вы можете видеть ниже. Скопируйте в html документ код и запустите.
Пример листинг 2.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Player move</title>
</head>
<body>
<script>
var canvas, ctx;
var UpArrow=38, DownArrow = 40, LeftArrow = 37, RightArrow = 39;
var x = 40, y = 40;
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);
ctx.fillStyle = "rgb(150,190,255)";
ctx.fillRect(40, 40, 40, 80);
keystate = {};
player();
document.addEventListener("keydown",function(evt)
{
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup",function(evt)
{
delete keystate[evt.keyCode];
});

}
function player()
{
var loop = function()
{
update();
window.requestAnimationFrame(loop, canvas);
}
window.requestAnimationFrame(loop, canvas);
}
function update()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
if(keystate[UpArrow]) y -= 7;
if(keystate[DownArrow]) y += 7;
if(keystate[LeftArrow]) x -= 7;
if(keystate[RightArrow]) x += 7;
y = Math.max(Math.min(y, canvas.height - 80),0);
x = Math.max(Math.min(x, canvas.width - 40),0);
ctx.fillRect(x, y, 40, 80);
}
main();
</script>
</body>
</html>

Скачать исходники.

HTML5-> Статьи->Разгадывать кроссворды онлайн бесплатно


Перейти на главнуюВагон игр Назад

Просмотров: 350

Комментарий к этой заметки:

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

Введите капчу

 

Яндекс.Метрика