js推箱子

最新推荐文章于 2022-07-07 15:49:17 发布

csdn-Allen

最新推荐文章于 2022-07-07 15:49:17 发布

阅读量234

点赞数

文章标签： js推箱子

本文链接：https://blog.csdn.net/baidu_41601299/article/details/102619170

版权

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。
<center>
    <h3>请自定义上下左右键</h3>
上：<input type="text" id="up" onkeyup="myFunction('up')" maxlength="1" ><br><br>
下：<input type="text" id="down" onkeyup="myFunction('down')" maxlength="1" ><br><br>
左：<input type="text" id="left" onkeyup="myFunction('left')" maxlength="1" ><br><br>
右：<input type="text" id="right" onkeyup="myFunction('right')" maxlength="1" ><br><br>
    <button onclick="xuigai()">确定修改</button>
</center>
    <label id="show"></label>

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

<script type="text/javascript">

    var obj = document.getElementById('img');
    obj.left = 0;
    obj.top = 0;
    var up ,down,left,right;
    var up1 ,down1,left1,right1;

    function xuigai() {
        up = up1;
        down = down1;
        left = left1;
        right = right1;
        alert(up + ";"+down+";"+left+";"+right);
        move();
    }

    function myFunction(str) {
        if (str == "up"){
            up1 = event.keyCode;
        }
        if (str == "down"){
            down1 = event.keyCode;
        }

        if (str == "left"){
            left1 = event.keyCode;
        }

        if (str == "right"){
            right1 = event.keyCode;
        }
    }

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

        if(event.keyCode == parseInt(up)) {
            //上
            obj.top -= 100;
        }

        if(event.keyCode == parseInt(down)) {
            //下
            obj.top += 100;
        }

        if(event.keyCode == parseInt(left)) {
            //左
            obj.left -= 100;
        }

        if(event.keyCode == parseInt(right)) {
            //右
            obj.left += 100;
        }
        obj.style.left = obj.left + "px",obj.style.top = obj.top + "px";
    }
    document.onkeydown = move;

</script>
</body>
</html>

图片素材：
在这里插入图片描述

csdn-Allen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js推箱子

Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><center> <h3>请自定义上下左右键...
复制链接

扫一扫