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


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

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

Скачать


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

Добавил: 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>

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

Назад

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

Оцените заметку: 1 2 3 4 5

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

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

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

 

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