ppl007110
2015-08-08 13:41
采纳率: 50%
浏览 2.3k
已采纳

在网页上做出这样一个小程序,老鼠跟随鼠标移动的问题。

就是一个小老鼠,它会跟着你的鼠标移动,左边有一个食物罐子,你单击,就会从中洒出一个圆点(食物),
当小老鼠靠近圆点时,它就会自动吃。右边是一个圆形的东西,你单击它,小老鼠就会
跑到里面,在其中不停地跑动,我需要具体怎么做。我是初学者,希望老师们能讲的详细一些。需要用什么语言,软件做。。之类的,尽量详细一些,谢谢。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • tsinggao 2015-08-09 04:35
    已采纳

    直接上代码

     <!DOCTYPE html>
    <html>
        <head>
            <script src="jquery.js">
            </script>
            <style>
                #mouse{
                    position:absolute;
                    border: 1px solid #fd3;
                    left: 100px;
                    top: 100px;
                }             
            </style>
            <script>
                var cursorX = '';
                var cursorY = '';
    
                $(document).ready(function(){
                  init();
                });
    
                $(document).ready(function(){
                  setInterval("updateMouse()",10);
                });
    
                function init(){
                    document.body.onmousemove = function(e){
                        if (!e) {
                            e = window.event;
                        }
                        else {
                            e.srcElement = e.target;
                        }
                        cursorX = e.clientX;
                        cursorY = e.clientY;
                        document.getElementById("debug").innerHTML = "cursorX:" + cursorX + " cursorY:" + cursorY;                  
                    };
    
                }
    
                function updateMouse(){
                    var mouse = document.getElementById("mouse");
                    var mouseX = mouse.offsetLeft;
                    var mouseY = mouse.offsetTop;
                    if((cursorX-mouseX)>10){
                        mouse.style.left = mouseX + 1 + "px";                   
                    }
                    if((cursorX-mouseX)<-10){
                        mouse.style.left = mouseX - 1 + "px";                   
                    }
                    if((cursorY-mouseY)>10){
                        mouse.style.top = mouseY + 1 + "px";                    
                    }
                    if((cursorY-mouseY)<-10){
                        mouse.style.top = mouseY - 1 + "px";                    
                    }
                    document.getElementById("debug2").innerHTML = "cursorX:"+cursorX+ " cursorY:"+cursorY + "<br>mouseX:"+mouseX+ " mouseY:"+mouseY ;   
                }
    
    
    
            </script>
        </head>
        <body >
                <div id="root" style="width:1200px;height:600px;border:1px solid #CCC">
                    <div id="mouse">
                        mouse
                    </div>      
                    <div id="debug" style="position:fixed;right:200px;top:200px;width:300px;height:200px;border:1px solid #CCC">
                    </div>
                    <div id="debug2" style="position:fixed;right:200px;top:500px;width:300px;height:200px;border:1px solid #CCC">
                    </div>
                    <div id="food" style="position:fixed;left:100px;top:200px;width:100px;height:100px;border:1px solid #CCC">食物
                    </div>
                    <div id="cage" style="position:fixed;right:800px;top:200px;width:100px;height:100px;border:1px solid #CCC">笼子
                    </div>
            </div>
        </body>    
    </html>
    
    已采纳该答案
    打赏 评论
  • oyljerry 2015-08-08 13:49

    http://blog.csdn.net/longteng1116/article/details/8764169

    js处理各种鼠标事件,然后配合图片素材。

    打赏 评论
  • threenewbee 2015-08-08 15:23

    既然你能看到blog,那么你直接访问那个网站看下是怎么实现的就可以了。

    无非两种,一个是 flash 做的,那么你反编译 flash,得到脚本。
    还有就是 javascript,那更简单,连反编译的不用,直接用 IE F12功能 抓脚本。

    用flash做是最简单的,不需要什么编程知识,当然任何语言都可以实现。如果你需要详细的帮助,请你给出你看的blog,程序效果。以及及时采纳我的回答,可以帮你。

    打赏 评论
  • tsinggao 2015-08-09 04:39

    单击食物和笼子的事件我没写了,思路如下,单击食物div层,将包含食物图片的div层由hidden变为block状态,在updateMouse()函数中增加对包含食物图片是否显示的判断,如果处于block状态,则老鼠不再跟随鼠标移动而往食物方向移动,当老鼠靠近食物时,将老鼠div层innerHTML属性改为包含一个老鼠吃食物的图片,如果点击笼子,原理跟老鼠吃食物一样。

    打赏 评论

相关推荐 更多相似问题