Mercurial > hg > nodescore

comparison www/tests/dd/metro.html~ @ 42:49c94f63b8b0

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