键盘移动

只需再做一点微小的工作,你就可以建立一个通过鼠标控制精灵移动的简单系统。为了简化你的代码,我建议你用一个名为keyboard的自定义函数来监听和捕捉键盘事件。

  1. function keyboard(keyCode){
  2. let key ={};
  3. key.code = keyCode;
  4. key.isDown =false;
  5. key.isUp =true;
  6. key.press =undefined;
  7. key.release =undefined;
  8. //The `downHandler`
  9. key.downHandler = event =>{
  10. if(event.keyCode === key.code){
  11. if(key.isUp && key.press) key.press();
  12. key.isDown =true;
  13. key.isUp =false;
  14. }
  15. event.preventDefault();
  16. };
  17. //The `upHandler`
  18. key.upHandler = event =>{
  19. if(event.keyCode === key.code){
  20. if(key.isDown && key.release) key.release();
  21. key.isDown =false;
  22. key.isUp =true;
  23. }
  24. event.preventDefault();
  25. };
  26. //Attach event listeners
  27. window.addEventListener(
  28. "keydown", key.downHandler.bind(key),false
  29. );
  30. window.addEventListener(
  31. "keyup", key.upHandler.bind(key),false
  32. );
  33. return key;
  34. }

keyboard函数用起来很容易,可以像这样创建一个新的键盘对象:

  1. let keyObject = keyboard(asciiKeyCodeNumber);

这个函数只接受一个参数就是键盘对应的ASCII键值数,也就是你想监听的键盘按键。 这是键盘键ASSII值列表).

然后给键盘对象赋值pressrelease方法:

  1. keyObject.press =()=>{
  2. //key object pressed
  3. };
  4. keyObject.release =()=>{
  5. //key object released
  6. };

键盘对象也有 isDownisUp 的布尔值属性,你可以用它们来检查每个按键的状态。

examples文件夹里看一下keyboardMovement.html文件是怎么用keyboard函数的,利用键盘的方向键去控制精灵图。运行它,然后用上下左右按键去让猫在舞台上移动。

Keyboard movement

这里是代码:

  1. //Define any variables that are used in more than one function
  2. let cat, state;
  3. function setup(){
  4. //Create the `cat` sprite
  5. cat =newSprite(resources["images/cat.png"].texture);
  6. cat.y =96;
  7. cat.vx =0;
  8. cat.vy =0;
  9. app.stage.addChild(cat);
  10. //Capture the keyboard arrow keys
  11. let left = keyboard(37),
  12. up = keyboard(38),
  13. right = keyboard(39),
  14. down = keyboard(40);
  15. //Left arrow key `press` method
  16. left.press =()=>{
  17. //Change the cat's velocity when the key is pressed
  18. cat.vx =-5;
  19. cat.vy =0;
  20. };
  21. //Left arrow key `release` method
  22. left.release =()=>{
  23. //If the left arrow has been released, and the right arrow isn't down,
  24. //and the cat isn't moving vertically:
  25. //Stop the cat
  26. if(!right.isDown && cat.vy ===0){
  27. cat.vx =0;
  28. }
  29. };
  30. //Up
  31. up.press =()=>{
  32. cat.vy =-5;
  33. cat.vx =0;
  34. };
  35. up.release =()=>{
  36. if(!down.isDown && cat.vx ===0){
  37. cat.vy =0;
  38. }
  39. };
  40. //Right
  41. right.press =()=>{
  42. cat.vx =5;
  43. cat.vy =0;
  44. };
  45. right.release =()=>{
  46. if(!left.isDown && cat.vy ===0){
  47. cat.vx =0;
  48. }
  49. };
  50. //Down
  51. down.press =()=>{
  52. cat.vy =5;
  53. cat.vx =0;
  54. };
  55. down.release =()=>{
  56. if(!up.isDown && cat.vx ===0){
  57. cat.vy =0;
  58. }
  59. };
  60. //Set the game state
  61. state = play;
  62. //Start the game loop
  63. app.ticker.add(delta => gameLoop(delta));
  64. }
  65. function gameLoop(delta){
  66. //Update the current game state:
  67. state(delta);
  68. }
  69. function play(delta){
  70. //Use the cat's velocity to make it move
  71. cat.x += cat.vx;
  72. cat.y += cat.vy
  73. }