KUOKUO的趣味教程 | 进击的小怪诞生(1)

EEA阔宝：专注 CocosCreator 引擎小游戏开发两年

开发微信小游戏5款

 H5 小游戏多款

CSDN 博客： KUOKUO 众享

---

第一章：进击的小怪诞生

这，本该是一片虚无之地，却有一个 960*640 的神秘领域降临（Canvas）... 这，本该是一块荒凉之所，却有一个玩家凭空产生（player节点）...

咦！！！冥冥之中，好似有一股神秘的力量操纵着玩家，player节点上绑定player-control脚本：

1. cc.Class({

2. extends: cc.Component,

3. properties: {

4. speed : 100

5. },

6. onLoad () {

7. // 声明上下左右开关

8. this.up = false;

9. this.down = false;

10. this.left = false;

11. this.right = false;

12. // 键盘事件,w s a d 上下左右

13. cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);

14. cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);

15. },

16. /**

17. * 按下键盘事件

18. */

19. onKeyDown (event) {

20. switch(event.keyCode) {

21. case cc.macro.KEY.w:

22. this.up = true;

23. break;

24. case cc.macro.KEY.s:

25. this.down = true;

26. break;

27. case cc.macro.KEY.a:

28. this.left = true;

29. break;

30. case cc.macro.KEY.d:

31. this.right = true;

32. break;

33. }

34. },

35. /**

36. * 键盘抬起事件

37. */

38. onKeyUp (event) {

39. switch(event.keyCode) {

40. case cc.macro.KEY.w:

41. this.up = false;

42. break;

43. case cc.macro.KEY.s:

44. this.down = false;

45. break;

46. case cc.macro.KEY.a:

47. this.left = false;

48. break;

49. case cc.macro.KEY.d:

50. this.right = false;

51. break;

52. }

53. },

54. update (dt) {

55. if (this.up) {

56. this.node.y += this.speed * dt;

57. }

58. if (this.down) {

59. this.node.y -= this.speed * dt;

60. }

61. if (this.left) {

62. this.node.x -= this.speed * dt;

63. }

64. if (this.right) {

65. this.node.x += this.speed * dt;

66. }

67. }

68. });

尝试按下W、S、A、D这向个键，玩家居然动起来了，真是神奇... ...

突然！！！

虚空中喷薄而出的能量席卷了这个领域，玩家身上的所有装备被损坏，失去了攻击力，而与此同时，一个奇怪的东西乱入了进来... 

我 KUOKUO！一个小怪，诞生啦！虽然我只是一个小方块，不知如何攻击，甚至没有血量，但是我有一个信念：到达玩家位置，打他！！！

怎么打？不知道！先到达玩家位置再说！

我，下图中的me节点，诞生在了地图左上角 ... 

啊，头好疼，穿越到游戏里面来了！我每秒钟好像只能思考 1 次，速度为80迈！

看我的脚本（me），我是小怪！

1. cc.Class({

2. extends: cc.Component,

3. properties: {

4. thinkCD : 1,

5. speed : 80,

6. // 玩家

7. player : cc.Node

8. },

9. onLoad () {

10. this.vector = cc.v2(0,0);

11. },

12. update (dt) {

13. // 1 秒 1 次

14. this.thinkCD -= dt;

15. if (this.thinkCD <= 0) {

16. this.thinkCD = 1;

17. // 向量减法，计算方向向量

18. this.vector = this.player.position.sub(this.node.position);

19. }

20. this.walkTo(this.vector, dt);

21. },

22. walkTo (v, dt) {

23. // 归一化向量

24. v.normalizeSelf();

25. this.node.x += this.speed * dt * v.x;

26. this.node.y += this.speed * dt * v.y;

27. }

28. });

我：玩家别跑！ 玩家：啊....W、A、S、D...  O(∩_∩)O~~

未完待续...

---

感谢 「EEA阔宝」有趣的教程，让学习也变如此乐趣！「奎特尔星球」欢迎大家投稿，有意的朋友可以加我微信，愿我们一起共同成长！