Mercurial > hg > nodescore

diff www/tests/dd/rectangle2.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
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/tests/dd/rectangle2.html	Tue Sep 04 07:25:49 2012 +0000
@@ -0,0 +1,113 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+<script>
+var current=0
+var change=2
+var height=0
+var rightedge=0
+var door=null
+var n=20
+var Balloons=new Array(n)// array of balloon objects
+var Bh=40 //size of ball
+function startup(){
+	if (document.all){
+		rightedge=document.body.clientWidth;
+		height=document.body.clientHeight;
+	}
+	else{
+		rightedge=window.innerWidth;
+		height=window.innerHeight;
+	}
+	var wall=document.getElementById("Q")
+	wall.style.left=rightedge/2 - 15
+	wall.style.height=height
+	wall.style.top=0
+	door=document.getElementById("R")
+	door.style.left=rightedge/2 - 15
+	door.style.top=height/2
+	current=height/2
+	maketargets()
+	oscillate(current)
+	moveball()
+}
+function maketargets(){
+	colors=new Array("red","blue","aqua","lime","green","orange","gray")
+
+	for (var i=0;i<n;i++){
+		var P=document.getElementById("P")
+		var O=P.cloneNode("true")
+		document.body.appendChild(O)
+		var x=Math.floor(Math.random()*rightedge/2 + Bh)+(rightedge+30)/2
+		var y=Math.floor(Math.random()*(height - Bh))
+		var c=colors[i%colors.length]
+		var yv=Math.random()*2-1
+		var xv=Math.random()*2-1
+		Balloons[i]={x:x,y:y,color:c,xv:xv,yv:yv,o:O}
+		//by building a parallel data structure in JavaScript we may avoid
+		//re-entering the DOM later on when we need to know if the moving thing is near any balloons
+		//typically we'd have to loop through all balloons and get the style.left and the style.right
+		//those are often strings and often inconsistent across browsers (sometimes containing "px"
+		//.o=O is just a pointer to the DOM object given by document.getElementById(i)
+		O.style.top=y
+		O.style.left=x
+		O.style.background=c
+		O.id=i
+		O.onclick=function(){alert(Balloons[this.id].x+","+Balloons[this.id].y)}
+	}
+}
+function oscillate(){
+	current-=change
+	if (current<0) change=-change
+	if (current>height-61) change=-change
+	door.style.top=current
+	for (var i=0;i<Balloons.length;i++){
+		if (Balloons[i].x>rightedge - Bh)Balloons[i].xv=-Math.abs(Balloons[i].xv)
+		if (Balloons[i].x<rightedge/2)Balloons[i].xv=-Balloons[i].xv
+		Balloons[i].x+=Balloons[i].xv
+		if (Balloons[i].y>height - Bh)Balloons[i].yv=-Balloons[i].yv
+		if (Balloons[i].y<0)Balloons[i].yv=-Balloons[i].yv
+		Balloons[i].y+=Balloons[i].yv
+		Balloons[i].o.style.top=Balloons[i].y
+		Balloons[i].o.style.left=Balloons[i].x
+	}
+	window.setTimeout("oscillate()",10)
+}
+ballxv=4
+ballyv=Math.random()*4-2
+ballx=0
+bally=100
+function moveball(){
+	var B=document.getElementById("ball")
+	ballx=ballx+ballxv
+	if (ballx>rightedge/2-35) ballxv=-ballxv
+	if (ballx<0) ballxv=-ballxv
+	if (bally<0) ballyv=-ballyv
+	if (bally>height-20-ballyv) ballyv=-ballyv
+	bally=bally+ballyv
+	B.style.left=ballx
+	B.style.top=bally
+	window.setTimeout("moveball()",20)
+}
+</script>
+</head>
+
+<body onload="startup()">
+<div id="Q" 
+style="position:absolute;background:black;
+width:30;height:200;left:300">
+</div>
+<div id="R" 
+style="position:absolute;background:red;
+width:30;height:60;left:300;top:0">
+</div>
+<div id="P" style="position:absolute;background:green;
+width:40;height:40;left:-100;top:100">
+	<img src="hole.gif" height="40"></div>
+<img src="tile5b.gif" height="20" style="position:absolute;
+width:30;height:30;left:0;top:100" id="ball">
+<div id="aim" style="position:absolute;background:yellow;
+width:30;height:30;left:-100;top:100"></div>
+</body>
+</html>