JavaScript allows you to use a keyboard to control the movement of people and javascript instances.

Last Update:2014-08-29 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In fact, this example uses the js core time, the keyboard event onkeydown, and the periodical execution event setInterval.

Effect

When you press a key on the keyboard, the characters in the webpage can be used to control the movement.

Steps

I. Reserved key values:

W: Up
S: Down
A: left
D: Right
Space: Stop

2. After the key value is reserved, You need to capture the key event and determine which key the user presses?

You can use onkeydown to capture Keyboard Events.
You can use event. keyCode to obtain the key-value code.

3. Use setInterval to replace the image

The picture is replaced to achieve the task moving Effect
Note that the clearInterval clearing cycle is used for execution.

Sample Code:

<Html> 

Javascript code for keyboard control
<Style>
Tr. highlight {background: # 000006b; color: white ;}
</Style>
<Table border = "1" width = "70%" id = "ice">
<Tr>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
</Tr>
<Tr>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
</Tr>
<Tr>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
</Tr>
<Tr>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
</Tr>
<Tr>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
<Td> <input type = 'text'> </td>
</Tr>
</Table>
<Script ...... remaining full text>

ActionScript30 keyboard control
I didn't see your purpose in the code, but according to your question: the keyboard controls the movement of people. I understood it as controlling the movement of "instances" through the upper, lower, and lower arrows of the keyboard, my idea is: create two kinds of event listening for the instance, one is to press the mouse, the other is to press the keyboard, the keyboard is to play the number of pixels that the target moves, if the keyboard is to press, then, you can add an Event to this or others. The enter_frame event is executed every time a frame is exceeded. This event is mainly used to move the instance continuously when the keyboard direction key is long and pressed.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More