回味小时候拿着诺基亚玩的推箱子_诺基亚有推箱子游戏吗-CSDN博客

本文链接：https://blog.csdn.net/ChengZiYa_/article/details/102595397

#用js实现小时候玩的推箱子的小游戏

第一步：首先先找到一张好看的图片作为咱们的主角用
在这里插入图片描述
选中的是我刚创建的页面

然后具体内容我们先来看一下：

<body>
<table border="0" style="margin-bottom: 100px" cellspacing="0">
    <br /><br /><br /><br />
    <td><p>上</p></td>
    <td><input type="text" onkeyup="Adove(event)"/>
    </td>

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

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

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

    <td colspan="2" align="center"><input type="button" value="设置" onclick="c()"/>
    </td>
</table>

<label id="show"/>
<img id="img" src="mali.jpg" style="width: 100px; height: 100px;position: absolute;margin-left: 8px;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;
        c();
    }

    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>

然后我们具体看一下它的功能
这样我们就完成了一个小时候经常玩的推箱子的小游戏