The 4th chapter of mobile Control
One, the principle of capturing keyboard keystrokes
There are many ways to control the movement of graphics in the game, commonly used keyboard control, mouse control and on-screen button control and so on. The keyboard control is relatively simple, more suitable for beginners, we first talk about this method.
In fact, every keystroke on the keyboard, when we press down, will send a number to the computer. For example A's number is 65,b is 66. In this chapter, we just need to remember 4 keys, they are the cursor up and down the key. The upward number is 38, the downward is 40, the left is 37, and the right is 39.
So the principle of keyboard capture is actually very simple, is to read the keyboard to the computer's number, and then according to this number to determine which key was pressed.
We need the "onkeydown" property to complete this operation. The format can usually be this:
<body onkeydown= "Functionkeydown (event)" >
For example, we need to determine which key is being pressed, and we can use the following code:
<Head><Script>functionFunctionkeydown (dir) {if(dir== -) Alert (" up");Else if(dir== +) Alert (" Down"); Else if(dir==Panax Notoginseng) Alert (" Left") Else if(dir== the) Alert (" Right");} </Script></Head> <Bodyonkeydown= "Functionkeydown (event)"></Body>
Second, use the keyboard cursor to move the graphic
Now that we've learned to capture a keyboard keystroke, we can use it to move the graphics on the screen!
The basic method is this: is through the keyboard keys to change the coordinates, such as the right, let the x-coordinate larger, if it is downward, let the y-coordinate a little larger. Isn't it simple?
Here is a complete picture of a block, using the keyboard to control the example of its movement.
<HTML><Head><title>Movement</title><Script>varx=0;vary=0;functiongoup () {y-= -;}functionGodown () {y+= -;}functionGoleft () {x-= -;}functionGoRight () {x+= -;}functiondirection (dir) {if(dir== -) goup (); Else if(dir== +) Godown (); Else if(dir==Panax Notoginseng) Goleft (); Else if(dir== the) GoRight ();}functionRefresh () {Ctx.clearrect (0,0, Cvs.width,cvs.height); Ctx.fillrect (x, Y, -, -);}</Script></Head><Bodyonkeydown= "direction (event)"><CanvasID= "Can"width= "The "Height= "The "></Canvas><Script>varCVS=getElementById ("can");varCTX=Cvs.getcontext ("2d"); Ctx.fillstyle="Red";varSetint=SetInterval ("Refresh ()", -);</Script></Body></HTML>
All right, try it, press the key around the keyboard to see if the box is moving? Is it a bit of a sense of accomplishment? The original game is not complicated, right?
0 Basic HTML5 Game Making tutorial 4th Chapter mobile Control
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
