键盘控制小人运动的小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/ali359623/article/details/35837913

本文介绍了一个简单的小程序项目，通过键盘上下左右按键控制屏幕中小人的移动，并且随着移动方向的不同，小人的形象也会发生变化。项目使用了16张小人不同状态的图片作为素材，利用HTML和JavaScript实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

小人是自己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>

菜鸟之js事件学习