使用js制作简单的推箱子

最新推荐文章于 2024-03-22 09:00:38 发布

Single-person

最新推荐文章于 2024-03-22 09:00:38 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/QQ134321678QQ/article/details/102575485

版权

使用js制作简单的推箱子

全部的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" align="right" cellspacing="0">

        <td colspan="2" align="center" bgcolor="#7fffd4">
            <p>自定义键位</p></td>
        </td>
    <br/>


        <td bgcolor="#7fffd4"><p>上</p></td>
        <td><input type="text" onkeyup="Adove(event)"/>
        </td>


    <td bgcolor="#7fffd4"><p>下</p></td>
        <td><input type="text" onkeyup="Below(event)"/>
        </td>


    <td bgcolor="#7fffd4"><p>左</p></td>
        <td><input type="text" onkeyup="left(event)"/>
        </td>


    <td bgcolor="#7fffd4"><p>右</p></td>
        <td><input type="text" onkeyup="Right(event)"/>
        </td>

        <td colspan="2" align="center"><input type="button" value="确定" onclick="c()"/>
        </td>
</table>
//js的代码
<label id="show"/>
<img id="img" src="Box.jpg" style="width: 80px; height: 80px;position: absolute;left: 0px;top: 0px; "/>
<script language="JavaScript">
    var  obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    //创建变量，用来储存用
    var Return, left2, right, bot;
    
    var up, lef, righ, bont;



    //点击事件的函数
    function c() {
        up = Return;
        lef = left2;
        righ = right;
        bont = bot;
        f();
    }

    function Adove(event) {

        Return = event.keyCode;
    }

    function Below(event) {

        bot = event.keyCode;
    }

    function left(event) {

        left2 = event.keyCode;
    }

    function Right(event) {

        right = event.keyCode;
    }

    function m() {
        console.log(event.keyCode);
        if (event.keyCode == lef) {
            obj.left -= 80;
        }
        if (event.keyCode == up) {
            obj.top -= 80;
        }
        if (event.keyCode == righ) {
            obj.left += 80;
        }
        if (event.keyCode == bont) {
            obj.top += 80;
        }
        obj.style.left = obj.left + 'px', obj.style.top = obj.top + 'px';
    }
    document.onkeydown = m;

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

下面是js代码

//js的代码
<label id="show"/>
<img id="img" src="Box.jpg" style="width: 80px; height: 80px;position: absolute;left: 0px;top: 0px; "/>
<script language="JavaScript">
    var  obj = document.getElementById("img");
    obj.left = 0;
    obj.top = 0;
    //创建变量，用来储存用
    var Return, left2, right, bot;
    
    var up, lef, righ, bont;



    //点击事件的函数
    function c() {
        up = Return;
        lef = left2;
        righ = right;
        bont = bot;
        f();
    }

    function Adove(event) {

        Return = event.keyCode;
    }

    function Below(event) {

        bot = event.keyCode;
    }

    function left(event) {

        left2 = event.keyCode;
    }

    function Right(event) {

        right = event.keyCode;
    }

    function m() {
        console.log(event.keyCode);
        if (event.keyCode == lef) {
            obj.left -= 80;
        }
        if (event.keyCode == up) {
            obj.top -= 80;
        }
        if (event.keyCode == righ) {
            obj.left += 80;
        }
        if (event.keyCode == bont) {
            obj.top += 80;
        }
        obj.style.left = obj.left + 'px', obj.style.top = obj.top + 'px';
    }
    document.onkeydown = m;

效果图

Single-person

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js制作简单的推箱子

使用js制作简单的推箱子全部的代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><table border="1" align="rig...
复制链接

扫一扫