Una prueba de videojuego usando el formato de imagenes vectoriales SVG

svgTestGame.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">

<script type="text/ecmascript"><![CDATA[
var svgns = 'http://www.w3.org/2000/svg';
var tiempo= 0;
var puntos = 0;
var limitePuntos=100;
var svgDoc = null;
var svgRoot = null;
var circleRadio=100

function init(evt) {
  if ( window.svgDocument == null ) {
		svgDoc = evt.target.ownerDocument;
		svgRoot = SVGDocument.documentElement;
	}
	window.setTimeout("pinta()", 1000);

};

function pinta() {
	if(puntos<limitePuntos){
		tiempo+=1;
		window.setTimeout("pinta()", 1000);
	}
	var circleNode = svgDoc.createElementNS(svgns, 'circle');
	 //circleNode.setAttributeNS(null, 'class', 'circulo');
	 circleNode.setAttributeNS(null, 'cx', 800*Math.random());
	 circleNode.setAttributeNS(null, 'cy', 600*Math.random());
	 circleNode.setAttributeNS(null, 'r',  circleRadio-2);
	 circleNode.setAttributeNS(null, 'style',  "fill:#cbccda;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:2");
	 circleNode.setAttributeNS(null, 'onclick',  "hacerClick(evt)");

	svgDoc.getElementById("circulos").appendChild(circleNode);
};

function hacerClick(evt) {
	puntos+=1;
	if(puntos<limitePuntos){
		svgDoc.getElementById('puntos').firstChild.data = "Puntos: "+puntos;
		var circle = evt.target;
		var radio = circle.getAttribute("r");
		circle.setAttribute("r", radio*0.5);
	}else{
		finalizar();
	}
};

function finalizar(){
	svgDoc.getElementById('puntos').firstChild.data = "Has conseguido "+limitePuntos+" puntos en "+tiempo+" segundos";
}; 

]]></script>
 
 
<style type="text/css" id="style_css_sheet">
circle:hover{
	opacity: 0.5;
}
</style>
 
<g id="circulos"></g>

<text class="label" id="puntos" x="50" y="50">Puntos: 0</text>

</svg>