让图片直线移动到鼠标点击位置,类似游戏里的人物走动!

最新推荐文章于 2024-09-08 22:00:13 发布
最新推荐文章于 2024-09-08 22:00:13 发布
阅读量584 收藏
点赞数
分类专栏： JavaScript 文章标签： 游戏 null function
 
  1. <body onclick="moveImg(event);">
  2. <div style="position:absolute;left:0px;top:0px;" id="img"><img src="img.gif"></div>
  3. </body>
  4. <script>
  5.     var img=document.getElementById("img");
  6.     var time=5;//时间,单位毫秒
  7.     var speed=2;//(speed/time)速度,单位象素,起点到终点的直线速度
  8.     var moveObj=null;
  10.     function moveImg(event){
  11.         var eventevent=event||window.event;
  12.         if(moveObj!=null){
  13.             window.clearInterval(moveObj);
  14.             moveObj=null;
  15.         }
  16.         var imgX=parseInt(img.style.left);
  17.         var imgY=parseInt(img.style.top);
  18.         var moveX=event.clientX;
  19.         var moveY=event.clientY;
  20.         var x=moveX-imgX;
  21.         var y=moveY-imgY;
  22.         //计算速度基数
  23.         var speedspeedNum=speed/Math.sqrt(x*x+y*y);
  24.         //计算X轴速度
  25.         var speedX=speedNum*x;
  26.         //计算Y轴速度
  27.         var speedY=speedNum*y;        
  28.         //alert(speedX+":"+speedY);
  29.         //移动图片
  30.         moveObj=window.setInterval(function(){moveImage(speedX,speedY,moveX,moveY);},time);
  31.     }
  32.     var mx=0;my=0;
  33.     function moveImage(x,y,endX,endY){
  34.         //由于网页上left属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变left属性
  35.         mxmx=mx+x;
  36.         var m=Math.floor(mx);
  37.         if(m<0){
  38.             m++;
  39.         }
  40.         if(m>=1 || m<=-1){
  41.             img.style.left=(parseInt(img.style.left)+m)+"px";
  42.             mxmx=mx-m;
  43.         }
  44.         //由于网页上top属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变top属性
  45.         mymy=my+y;
  46.         var n=Math.floor(my);
  47.         if(n<0){
  48.             n++;
  49.         }
  50.         if(n>=1 || n<=-1){
  51.             img.style.top=(parseInt(img.style.top)+n)+"px";
  52.             mymy=my-n;
  53.         }
  54.         //当移动到指定位置时停止移动
  55.         var xflag=false;
  56.         var yflag=false;
  57.         if(x>=0){
  58.             if(parseInt(img.style.left)>=endX){
  59.                 xflag=true;
  60.             }
  61.         }else{
  62.             if(parseInt(img.style.left)<=endX){
  63.                 xflag=true;
  64.             }
  65.         }
  66.         if(y>=0){
  67.             if(parseInt(img.style.top)>=endY){
  68.                 yflag=true;
  69.             }
  70.         }else{
  71.             if(parseInt(img.style.top)<=endY){
  72.                 yflag=true;
  73.             }
  74.         }
  75.         if(xflag && yflag){
  76.             window.clearInterval(moveObj);
  77.             moveObj=null;
  78.         }
  79.     }
  80. </script>


http://blog.csdn.net/lip009/archive/2007/11/15/1887357.aspx
流浪狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3直线运动_CSS3实现动画线条运动效果实例集合（一）
weixin_39648492的博客
12-20 1626
在我们日常的开发中，有时候有的图片，布局块需要加一下边框运动效果，对于这些效果，我们可以使用CSS3动画属性animation，再配合css的一些技巧制作出来。下面是收藏的一些效果实例。1、边框流动效果html：css3效果的内容部分css:.css3-1{width: 200px;height: 200px;position: relative;}.css3-1::after,.css3-1::...
把小人移动到鼠标点击的位置
sdfujichao的博客
05-07 715
让人移动到鼠标点击的位置。而且移动的速度是变化的。一开始让img的图片是图片1，鼠标点击后就立马变化图片2，清除时钟，根据(event.clientY - imgPre.offsetTop)/10计算速度产生时刻变化的速度。判断小人是否已经走到鼠标点击的位置（需要有X和Y的坐标都到达才行。）清除时钟。 var imgPre = document.g
游戏人物跟随鼠标移动的实现
On the way
03-09 4150
在游戏编程中，会遇到一个简单的问题，那就是鼠标移动人物也向鼠标移动的方向移动。其实，它非常简单。         在程序中，我们设置两个不同的点point1、point2。point1保存人物贴图的坐标，而point2保存鼠标的坐标。设定每次贴图时，贴图坐标point1都会以10个或其它单位缓缓向point2靠拢(即x、y坐标进行相应的加减)，直至坐标相同。这样在每帧的绘画中，就实现了移动的动画
微信小程序———点击屏幕涟漪效果
Fighting社火底子
08-14 4350
js中 containerTap: function (res) { console.log(res.touches[0]); var x = res.touches[0].pageX; var y = res.touches[0].pageY + 85; this.setData({ rippleStyle: '' }); th...
【VC++游戏开发#十】2D篇 —— 人工智能(一)：滚动地图 & 用鼠标控制人物的走动
走在游戏开发道路上的青年 —— BlueCoder(黎小华)的博客
01-09 1万+
Hello，大家好^_^漫长的期末考试总算结束，终于有时间继续做自己喜欢的事儿了——今天，继续我们的游戏梦想……最近，有款端游很受欢迎哈——腾讯推出的一款3D竞技端游，想必很多朋友应该玩过吧。不过说实话，我没玩过，但看过室友玩过(因为我不喜欢玩游戏，这似乎听起来挺别扭的——一个喜欢研究游戏开发的，却不喜欢玩儿^_^)F话不多说了，在这款(或类似的)端游中，我们经常会看见一个场景：用鼠标控制自己的角
CocosCreator中使玩家移动到点击位置
热门推荐
xinsong520的博客
07-20 2万+
var pol = this.tanke.getPosition()        将一个点转换到canvas节点 (局部) 空间坐标系        var temp=this.node.convertToNodeSpaceAR(cc.p(0,0))        将tanke的坐标设置为canvas节点坐标        this.tanke.setPosition(temp)
win32人物行走
12-19
在这个名为“win32人物行走”的项目中，我们将探讨如何在Visual Studio 2005环境下利用Win32 API实现一个简单的游戏场景，特别是角色的移动和地图绘制。 首先，让我们了解VS2005，这是一个由Microsoft开发的集成...
照片动起来php源码,用特简单代码让图片动起来
weixin_42327743的博客
03-26 720
插入图片，单击源代码按钮，图片自动生成源代码，在自动生成的源代码的开头处和结尾处加上特简单的代码标记，图片就能上下左右来回走动起来，so easy ！1.代码A 图片向左移动代码：“图片”2.代码B 图片来回移动代码：图片 3.代码C 图片向各个方向(上下左右)移动代码：图片语法理解：1. ， 是一对代码标记，一个在前面(代码开头处)拉，一个在后面(代码结尾处)推，中间的图片就向前移动了。2....
照片动起来php源码,如何用特简单代码让图片动起来？
weixin_42339061的博客
03-26 605
如何用特简单代码让图片动起？插入图片，单击源代码按钮，图片自动生成源代码，在自动生成的源代码的开头处和结尾处加上特简单的代码标记，图片就能上下左右来回走动起来，so easy ！1.代码A 图片向左移动代码：“图片”2.代码B 图片来回移动代码：图片 3.代码C 图片向各个方向(上下左右)移动代码：图片4.代码D 图片由中间向两边移动(也可以用不透明的flash)：代码D用到以下flash图...
让玩家移动到鼠标点击的位置
简若的博客
05-17 802
bool finish = true; Vector3 pos; public int speed = 10; void Start() { } void Update() { if (Input.GetMouseButtonDown(0)) { Ray ray = Ca...
1.第二阶段x86游戏实战2-前言
计算机王的博客
09-04 475
游戏逆向、游戏安全、游戏攻防、c++、反游戏外挂、保姆级攻略、Windows
游戏录屏掉帧怎么办？有什么录屏软件推荐吗？
higeshihuifu的博客
09-06 972
对于广大游戏爱好者来说，录制游戏精彩瞬间、分享攻略或制作教程已经成为一种常态。然而，在录屏过程中，不少玩家都会遇到掉帧的问题，这不仅影响了视频的流畅度，也大大降低了观看体验。那么，面对游戏录屏掉帧的困扰，我们该如何解决？又有哪些录屏软件值得推荐呢？下面就一起来看看吧。一、解决游戏录屏掉帧的方法游戏录屏掉帧的原因往往与电脑配置、录屏软件性能以及录屏设置有关，为了避免掉帧，可以尝试以下方法：1、优化电脑配置：确保我们的电脑硬件，如CPU、显卡、内存等，满足游戏和录屏的双重需求。2、选择合适的录屏软件：选择一款性
Unity下如何播放8K超高分辨率的RTMP流？
最新发布
乐学吧
09-08 611
使用Unity RTMP播放器播放8K流需要综合考虑硬件、软件、网络带宽和稳定性等多个方面的因素。通过选择合适的插件、配置播放器、优化网络带宽和稳定性以及进行调试和优化等步骤，可以实现高质量的8K视频流播放。以Android平台为例，通过实际测试，在quest3头显，配合我们的RTSP|RTMP播放器，在unity下，可以实现毫秒级延迟的8K视频数据播放，如果是Windows平台，设备性能相对会更好一些。
虚幻引擎（Unreal Engine）技术使得《黑神话悟空传》大火，现在重视C++的开始吃香了，JAVA，Go，Unity都不能和C++相媲美！
zhang9880000的博客
08-27 4046
C++ 的虚拟引擎技术通常指的是使用 C++ 语言开发的游戏引擎，如虚幻引擎（Unreal Engine）等。以下是对 C++ 虚拟引擎技术一、强大的性能表现高效的内存管理C++ 允许开发者对内存进行精细的控制。在虚拟引擎中，可以根据具体需求进行内存分配和释放，避免不必要的内存开销。例如，在处理大规模场景和复杂模型时，可以通过自定义内存分配器来优化内存使用，提高性能。通过指针操作和直接内存访问，C++ 可以实现高效的数据存储和访问。
怎样让人物模型按指定的路径来回走动
05-24
要让人物模型按指定的路径来回走动，可以采用以下步骤： 1. 创建路径 首先，需要在场景中创建路径。可以使用Unity的Path工具，或者手动在场景中放置一些参考物体，然后根据它们创建路径。 2. 添加动画控制器 接下来，需要为人物模型添加动画控制器。在动画控制器中，可以定义人物模型需要执行的动画。 3. 实现路径跟随 将人物模型放置在路径的起点，并且让它跟随路径移动。可以使用Unity的NavMesh Agent组件，或者自己编写脚本实现路径跟随。 4. 实现往返移动 当人物模型到达路径终点时，需要让它往回走动。可以编写脚本实现往返移动，或者使用Unity的Animation事件。 下面是一个简单的示例代码，实现了一个往返移动的人物模型： ```csharp using UnityEngine; using System.Collections; public class PathFollow : MonoBehaviour { public Transform[] waypoints; // 路径点 public float speed = 2.0f; // 移动速度 private int currentWaypoint = 0; // 当前路径点 private bool forward = true; // 是否向前移动 void Update() { // 计算移动方向 Vector3 direction = waypoints[currentWaypoint].position - transform.position; direction.y = 0; // 忽略y轴的移动 direction.Normalize(); // 移动人物模型 transform.Translate(direction * speed * Time.deltaTime, Space.World); // 到达路径点时，更新路径点 if (Vector3.Distance(transform.position, waypoints[currentWaypoint].position) < 0.1f) { if (forward) { currentWaypoint++; if (currentWaypoint >= waypoints.Length) { currentWaypoint = waypoints.Length - 2; forward = false; } } else { currentWaypoint--; if (currentWaypoint < 0) { currentWaypoint = 1; forward = true; } } } } } ``` 这个代码实现了一个往返移动的人物模型，它会按照路径来回移动，并且可以控制移动速度。在使用时，只需要将路径点拖到waypoints数组中即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值