使用键盘点击事件控制图片移动并增加改键功能

先使用javaScript事件实现点击按键控制图片移动

定义一个方法让上下左右键绑定键位
附上页面代码

        <img src="img/img1.jpg"  id="img" style="width: 120px;height: 120px;position: absolute;left: 0px;top: 0px">
        

 var img = document.getElementById('img')
    var imgnum=1
    img.left=0
    img.top=0
    function move(topKey,leftKey,downKey,rightKey) {
        imgnum++
        console.log(event.keyCode)
        if(event.keyCode==leftKey) {
            img.left -= 30
        }if(event.keyCode==topKey) {
            img.top -= 30
        }if(event.keyCode==rightKey) {
            img.left += 30
        }if(event.keyCode==downKey) {
            img.top += 30
        }
        //这段是为了有趣加上的,可有可无
        if(imgnum%4==1){
            img.src = "img/img1.jpg"
        }
        if(imgnum%4==2){
            img.src = "img/img2.jpg"
        }
        if(imgnum%4==3){
            img.src = "img/img3.jpg"
        }
        if(imgnum%4==0){
            img.src = "img/img4.jpg"
        }
        img.style.left = img.left + "px",img.style.top = img.top + "px"
    }
    document.onkeyup=setValues//可以直接调用keys方法,只是setvalues方法内实现了改键功能
    function keys(values) {
        topKey = values[0]!=null ? values[0] :38
        leftKey = values[1]!=null ? values[1] :37
        downKey = values[2]!=null ? values[2] :40
        rightKey = values[3]!=null ? values[3] :39
        move(topKey,leftKey,downKey,rightKey)
    }

为什么document绑定的键盘事件没写出来,以及keys方法中的参数时哪里来的?
因为一开始考虑的只是让图片完成移动效果,后来加上了改键效果更改了代码
剩余的代码,也就是改键的实现我在下面放出来

那么首先来看看单纯图片移动的效果

基本功能已经实现了,该实现改键功能了

先说说思路:利用四个按键触发按键捕捉,点击确定后将四个按键的键值赋给上面keys方法中的values数组,这样一来救能实现修改键位的功能
那么来看一下html跟js代码

<div style="width: 400px;height:700px;background-color: coral;float: right;padding: 20px 20px 20px 20px" >
            <p align="center">
                <br>
                自定义上下左右键
            </p>
            <p style="margin-top: 70px;height: 50px">
                <input type="button" style="width: 70px;height: 40px" value="上" onclick="setKey('top')">
                <span id="top">↑</span>
            </p>
            <p style="margin-top: 70px" >
                <input type="button" style="width: 70px;height: 40px" value="下" onclick="setKey('down')">
                <span id="down">↓</span>
            </p>
            <p style="margin-top: 70px" >
                <input type="button" style="width: 70px;height: 40px" value="左" onclick="setKey('left')">
                <span id="left">←</span>
            </p>
            <p style="margin-top: 70px">
                <input type="button" style="width: 70px;height: 40px" value="右" onclick="setKey('right')">
                <span id="right">→</span>
            </p>
            <p style="margin-top: 70px" align="center">
                <input type="button" style="width: 70px;height: 40px" value="确定" onclick="setValues()">
            </p>
        </div>

这里直接放上全部js代码方便理解

<script language="JavaScript">
    var img = document.getElementById('img')
    var imgnum=1
    img.left=0
    img.top=0
    function move(topKey,leftKey,downKey,rightKey) {
        imgnum++
        console.log(event.keyCode)
        if(event.keyCode==leftKey) {
            img.left -= 30
        }if(event.keyCode==topKey) {
            img.top -= 30
        }if(event.keyCode==rightKey) {
            img.left += 30
        }if(event.keyCode==downKey) {
            img.top += 30
        }
        if(imgnum%4==1){
            img.src = "img/img1.jpg"
        }
        if(imgnum%4==2){
            img.src = "img/img2.jpg"
        }
        if(imgnum%4==3){
            img.src = "img/img3.jpg"
        }
        if(imgnum%4==0){
            img.src = "img/img4.jpg"
        }
        img.style.left = img.left + "px",img.style.top = img.top + "px"
    }
    document.onkeyup=setValues
    function keys(values) {
        topKey = values[0]!=null ? values[0] :38
        leftKey = values[1]!=null ? values[1] :37
        downKey = values[2]!=null ? values[2] :40
        rightKey = values[3]!=null ? values[3] :39
        move(topKey,leftKey,downKey,rightKey)
    }
    var topspan = document.getElementById('top')
    var downspan = document.getElementById('down')
    var leftspan = document.getElementById('left')
    var rightspan = document.getElementById('right')
    var topvalue=topspan.value
    var downvalue=downspan.value
    var leftvalue=leftspan.value
    var rightvalue=rightspan.value
    function topSpan() {
        topspan.innerText = String.fromCharCode(event.keyCode)
        topvalue = event.keyCode
    }
    function downSpan() {
        downspan.innerText = String.fromCharCode(event.keyCode)
        downvalue = event.keyCode
    }
    function leftSpan() {
        leftspan.innerText = String.fromCharCode(event.keyCode)
        leftvalue = event.keyCode
            }
    function rightSpan() {
        rightspan.innerText = String.fromCharCode(event.keyCode)
        rightvalue =event.keyCode
       
    }
    function setKey(key) {
    //触发按键捕捉的方法并将键值赋给上面的value
        document.getElementById(key).innerText = '请点击按键'
        switch (key) {
            case 'top':document.onkeyup =topSpan
                break;
            case 'down':document.onkeyup =downSpan
                break;
            case 'left':document.onkeyup =leftSpan
                break;
            case 'right':document.onkeyup =rightSpan
                break;
        }

    }
    function setValues(){
    //点击确定键给document绑定上此方法,这样点确定之后就能重新操控页面
        document.onkeyup=setValues
        //之后的每次点击都会经过此方法给values赋值再调用keys方法
        var values =[topvalue,leftvalue,downvalue,rightvalue]
        keys(values)
    }
</script>

到此全部代码就完成了,代码我是一点点抠出来的,所以页面,方法和变量都很乱

最后是完整效果

大功告成
只推荐参考做法,代码本人都看不下去了…