前端入门（自留）——键盘事件

用户342658665928
256 阅读2分钟

相关知识

键盘事件

事件效果
onkeydown按下键盘按键
onkeyup松开键盘
onkeypress按下并释放按键

使用：<··· onkeydown=“函数或操作”> 或 Object.onkeydown

页面图片

0.png

  • 自行裁剪为16张图片，按上下左右分别编号。

  • 防止移动过程中忽大忽小，图片需要裁剪至人物边缘。

页面效果

初始状态小人位于页面左上角，面朝下。

通过按下 上下左右键 或 WSAD键，可以实现小人在页面上走动。

小人到达边缘时，只发生动作的变化，不发生位移。

keyEvent.gif

注意事项

css中，img需设置position: relative，否则无法进行移动

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键处理事件</title>
    <link type="text/css" rel="stylesheet" href="../css/keyEventDemo.css" />
</head>
<body>
    <div id="mainDiv">
        <img id="person" src="../images/keyEventDemo/d0.png" />
    </div>

    <!-- 导入外部js文件 -->
    <script type="text/javascript" src="../js/keyEventDemo.js"></script>
</body>
</html>

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#mainDiv{
    width: 55px;
    height: 55px;
    /* 便于移动 */
    position: relative;
}

img{
    width: 100%;
    height: 100%;
    /* 保持纵横比，图片按长边显示 */
    object-fit: contain;
}

// 四个方向的动画图片
var downImg = ['d0.png','d1.png','d2.png','d3.png'];
var upImg = ['u0.png','u1.png','u2.png','u3.png'];
var leftImg = ['l0.png','l1.png','l2.png','l3.png'];
var rightImg = ['r0.png','r1.png','r2.png','r3.png'];

var mainDiv = document.getElementById("mainDiv");
var person = document.getElementById("person");

// 图片文件夹路径
var imgSrc = "../images/keyEventDemo/";

// 获取div的宽度
var imgWidth = mainDiv.offsetWidth;
// 获取div的高度
var imgHeight = mainDiv.offsetHeight;

// 初始方向
var img = downImg;
var n=0;

// 判断按键方向
function onKeyDown(e){
    // IE8以下，Event对象必须作为window对象的一个属性
    e = e || window.event;

    // 获取x、y位置数值
    var x = dealPx(mainDiv.style.left);
    var y = dealPx(mainDiv.style.top);

    // 键盘按键（which属性和keyCode类似，但是不兼容IE8以下的浏览器）
    var keyId = e.keyCode ? e.keyCode : e.which;

    //上箭头/w键
    if (keyId == 38 || keyId == 87){
        // 防止出界
        if (y-10 >= 0) y -= 10;
        img = upImg;
    }
    //下箭头/s键
    if (keyId == 40 || keyId == 83){
        if (y + imgHeight < window.innerHeight) y += 10;
        img = downImg;
    }
    //左箭头/a键
    if (keyId == 37 || keyId == 65){
        if (x-10 >= 0) x -= 10;
        img = leftImg;
    }
    //右箭头/d键
    if (keyId == 39 || keyId == 68){
        if (x+10 < window.innerWidth) x += 10 ;
        img = rightImg;
    }
    working(x,y);
}

// 动画
function working(x,y){
    // 切换下一张图片
    person.src = imgSrc + img[++n];
    if (n == img.length-1) n=-1;
    // 改变坐标
    mainDiv.style.left = x + "px";
    mainDiv.style.top = y + "px";
}

//去掉像素单位px
function dealPx(pixelStr){
    var pixel = pixelStr.substring(0,pixelStr.indexOf('px'));
    if (pixel == "") return 0;
    return parseInt(pixel);
}

// 为整个窗口绑定keydown事件
window.onkeydown = onKeyDown;
avatar
文章
阅读
粉丝