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

 

运行图片

 

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

 

以上是 js制作网页游戏-键盘控制人物移动 的全部内容， 来源链接： utcz.com/a/72183.html

回到顶部