Mercurial > hg > nodescore

<!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>
author	Rob Canning <rc@kiben.net>
date	Tue, 21 Apr 2015 16:20:57 +0100
parents	49c94f63b8b0
children