gcr/bubbles.htm

## bubbles.htm
<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Bubble game</title>

    <script type="text/javascript" src="bubbles.js"> </script>

</head>
<body>

    <center>
    <canvas id="bubbles-screen" width="1280" height="1024" style="background-color: #eee; border: 1px solid #000;"/>
    </center>

</body>
</html>

## bubbles.js
window.onload = function(){
  var canvas = document.getElementById("bubbles-screen"),
      width = canvas.width,
      height = canvas.height,
      ctx = canvas.getContext('2d'),
      FPS = 20,
      ADD = .5;

  function randHex() {
    return "0123456789abcdef"[Math.floor(Math.random()*16)];
  }
  function drawCircle(x, y, r, c) {
    ctx.fillStyle = c;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.stroke();
    // shine
    ctx.fillStyle = "rgba(255,255,255,0.4);";
    ctx.beginPath();
    ctx.arc(x-(r*0.5), y-(r*0.5), r*0.2, 0, Math.PI*2, true);
    ctx.fill();
  }
  function dist(a,b) {
    return Math.sqrt((a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y));
  }

  var circles = [];

  function drawBubbles(){
    ctx.clearRect(0,0,width,height);
    for (var i=0,l=circles.length; i<l; i++) {
      drawCircle(circles[i].x, circles[i].y, circles[i].r, circles[i].c);
    }
  }

  canvas.onclick = function(ev) {
    var x=ev.offsetX, y=ev.offsetY;
    for (var i=0,l=circles.length; i<l; i++) {
      if (dist({x:x,y:y}, circles[i]) < circles[i].r) {
        circles.splice(i, 1);
        // warning: this destructively modifies the list we're iterating over
        break;
      }
    }
  };

  // Time game logic
  var addTimer = setInterval(function addCircle(){
        // Add the circle if we're outside the range of all the others
        var newCircle = {
          x: Math.random()*width,
          y: Math.random()*height,
          r: 0,
          c: "#"+randHex()+randHex()+randHex()
        };
        for (var i=0,l=circles.length; i<l; i++) {
          if (dist(circles[i], newCircle) < 150 + circles[i].r) {
            // avoid! too bad JS doesn't have tail recursion ;)
            return addCircle();
          }
        }
      circles.push(newCircle);

      }, 1000*ADD),
      gameTimer = setInterval(function(){
    // Grow circles
    circles = circles.map(function(circle){
        circle.r += 1;
        return circle;
      });

    // Find collissions
    for (var a=0,la=circles.length; a<la; a++) {
      for (var b=0,lb=circles.length; b<lb; b++) {
        var ca = circles[a], cb = circles[b];
        if (a!=b &&
            dist(ca,cb) <= ca.r + cb.r) {
            alert("GAME OVER! Too slow.");
            clearInterval(gameTimer);
            clearInterval(addTimer);
            return;
        }
      }
    }

    // Draw everything
    drawBubbles(circles);
  }, 1000/FPS);
};
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Bubble game</title>

	<script type="text/javascript" src="bubbles.js"> </script>

	</head>
	<body>

	<center>
	<canvas id="bubbles-screen" width="1280" height="1024" style="background-color: #eee; border: 1px solid #000;"/>
	</center>

	</body>
	</html>
	window.onload = function(){
	var canvas = document.getElementById("bubbles-screen"),
	width = canvas.width,
	height = canvas.height,
	ctx = canvas.getContext('2d'),
	FPS = 20,
	ADD = .5;

	function randHex() {
	return "0123456789abcdef"[Math.floor(Math.random()*16)];
	}
	function drawCircle(x, y, r, c) {
	ctx.fillStyle = c;
	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI*2, true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI*2, true);
	ctx.stroke();
	// shine
	ctx.fillStyle = "rgba(255,255,255,0.4);";
	ctx.beginPath();
	ctx.arc(x-(r0.5), y-(r0.5), r0.2, 0, Math.PI2, true);
	ctx.fill();
	}
	function dist(a,b) {
	return Math.sqrt((a.x-b.x)(a.x-b.x) + (a.y-b.y)(a.y-b.y));
	}

	var circles = [];

	function drawBubbles(){
	ctx.clearRect(0,0,width,height);
	for (var i=0,l=circles.length; i<l; i++) {
	drawCircle(circles[i].x, circles[i].y, circles[i].r, circles[i].c);
	}
	}

	canvas.onclick = function(ev) {
	var x=ev.offsetX, y=ev.offsetY;
	for (var i=0,l=circles.length; i<l; i++) {
	if (dist({x:x,y:y}, circles[i]) < circles[i].r) {
	circles.splice(i, 1);
	// warning: this destructively modifies the list we're iterating over
	break;
	}
	}
	};

	// Time game logic
	var addTimer = setInterval(function addCircle(){
	// Add the circle if we're outside the range of all the others
	var newCircle = {
	x: Math.random()*width,
	y: Math.random()*height,
	r: 0,
	c: "#"+randHex()+randHex()+randHex()
	};
	for (var i=0,l=circles.length; i<l; i++) {
	if (dist(circles[i], newCircle) < 150 + circles[i].r) {
	// avoid! too bad JS doesn't have tail recursion ;)
	return addCircle();
	}
	}
	circles.push(newCircle);

	}, 1000*ADD),
	gameTimer = setInterval(function(){
	// Grow circles
	circles = circles.map(function(circle){
	circle.r += 1;
	return circle;
	});

	// Find collissions
	for (var a=0,la=circles.length; a<la; a++) {
	for (var b=0,lb=circles.length; b<lb; b++) {
	var ca = circles[a], cb = circles[b];
	if (a!=b &&
	dist(ca,cb) <= ca.r + cb.r) {
	alert("GAME OVER! Too slow.");
	clearInterval(gameTimer);
	clearInterval(addTimer);
	return;
	}
	}
	}

	// Draw everything
	drawBubbles(circles);
	}, 1000/FPS);
	};