js实现人物移动（附有全部代码以及解析）

最新推荐文章于 2024-05-04 13:07:10 发布

GodGump

最新推荐文章于 2024-05-04 13:07:10 发布

阅读量2.2k

点赞数 1

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/113065452

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

实现的关键在于控制坐标x，y以及对象的创建和使用。直接看完整源码的直接看最后。
先谈一谈，x与y坐标的获取以及移动，获取元素用的是：document.getElementById（ByTag之类的也行，但是害怕有相同的还要去排除）。获取元素以后怎么移动呢？我们可以通过修改属性top和left来进行
代码可以这样写：

 var mymario = document.getElementById("mymario");
 var left = mymario.style.left;
 left = parseInt(left.substr(0, left.length - 2));
 mymario.style.left = (left+10) + "px";

为什么要使用substr？因为left不仅有数字还有px，比如100px。所以要删除px这两个字符。
完整代码：
html文件的代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/game.css" type="text/css" rel="stylesheet" />
    <script language="JavaScript" type="text/javascript">
        function Mario() {
            this.x = 0;
            this.y = 0;
            this.move = function(direct) {
                switch(direct) {
                    case 1:
                        var mymario = document.getElementById("mymario");
                        var left = mymario.style.left;
                        // window.alert( left );
                        left = parseInt(left.substr(0, left.length - 2));
                        mymario.style.left = (left+10) + "px";
                        break;
                    case 2:
                        var mymario = document.getElementById("mymario");
                        var top = mymario.style.top;
                        top = parseInt(top.substr(0, top.length - 2));
                        mymario.style.top = (top+10) + "px";
                        break;
                    case 3:
                        var mymario = document.getElementById("mymario");
                        var left = mymario.style.left;
                        left = parseInt(left.substr(0, left.length - 2));
                        mymario.style.left = (left-10) + "px";
                        break;
                    case 4:
                        var mymario = document.getElementById("mymario");
                        var top = mymario.style.top;
                        top = parseInt(top.substr(0, top.length - 2));
                        mymario.style.top = (top-10) + "px";
                        break;
                    default:
                        break;
                }
            }
        }
        //全局函数
        function move(direct) {
            switch(direct) {
                case 1:
                    mario.move(direct);
                    break;
                case 2:
                    mario.move(direct);
                    break;
                case 3:
                    mario.move(direct);
                    break;
                case 4:
                    mario.move(direct);
                    break;
                default:
                    break;
            }
        }
        var mario = new Mario();
    </script>>
</head>

<body>
<div class="game">
    <img id="mymario" style="left: 100px;top: 50px; width: 200px;position: absolute;"
         src="../static/IMG_20210124_113556.jpg" />
</div>
<table class="control" border="1px">
    <tr>
        <td colspan="3">控制台</td>
    </tr>
    <tr border="1px">
        <td></td>
        <td><input type="button" value="up" onclick="move(4)" /></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="button" value="left" onclick="move(3)" /></td>
        <td>mid</td>
        <td><input type="button" value="right" onclick="move(1)" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="down" onclick="move(2)" /></td>
        <td></td>
    </tr>

</table>
</body>

</html>

CSS文件的代码(game.css);

.game{
    width:500px;
    height: 400px;
    background: pink;
    position: absolute;
}
.control{
    width: 200px;
    height: 100px;
    border: 1px solid red;
}

运行结果：
在这里插入图片描述