ボールの動き

  1 <！DOCTYPE HTML>
   2 <HTML>
   3 <ヘッド>
   4 <メタのcharset = "UTF-8">
   5 <タイトル> </タイトル>
   6 <スタイルタイプ= "テキスト/ CSS">
   7  #box {幅： 500pxなど;高さ：500pxなど;ボーダー：1ピクセルベタ黒;位置：相対;}
   8 #ball {幅20ピクセル、高さ20ピクセル、背景色：赤、境界半径：50％;位置：絶対;左：0。上部：0 ;}
   9 </スタイル>
 10 </ HEAD>
 11 <body>
 12 <DIV ID = "ボックス">
 13 <DIV ID = "ボール">
 14  
15 <
/ DIV> 16 </ DIV>
 17<INPUT TYPE = "ボタン" NAME = "BTN" ID = "BTN"値= "启动" />
 18 </ BODY>
 19 <スクリプトタイプ= "テキスト/ javascriptの">
 20  // 获取节点
21  のvar obox =文書.querySelector（ "＃ボックス" ）;
22  VAR oball = document.querySelector（ "＃ボール" ）;
23  のvar obtn = document.querySelector（ "＃のBTN" ）;
24  VARの速度= 10 。
25  のvar topspeed = 0 。
26  のvar トン。
27 obtn。onclickの= 関数（）{
 28  てclearInterval（T）。
29T =のsetInterval（関数（）{
 30  
31  であれば（oball.offsetLeft> 480 ）{
 32速度= - 速度;
 33 oball.style.left = oball.offsetLeft +スピード+ "ピクセル" ;
 34  }
 35  そう であれば（oball。 offsetLeft <0 ）{
 36速度= - 速度;
 37 oball.style.left = oball.offsetLeft +スピード+ "ピクセル" ;
 38 } 他{
 39 oball.style.left = oball.offsetLeft +速度+ "PX" 、
 40  }
 41  
42  
43  もし（oball.offsetTop> 480 ）{
 44 topspeed = - topspeed。
45 oball.style.top = oball.offsetTop + topspeed + "PX" 。
46  }
 47  そう であれば（oball.offsetTop <0 ）{
 48 topspeed = - topspeed。
49 oball.style.top = oball.offsetTop + topspeed + "PX" 。
50 } 他{
 51 oball.style.top = oball.offsetTop + topspeed + "PX" 。
52  }
 53  
54  
55 document.onkeydown = 関数（イブ）{
 56、E =前夜||window.event;
57  // 左走
58  であれば（e.keyCodeの== 37 ）{
 59  であれば（速度> 0 ）{
 60  
61速度= -10 。
62 
63 } そう であれば（速度== 0 ）{
 64速度= -10 。
65 = 0 topspeed 。
66  }
 67  }
 68  // 右走
69  であれば（e.keyCode == 39 ）{
 70  であれば（速度<0 ）{
 71速度= - 速度。
72  
73} そう であれば（速度== 0 ）{
 74速度= 10 。
75 = 0 topspeed 。
76  }
 77  }
 78  
79  //     上走
80の 場合（e.keyCode == 38 ）{
 81  であれば（topspeed> 0 ）{
 82 topspeed = -10 。
83  
84 } そう であれば（topspeed == 0 ）{
 85 topspeed = -10 。
86速度= 0 。
87  
88  }
 89  }
 90 
91  //     下走
92  であれば（e.keyCode == 40 ）{
 93  であれば（topspeed <0 ）{
 94 = 10 topspeed 。
95  
96 } そう であれば（topspeed == 0 ）{
 97 topspeed = 10 。
98速度= 0 。
99  
100  }
 101  }
 102  
103  }
 104  
105 }、30 ）
 106  
107  }
 108 </スクリプト>
 109 </ HTML>
おすすめ
