当前位置：首页>編程日記>正文

菜鸟之js事件学习

編程日記08-29

菜鸟之js事件学习

看了视频教程仿制了小程序

小人是自己ps的感觉还挺不错的

ren_h_1,ren_h_2,ren_h_3,ren_h_4,ren_l_1,ren_q_1,ren_r_1

功能：使用键盘的上下左右控制小人的运动

材料：16张小人的静态图片，分别为小人的行走静态图片

js代码：

var ren = document.getElementById("ren");
var val = null;
var keynum = null;
var keyDirec = "q";
var xx = 0;
var yy = 0;
var pxs = 0; //横坐标增加速度
var pys = 0; //纵坐标增加速度//跑动
function run() {if (val != null) { clearInterval(val); }val = setInterval(function () { changePic(keyDirec);positionChange();},100)
}//坐标变化
function positionChange() {xx += pxs;yy += pys;ren.style.left = xx;ren.style.top = yy;}
//键盘事件
window.document.onkeydown = function (e) {var ev = e || window.event || arguments.callee.caller.arguments[0]; //兼容性处理keynum = ev.keyCode;switch (keynum) {case 38:pys = -5;pxs = 0;keyDirec = "h";break;case 37:pys = 0;pxs = -5;keyDirec = "l";break;case 39:pys = 0;pxs = 5;keyDirec = "r";break;case 40:pys = 5;pxs = 0;keyDirec = "q";break;default:pys = 5;pxs = 0;keyDirec = "q";break;}run();
}//图片切换
function changePic(direc) {var PicNum = getPicURL(ren.src).charAt(6);if (PicNum == 1) {setPicUrl(direc, "2")} else if (PicNum == 2) {setPicUrl(direc, "3")} else if (PicNum == 3) {setPicUrl(direc, "4")} else {setPicUrl(direc, "1")}
}//修改图片路径方法
function setPicUrl(direction,picNum) {ren.src = "images/ren_" + direction +"_"+ picNum + ".gif";
}//获取图片名称
function getPicURL(url){var loc = url.lastIndexOf("/") + 1;return url.substr(loc);
}

HTML代码：

<html>
<head><title>运动</title></head>
<body><div><img id="ren" src="images/ren_q_1.gif" style="position:absolute;left:0px;top:0px;border:0px " /></div><script type="text/javascript" src="js/yundong.js"></script>
</body>
</html>

查看全文

https://www.fengoutiyan.com/post/17580.html