|
rc-web@42
|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
rc-web@42
|
2
|
|
rc-web@42
|
3 <html>
|
|
rc-web@42
|
4 <head>
|
|
rc-web@42
|
5 <script>
|
|
rc-web@42
|
6 var current=0
|
|
rc-web@42
|
7 var change=2
|
|
rc-web@42
|
8 var height=0
|
|
rc-web@42
|
9 var rightedge=0
|
|
rc-web@42
|
10 var door=null
|
|
rc-web@42
|
11 var n=20
|
|
rc-web@42
|
12 var Balloons=new Array(n)// array of balloon objects
|
|
rc-web@42
|
13 var Bh=40 //size of ball
|
|
rc-web@42
|
14 function startup(){
|
|
rc-web@42
|
15 if (document.all){
|
|
rc-web@42
|
16 rightedge=document.body.clientWidth;
|
|
rc-web@42
|
17 height=document.body.clientHeight;
|
|
rc-web@42
|
18 }
|
|
rc-web@42
|
19 else{
|
|
rc-web@42
|
20 rightedge=window.innerWidth;
|
|
rc-web@42
|
21 height=window.innerHeight;
|
|
rc-web@42
|
22 }
|
|
rc-web@42
|
23 var wall=document.getElementById("Q")
|
|
rc-web@42
|
24 wall.style.left=rightedge/2 - 15
|
|
rc-web@42
|
25 wall.style.height=height
|
|
rc-web@42
|
26 wall.style.top=0
|
|
rc-web@42
|
27 door=document.getElementById("R")
|
|
rc-web@42
|
28 door.style.left=rightedge/2 - 15
|
|
rc-web@42
|
29 door.style.top=height/2
|
|
rc-web@42
|
30 current=height/2
|
|
rc-web@42
|
31 maketargets()
|
|
rc-web@42
|
32 oscillate(current)
|
|
rc-web@42
|
33 moveball()
|
|
rc-web@42
|
34 }
|
|
rc-web@42
|
35 function maketargets(){
|
|
rc-web@42
|
36 colors=new Array("red","blue","aqua","lime","green","orange","gray")
|
|
rc-web@42
|
37
|
|
rc-web@42
|
38 for (var i=0;i<n;i++){
|
|
rc-web@42
|
39 var P=document.getElementById("P")
|
|
rc-web@42
|
40 var O=P.cloneNode("true")
|
|
rc-web@42
|
41 document.body.appendChild(O)
|
|
rc-web@42
|
42 var x=Math.floor(Math.random()*rightedge/2 + Bh)+(rightedge+30)/2
|
|
rc-web@42
|
43 var y=Math.floor(Math.random()*(height - Bh))
|
|
rc-web@42
|
44 var c=colors[i%colors.length]
|
|
rc-web@42
|
45 var yv=Math.random()*2-1
|
|
rc-web@42
|
46 var xv=Math.random()*2-1
|
|
rc-web@42
|
47 Balloons[i]={x:x,y:y,color:c,xv:xv,yv:yv,o:O}
|
|
rc-web@42
|
48 //by building a parallel data structure in JavaScript we may avoid
|
|
rc-web@42
|
49 //re-entering the DOM later on when we need to know if the moving thing is near any balloons
|
|
rc-web@42
|
50 //typically we'd have to loop through all balloons and get the style.left and the style.right
|
|
rc-web@42
|
51 //those are often strings and often inconsistent across browsers (sometimes containing "px"
|
|
rc-web@42
|
52 //.o=O is just a pointer to the DOM object given by document.getElementById(i)
|
|
rc-web@42
|
53 O.style.top=y
|
|
rc-web@42
|
54 O.style.left=x
|
|
rc-web@42
|
55 O.style.background=c
|
|
rc-web@42
|
56 O.id=i
|
|
rc-web@42
|
57 O.onclick=function(){alert(Balloons[this.id].x+","+Balloons[this.id].y)}
|
|
rc-web@42
|
58 }
|
|
rc-web@42
|
59 }
|
|
rc-web@42
|
60 function oscillate(){
|
|
rc-web@42
|
61 current-=change
|
|
rc-web@42
|
62 if (current<0) change=-change
|
|
rc-web@42
|
63 if (current>height-61) change=-change
|
|
rc-web@42
|
64 door.style.top=current
|
|
rc-web@42
|
65 for (var i=0;i<Balloons.length;i++){
|
|
rc-web@42
|
66 if (Balloons[i].x>rightedge - Bh)Balloons[i].xv=-Math.abs(Balloons[i].xv)
|
|
rc-web@42
|
67 if (Balloons[i].x<rightedge/2)Balloons[i].xv=-Balloons[i].xv
|
|
rc-web@42
|
68 Balloons[i].x+=Balloons[i].xv
|
|
rc-web@42
|
69 if (Balloons[i].y>height - Bh)Balloons[i].yv=-Balloons[i].yv
|
|
rc-web@42
|
70 if (Balloons[i].y<0)Balloons[i].yv=-Balloons[i].yv
|
|
rc-web@42
|
71 Balloons[i].y+=Balloons[i].yv
|
|
rc-web@42
|
72 Balloons[i].o.style.top=Balloons[i].y
|
|
rc-web@42
|
73 Balloons[i].o.style.left=Balloons[i].x
|
|
rc-web@42
|
74 }
|
|
rc-web@42
|
75 window.setTimeout("oscillate()",10)
|
|
rc-web@42
|
76 }
|
|
rc-web@42
|
77 ballxv=4
|
|
rc-web@42
|
78 ballyv=Math.random()*4-2
|
|
rc-web@42
|
79 ballx=0
|
|
rc-web@42
|
80 bally=100
|
|
rc-web@42
|
81 function moveball(){
|
|
rc-web@42
|
82 var B=document.getElementById("ball")
|
|
rc-web@42
|
83 ballx=ballx+ballxv
|
|
rc-web@42
|
84 if (ballx>rightedge/2-35) ballxv=-ballxv
|
|
rc-web@42
|
85 if (ballx<0) ballxv=-ballxv
|
|
rc-web@42
|
86 if (bally<0) ballyv=-ballyv
|
|
rc-web@42
|
87 if (bally>height-20-ballyv) ballyv=-ballyv
|
|
rc-web@42
|
88 bally=bally+ballyv
|
|
rc-web@42
|
89 B.style.left=ballx
|
|
rc-web@42
|
90 B.style.top=bally
|
|
rc-web@42
|
91 window.setTimeout("moveball()",20)
|
|
rc-web@42
|
92 }
|
|
rc-web@42
|
93 </script>
|
|
rc-web@42
|
94 </head>
|
|
rc-web@42
|
95
|
|
rc-web@42
|
96 <body onload="startup()">
|
|
rc-web@42
|
97 <div id="Q"
|
|
rc-web@42
|
98 style="position:absolute;background:black;
|
|
rc-web@42
|
99 width:30;height:200;left:300">
|
|
rc-web@42
|
100 </div>
|
|
rc-web@42
|
101 <div id="R"
|
|
rc-web@42
|
102 style="position:absolute;background:red;
|
|
rc-web@42
|
103 width:30;height:60;left:300;top:0">
|
|
rc-web@42
|
104 </div>
|
|
rc-web@42
|
105 <div id="P" style="position:absolute;background:green;
|
|
rc-web@42
|
106 width:40;height:40;left:-100;top:100">
|
|
rc-web@42
|
107 <img src="hole.gif" height="40"></div>
|
|
rc-web@42
|
108 <img src="tile5b.gif" height="20" style="position:absolute;
|
|
rc-web@42
|
109 width:30;height:30;left:0;top:100" id="ball">
|
|
rc-web@42
|
110 <div id="aim" style="position:absolute;background:yellow;
|
|
rc-web@42
|
111 width:30;height:30;left:-100;top:100"></div>
|
|
rc-web@42
|
112 </body>
|
|
rc-web@42
|
113 </html>
|
