奔跑的绵羊js

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     <style type="text/css">
 7                     html,body{
 8                 height: 100%;
 9                 width: 100%;
10             }
11                     .stage{
12                 height:100%;
13                 width:100%;
14                 position: relative;
15                 background-color: #4a96ee;
16                 }
17                 .sheep{
18                     position: absolute;
19                     height: 122px;
20                     width: 164px;
21                     right: 0px;
22                     bottom: 300px;
23                     background-image: url(sheep.png);
24                     background-repeat: no-repeat;
25                     background-position: 0px 0px;
26                     cursor: -webkit-grabbing;
27                 }
28     </style>
29     </head>
30     
31 <body>
32         
33         <div id="stage" class="stage">
34 
35         </div>
36 
37 </div>
38         <script src="小羊咩咩.js" type="text/javascript" charset="utf-8"></script>
39     </body>
40 </html>

 1 var div=document.getElementsByTagName("div")[0];
 2 
 3 
 4 function sheepRun(sheep){
 5 sheep.backPoi=0;
 6 sheep.top=0;            //背景图片的y坐标
 7 
 8     window.setInterval(function(){
 9     sheep.backPoi=sheep.backPoi-164;
10     if(sheep.backPoi==-1312)
11     {
12         sheep.backPoi=0;
13     }
14     sheep.style.backgroundPosition=sheep.backPoi+"px "+sheep.top+"px ";
15     
16     sheep.style.left=sheep.offsetLeft-sheep.speed+"px ";
17 sheep.onmousedown=function(e)
18 {
19     var x=e.pageX;
20     var y=e.pageY;
21     sheep.x=e.pageX;
22     sheep.y=e.pageY;
23     i=1;
24     //alert("x:"+x+"y:"+y);
25     document.onmousemove=function(e){
26         i++;
27         chax=e.pageX-sheep.x;
28         chay=e.pageY-sheep.y;
29         console.log("onmousemove被调用"+i+"次 x:"+chax+"  y:"+chay);
30         sheep.style.left=sheep.offsetLeft+chax+"px";
31         sheep.style.top=sheep.offsetTop+chay+"px";
32         sheep.x=e.pageX;
33         sheep.y=e.pageY;
34         sheep.speed=0;
35         sheep.top=-122;
36     }
37     document.onmouseup=function(e){
38         document.onmousemove=null;
39         sheep.speed=sheep.staticspeed;
40         sheep.top=0;
41     }
42     
43 }
44 },100);}
45 function createsheeps(){
46     var _stage=stage;
47     var _sheepRun=sheepRun;
48     function createsheep(){
49     var sheep=document.createElement("div");
50     var num1=Math.floor(Math.random()*600);
51     var num2=Math.floor(Math.random()*1500);
52     sheep.style.bottom=num1+"px";
53     sheep.style.right=num2+"px";
54     var num3=Math.floor(Math.random()*30)
55     sheep.speed=num3;
56     sheep.staticspeed=10;
57     sheep.className="sheep";
58     _stage.appendChild(sheep);
59     _sheepRun(sheep);
60 }
61     window.setInterval(function(){
62         createsheep();    
63     },1000);
64 }
65 createsheeps();

相关阅读:
绘制八卦阵
 绘制奥运五环
 绘制渐变的圆
 实验报告
 大学排名
 第一条爬虫
 自己的第一个网页
 科学计算与可视化
 类和正则表达(自动更正代数运算)
预测比赛
原文地址：https://www.cnblogs.com/liugangjiayou/p/11645188.html