Напоминаю, что в выпуске Реакция на клавиатуру, я показала базовые функции перехвата нажатий клавиш клавиатуры. Сейчас мы рассмотрим, как можно активизировать движение элементов при помощи клавиатуры. Идея проста: вы перехватываете нажатие какой-то клавиши и для неё вызываете соответствующий обработчик. В следующем фрагменте кода мы реализуем эту идею на примере клавиши "А", которая в Internet Explorer'е имеет код (ieKey) 65, а в Netscape (nKey) 97 соответственно.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 ieKey==65) { // if "A" key is pressed
slide()
}
}
function slide() {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}Активные переменные
Предыдущий скрипт слегка ограничен в том смысле, что как только движение начинается, мы не можем остановить его. И сейчас мы это исправим.
Мы будем использовать технику "активных" переменных, для кодирования состояния движения. Это движется? Или это не движется? Поскольку функции, имплементирующие движение, рекурсивны, они не обладают внутренними средствами для прерывания движения. И тут на сцену выходят активные переменные. Вставив в нужном месте if, вы обретаете контроль над движением объекта и решаете, должен ли он остановиться или продолжать движение. При этом функция будет выглядеть так:
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}В этом случае функция slide() будет действовать до тех пор, пока myobj.active=true. А как только вы установите myobj.active=false, движение прекратится. Используя этот приём, мы сейчас напишем код, который запускает движение красного блока при нажатии клавиши "А". Движение прекращается, когда мы отпускаем клавишу "А".
Отжатие клавиши и активные переменные
Обработчик на отжатие клавиши имплементируется аналогичным образом, как и обработчик нажатия клавиши. Вы можете инициализировать их оба следующим образом:
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN Event.KEYUP)
А вот собственно и keyUp():
function keyUp(e) {
if (ns4) var nKey = e.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==97 ieKey==65) block.active = false
}Чтобы наш код был совсем уж правильным и безошибочным, мы должны добавить кое-какие строчки и в другие функции. Забегая вперёд, в нижеследующем коде для функции keyDown выражение &&!block.active используется для того, чтобы вызвать движение объекта только если он не двигается. То есть если объект движется, функция slide() не может быть выполнена.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN Event.KEYUP)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if ((nKey==97 ieKey==65) && !block.active) { // if "A" key is pressed
block.active = true
slide()
}
}
function keyUp(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 ieKey==65) {
block.active = false // if "A" key is released
}
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
}Как узнать код клавиши?
Воспользуйтесь скриптом для определения nKey и ieKey. Вот полный листинг HTML файла и скрипта для такой странички:
<html>
<head>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function keyDown(e) {
if (ns4) {
var nKey = e.which
document.keyform.keytext.value = "nKey=" + nKey
}
if (ie4) {
var ieKey = event.keyCode
document.keyform.keytext.value = "ieKey=" + ieKey
}
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN) //-->
</script>
</head>
<body BGCOLOR="#FFFFFF">
<p>Here's a little tool for finding out what the nKey and ieKeys are.
<br>Use Netscape 4.0 and it'll show the nKey, use IE 4.0 and it'll show the ieKey
<form name="keyform">
<input size="12" value="Press a key" name="keytext">
</form>
</body>
</html>
Теперь вы можете создавать свои JavaScript игры, примеры которых можно найти в гугле по запросу http://www.google.com/search?hl=ru&q=javascript+game&lr=
По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/keystrokes.html
0 коммент.:
Отправить комментарий