要实现游戏角色的移动这里写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); }
运行图片