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

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

直接上代码

 <!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>

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

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

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

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

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

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