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

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

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

  • 写回答

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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试