自定义按键控制图片移动-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45747582/article/details/102575339

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义按键使图片移动</title>
</head>
<body>
<label id="show"/>
<img id="img"src="xiao.jpg"  style="width: 80px;position: absolute;left: 0px;top: 0px"/>
<table align="center"  >
    <tr>
        <td align="center" ></td>
    </tr>
    <tr>
        <td>上：</td>
        <td><input type="text" id="up" onkeyup="myFunction('up')" maxlength="1"></td>
    </tr>
    <tr>
        <td>下：</td>
        <td><input type="text" id="down " onkeyup="myFunction('down')" maxlength="1"></td>
    </tr>
    <tr>
        <td>左：</td>
        <td><input type="text" id="left" onkeyup="myFunction('left')" maxlength="1"></td>
    </tr>
    <tr>
        <td>右：</td>
        <td><input type="text" id="right " onkeyup="myFunction('right')" maxlength="1"></td>
    </tr>
    <tr>
        <td align="center" ><input type="button" value="确定" onclick="confirm()" /></td>
    </tr>
</table>
<script language="JavaScript">
    var obj=document.getElementById("img");
    obj.left=0;
    obj.top=0;
    var up, down, left, right;
    var up1, down1, left1, right1;
    //确定事件函数
    function confirm() {
        up = up1;
        down = down1;
        left = left1;
        right = right1;
        alert(up + ";" + down + ";" + left + ";" + right);
        fkey();
    }
    function myFunction(str) {
        var Key = window.event.keyCode;
        if (str == "up") {
            up1 = Key;
        }
        if (str == "down") {
            down1 = Key;
        }
        if (str == "left") {
            left1 = Key;
        }
        if (str == "right") {
            right1 = Key;
        }
    }
    function move(){
       console.log(event.keyCode);
        var Key = window.event.keyCode;
        if(event.keyCode==37||Key == parseInt(left)){
           obj.left-=80;
        }
        if(event.keyCode==38||Key == parseInt(up)){
            obj.top-=80;
        }
        if(event.keyCode==39||Key == parseInt(right)){
            obj.left+=80;
        }
        if(event.keyCode==40||Key == parseInt(down)){
            obj.top+=80;
        }
        obj.style.left=obj.left+'px',obj.style.top=obj.top+'px';
    }
    document.onkeydown=move;
</script>
</body>
</html>