Monthly Archives: Februar 2012

starmap

TaTa …
2nd Athmosphere, ein Geschicklichkeits- und Gedächnistrainings-Spiel ist fertig geworden.
Tatsächlich wird es 2nd Athmosphere als iPad-Game im iTunes-Store geben, sobald Apple es durch gewunken hat, und eine html5 Versionmit etwas eingeschränkten Features. Auf dem iPad gibt’s später noch mehr Umgebungsgrafik und eine Hall of Fame (online eventuell im Apple Game-Center).

Es fehlt noch eine abschließende Komprimierung aber im Wesentlichen steht die Demo.

Und aus 2nd Athosphere hier die Routine, die hübsche zufällige Sternenkarten auf einem canvas-Element erzeugt:



// prepare starmap in an existing HTML-DIV; Name-> starMapParentDOMElement
function starMap(){
  var width = window.innerWidth;
  var height = parseInt(window.innerHeight);
  var colr = function(){return parseInt( 255-Math.random()*70);};
  var grad = function(winkel){return (winkel * Math.PI / 180);};
  var nStars = function(){return parseInt(100 + Math.random()*500);};
  var cv = document.createElement('canvas');
  cv.setAttribute('width',width+'px');
  cv.setAttribute('height',height+'px');
  cv.style.position = "absolute";
  cv.style.top = "0px";
  cv.style.left = "0px";
  document.getElementById(starMapParentDOMElement).appendChild(cv);
  var ctxx = cv.getContext('2d');
  
  // darkblue background
  ctxx.fillStyle = "rgba(10,10,30,1.0)"; 
  ctxx.fillRect(0,0,width,height);
  ctxx.fill();
 
  for(var i=nStars();i;i-=1){
    // Stars
    ctxx.fillStyle = "rgba("+[colr(),colr(),colr()].join(',')+",0.8)";
    ctxx.beginPath();
    var x = Math.random()*width;
    var y = Math.random()*height;
    var r = 0.1+2.5*Math.random();
    ctxx.arc(x,y,((r>1.7)?r:0.5),0,grad(360),false);
    ctxx.closePath();
    ctxx.fill();
    // Nebel & Fog
    ctxx.fillStyle = "rgba("+[colr(),colr(),colr()].join(',')+",0.008)";
    ctxx.beginPath();
    x = Math.random()*width;
    y = Math.random()*height;
    r = 40 + 70* Math.random();
    ctxx.arc(x,y,r,grad(Math.random()*360),grad(180+Math.random()*180),false);
    ctxx.closePath();
    ctxx.fill();
  }
}

nStars beeinflusst die Zahl der Sterne.
In den Zeilen

var r = 0.1+2.5*Math.random();
und
ctxx.arc(x,y,((r>1.7)?r:0.5),0,grad(360),false);
wird auf das Erscheinungsbild der Sterne Einfluss genommen.
r = 40 + 70* Math.random();
ctxx.arc(x,y,r,grad(Math.random()*360),grad(180+Math.random()*180),false);

wirken auf die Nebel.

Und heraus kommen feine fenstergrosse Sternenkarten.

Die Kreise und gelben Strings sind natürlich nicht Teil der Sternenkarte sondern gehören zum Spiel.