Pixi.js 基础知识（四）

参考：
https://github.com/kittykatattack/learningPixi

通过循环移动小精灵

var cat;
function setup() { 
  cat = new Sprite(resources["images/cat.png"].texture); 
  cat.y = 96; 
  stage.addChild(cat); 

  // 要循环的函数
  gameLoop();
}

function gameLoop(){ 
  // 每秒 60 次 
  requestAnimationFrame(gameLoop); 

  // 每次使 cat 的 x 坐标加 1
  cat.x += 1; 

  renderer.render(stage);
}

使用速度

var cat;
function setup() { 
  ...
  // 设置速度
  cat.vx = 1;
  ...
}

function gameLoop(){ 
  ...
  // 按照速度进行移动
  cat.x += cat.vx; 
  ...
}

通过键盘来移动

基础键盘函数

function keyboard(keyCode) { 
  var key = {};
  key.code = keyCode;
  key.isDown = false; 
  key.isUp = true; 
  key.press = undefined;
  key.release = undefined; 

  key.downHandler = function(event) { 
    if (event.keyCode === key.code) {
       if (key.isUp && key.press) key.press(); 
    key.isDown = true; 
    key.isUp = false; 
    } 
  event.preventDefault(); 
  }; 

  key.upHandler = function(event) { 
    if (event.keyCode === key.code) { 
      if (key.isDown && key.release) key.release();
    key.isDown = false; 
    key.isUp = true; 
    } 
  event.preventDefault(); 
  };

  window.addEventListener( "keydown", key.downHandler.bind(key), false ); 
  window.addEventListener( "keyup", key.upHandler.bind(key), false ); 
  return key;
}

移动

// 按键移动
// 初始化速度
cat.vx = 0;
function setup() { 
  ...
  var right = keyboard(39);
  right.press = function() { 
    cat.vx = 5;
  }; 
  right.release = function() { 
    cat.vx = 0;
  };
  ...
}

function gameLoop(){ 
  ...
  // 按照速度进行移动
  cat.x += cat.vx; 
  ...
}