用jQuery制作推箱子效果

本文链接： https://blog.csdn.net/qq_45747484/article/details/102736243
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<img src="formPhoto/3.png" id="img"
     style="width:80px;height:80px;
         position:absolute;left:0px;top:0px"/>
<div align="center">
    <p>修改上下左右快捷键</p>
    左：<input id="left" type="text" οnkeyup="shortcut('left')" maxlength="1"/><br/>
    上：<input id="up" type="text" οnkeyup="shortcut('up')" maxlength="1"/><br/>
    右：<input id="right" type="text" οnkeyup="shortcut('right')" maxlength="1"/><br/>
    下：<input id="down" type="text" οnkeyup="shortcut('down')" maxlength="1"/><br/>
    <br/><button οnclick="reg()">确定</button>
</div>

<script type="text/javascript">
    var obj = document.getElementById("img");

    var up, down,left,right;
    var one,two,three,four;
    obj.left = 0;
    obj.top = 0;

    //通过设置四个不同的参数来进行判断
    function shortcut(str){

        if(str == "up"){
            one = event.keyCode;
        }
        if(str == "down"){
            two = event.keyCode;
        }
        if(str == "left"){
            three = event.keyCode;
        }
        if(str == "right"){
            four = event.keyCode;
        }
    }

    function reg(){
        up = one;
        down = two;
        left = three;
        right = four;
        alert(up + ";" + down + ";" + left + ";" + right);
        move();
    }

    function move(){
        console.log(event.keyCode);

        if(event.keyCode == 37  || event.keyCode == parseInt(left)){
            //左
            obj.left -= 80;
        }
        if(event.keyCode == 38  || event.keyCode == parseInt(up)){
            //上
            obj.top -= 80;
        }
        if(event.keyCode == 39  || event.keyCode == parseInt(right)){
            //右
            obj.left += 80;
        }
        if(event.keyCode == 40  || event.keyCode == parseInt(down)){
            //下
            obj.top += 80;
        }
        obj.style.left = obj.left + 'px',obj.style.top = obj.top + 'px';
    }
    document.onkeydown = move;
</script>
</body>
用jQuery制作推箱子效果

猜你喜欢
