js制作网页游戏-键盘控制人物移动

要实现游戏角色的移动这里写4个方法

当数字键盘旁的上下左右键按时 fx的值就会改变 以此来改变角色的方向

var fx='r'  //初始方向
//绑定键盘事件
document.addEventListener("keydown",key,false);
function key(e) {
  var event = e || window.event;
  // console.log(event.key);
  switch (event.key) {
    case "ArrowRight":
      fx = 'r';
      break;
    case "ArrowLeft":
      fx = 'l';
      break;
    case "ArrowDown":
      fx = 'b';
      break;
    case "ArrowUp":
      fx = 't';
      break;
    }  
}

角色的模型是png格式 这时就需要2张图片的连续切换形成跑的动作 代码：

我这里四个方向共有8张图片 

var n = 0;
var s = 5;
//人物图片切换形成移动的方法　　定义 n和s 是每当调用5次qh()方法只执行1次 防止图片切换过快
function qh() {
  if (n % s == 0) {
    if (getUrl(ren.src) == "7_" + fx + "_5.png") {
      ren.src = "images/playImg/7_" + fx + "_6.png";
    } else {
      ren.src = "images/playImg/7_" + fx + "_5.png";
    }
    n = 1;
  }
  n++;
}

当我们可以控制人物上下左右不同跑动的姿势后 再来写角色的移动

var ren = document.getElementById("ren");//获取人物对象
var x = 0, y = 0;  //起始
var xs = 8, ys = 8; //速度
//人物移动的方法
function run() {
  switch (fx) {
    case "r":
      x += xs;
      break;
    case "l":
      x -= xs;
      break;
    case "b":
      y += ys;
      break;
    case "t":
      y -= ys;
      break;
  }
    ren.style.top = y + "px";
    ren.style.left = x + "px";
  }

当然啦 角色是要脱落文档流的，即设置position: absolute;

最后写个定时器 执行这些方法

function start() {
  timer = setInterval(function () {
    qh();
    run();
  }, 33);
}

 

运行图片