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);
}

 

運行圖片