KUOKUO的趣味教程 | 进击的小怪诞生(1)_键盘事件

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

开发微信小游戏5款

 H5 小游戏多款

 


第一章:进击的小怪诞生

 

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

 

KUOKUO的趣味教程 | 进击的小怪诞生(1)_键盘事件_02

 

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

 

 

  1.  
  2. cc.Class({
    
    extends: cc.Component,
    
    
    
    
    properties: {
    
    speed : 100
    
    },
    
    
    
    
    onLoad () {
    
    // 声明上下左右开关
    
    this.up = false;
    
    this.down = false;
    
    this.left = false;
    
    this.right = false;
    
    // 键盘事件,w s a d 上下左右
    
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
    
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    
    },
    
    
    
    
    /**
    
    * 按下键盘事件
    
    */
    
    onKeyDown (event) {
    
    switch(event.keyCode) {
    
    case cc.macro.KEY.w:
    
    this.up = true;
    
    break;
    
    case cc.macro.KEY.s:
    
    this.down = true;
    
    break;
    
    case cc.macro.KEY.a:
    
    this.left = true;
    
    break;
    
    case cc.macro.KEY.d:
    
    this.right = true;
    
    break;
    
    }
    
    },
    
    
    
    
    /**
    
    * 键盘抬起事件
    
    */
    
    onKeyUp (event) {
    
    switch(event.keyCode) {
    
    case cc.macro.KEY.w:
    
    this.up = false;
    
    break;
    
    case cc.macro.KEY.s:
    
    this.down = false;
    
    break;
    
    case cc.macro.KEY.a:
    
    this.left = false;
    
    break;
    
    case cc.macro.KEY.d:
    
    this.right = false;
    
    break;
    
    }
    
    },
    
    
    
    
    update (dt) {
    
    if (this.up) {
    
    this.node.y += this.speed * dt;
    
    }
    
    if (this.down) {
    
    this.node.y -= this.speed * dt;
    
    }
    
    if (this.left) {
    
    this.node.x -= this.speed * dt;
    
    }
    
    if (this.right) {
    
    this.node.x += this.speed * dt;
    
    }
    
    }
    
    });
  3.  

 

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

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

突然!!!

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

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

怎么打?不知道!先到达玩家位置再说!

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

KUOKUO的趣味教程 | 进击的小怪诞生(1)_键盘事件_04

 

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

看我的脚本(me),我是小怪!

  1.  
  2. cc.Class({
    
    extends: cc.Component,
    
    
    
    
    properties: {
    
    thinkCD : 1,
    
    speed : 80,
    
    // 玩家
    
    player : cc.Node
    
    },
    
    
    
    
    onLoad () {
    
    this.vector = cc.v2(0,0);
    
    },
    
    
    
    
    update (dt) {
    
    // 1 秒 1 次
    
    this.thinkCD -= dt;
    
    if (this.thinkCD <= 0) {
    
    this.thinkCD = 1;
    
    // 向量减法,计算方向向量
    
    this.vector = this.player.position.sub(this.node.position);
    
    }
    
    this.walkTo(this.vector, dt);
    
    },
    
    
    
    
    walkTo (v, dt) {
    
    // 归一化向量
    
    v.normalizeSelf();
    
    this.node.x += this.speed * dt * v.x;
    
    this.node.y += this.speed * dt * v.y;
    
    }
    
    });

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

 

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

 

 

未完待续...

 


 

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

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

 

 

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