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

实现的关键在于控制坐标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;
}

运行结果：

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

中国大学MOOC课程《Python语言程序设计》第6章文本词频人物统计 threekingdoms三国演义代码及解析
以下内容为嵩天老师在课堂上讲解的,分析三国演义中top20人物,也就是出现次数最高的20个人物.为方便童鞋们拷贝,我把代码及解析放到下面,且我多费了点人工,整出top30.通过这个例子可以很好地理解解 ...
人员关系html,html5简单的人物关系图制作代码
特效描述:html5 人物关系图制作.jQuery html5图片创建人物关系图,引入js和jtopo,可以动态修改图片,人物关系结构制作代码代码结构 1. 引入JS 2. HTML代码 $(doc ...
html 3d 人物,jquery html5三维线性人物关系图特效代码
特效描述:jquery html5三维线性人物关系图特效.人物关系图特效代码结构 1. 引入JS 2. HTML代码 require.config({ packages:[{ name:'echa ...
JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
怎么在vue的@click里面直接写js_【转】为 Node.js 贡献你的力量 ———— 调试代码
原文作者:百万扩散性甜面包 himself65 原文链接: 为 Node.js 贡献你的力量 ---- 调试代码www.himself65.com Node.js 作为一个世界级的项目,能为它贡献源 ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...

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

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

最新文章

热门文章