<Array.prototype, Shuffling e ... EuroMilhões ⁄ >

*{padding: 0; margin: 0;}
 
body{
  font-family: Verdana, Tahoma, Arial, sans-serif;font-size: 62.5%;
  color: #000;background-color: #fff;text-align: center;
}
 
div#title{
  margin: 0 auto; text-align: center; font-weight: 900;color: #cc0000;
  font-size: 3em;width: 27.4em; margin-bottom: .5em;
}
 
div#board{
  margin: 0 auto; width: 11em; height: 24em;
  line-height: 1.8em;color: #00457B; text-align: center;
}
 
div#board div.number, div#board div.star{
  float: left;border: solid .1em #ce5c00;
  width: 1.4em;height: 1.4em; margin-right: .1em; line-height: 1.4em;
}
div#board div.star {border: solid .1em #B71313;}
 
div#board div.number_selected{background-color: #ce5c00; color: #fff;}
div#board div.star_selected{background-color: #D01F3C; color: #fff;}
 
input#bt_generate, select#ddl_bets{
  background-color: #ffffd4; border: solid .1em #e9b96e;
  font-size: 1em; font-weight: 700; padding: .4em;
}
select#ddl_bets {font-weight: normal; }

/**
* Class Estática
* Gerir Eventos
*/
Events = function(){}
 
/**
* Adicionar Evento
*
* Adaptada do seguinte url:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
      obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remover Evento
*
* Adaptada do seguinte url:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);}catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}

/**
* Class estática
* Class de suporte à interacção com o DOM
* 
* @author: pedrocorreia.net
*/
Dom = function(){}
 
/**
* Obter objecto Html
*
* @param String Id Objecto
*/
$=function(id){return document.getElementById(id);}
 
/**
* Construir casa
*
* @param String Id
* @param String Class Css
* @param String Valor
* @param String Objecto Html onde vai ser adicionada a caixa
*/
$box = function(id, css_class, value, div) {
  var box = document.createElement('div');
  box.setAttribute('id', id);
  box.setAttribute((document.all?"className":"class"), css_class);  
  box.innerHTML=value;
  $(div).appendChild(box);
}
 
/**
* Construir quebra de linha
*
* @param String Objecto Html onde vai ser adicionado a quebra de linha
*/
$br = function(el){
  $(el).appendChild(document.createElement('br'));
}
 
/**
* Obter, atribuir ou acrescentar a Class Css
* a um objecto Html
*
* @param String Id
* @param Optional String Nome da Class
* @param Optional Int Acrescentar Class?
*/
$class=function(obj /**, css_class**/ /**, append*/){
  if(arguments[1] && arguments[2]){$(obj).className+=" "+arguments[1];}
  else if(arguments[1]){$(obj).className=arguments[1];}
  else{return $(obj).className;}
}
 
/**
* Private Method
* Adicionar Elemento a uma DropdownList
*
* @param String Id
* @param String Valor
* @param String Descrição
*/
var $ddListOption = function(id, value, description){
  var ddlOption = document.createElement("option");
  ddlOption.value = value;
  ddlOption.text = description;
  $(id).options.add(ddlOption);
}

/**
* Array.prototype
* Esta class adiciona vários métodos ao objecto Array
*
* @author pedrocorreia.net
*/
 
/**
* Obter Array com valores aleatórios,
* porém <u>preservando</u> o Array Original
*
* @param Optional Int Número máximo de elementos a preencher
* @param Optional Bool Ordenar Array
* @return Array
*/
Array.prototype.PreserveShuffle = function(/** n_elems*/ /**, ordered*/){
  var n_elems=arguments[0];
  var ordered=arguments[1];    
  if(isNaN(n_elems) || n_elems==""){n_elems=this.length;}
 
  //fazer cópia fiel do array
  var randArray=this.Clone();
  //novo array para preencher
  var result=new Array();
  var pos=-1;
 
  for(var i=0;i<n_elems;i++){
    pos=randArray.RandomIndex(); //gerar indice aleatório
    result.push(randArray[pos]); //preencher valor
    randArray.splice(pos,1); //remover elemento para não repetir
  }
 
  randArray=null; //limpar array auxiliar
  return (ordered==1)?result.sort(this.SortNumber):result;
}
 
/**
* Gerar Array com valores aleatórios,
* porém <u>destruindo</u> o Array Original
*
* @param Optional Int Número máximo de elementos a preencher
* @param Optional Bool Ordenar Array
* @return Array
*/
Array.prototype.DestructiveShuffle = function(/** n_elems */ /**, ordered*/){
  var n_elems=arguments[0];
  var ordered=arguments[1];    
  if(isNaN(n_elems) || n_elems==""){n_elems=this.length;}
 
  //novo array para preencher
  var result=new Array();
  var pos=-1;
 
  for(var i=0;i<n_elems;i++){
    pos=this.RandomIndex(); //gerar indice aleatório
    result.push(this[pos]); //preencher valor
    this.splice(pos,1); //remover elemento para não repetir
  }
 
  this.Clear(); //remover todo o conteúdo do array
  for(var i=0, count=result.length;i<count;i++){
    //preencher novo array
    this.push(result[i]);
  }
  result=null;
  return (ordered==1)?this.sort(this.SortNumber):this;
}
 
/**
* Apagar todos (ou parcialmente) os itens do array
*
* @param Optional Int Começar em que posição?
* @param Optional Int Acabar em que posição?
*/
Array.prototype.Clear = function(/**start_at*/ /**, end_at*/){
  var len=this.length;
  if(len==0) return; //o array já se encontra vazio
 
  var start_at=arguments[0];
  var end_at=arguments[1];
  if(isNaN(start_at)||start_at=="") start_at=0;
  if(isNaN(end_at)||end_at=="") end_at=len;
  if(start_at>end_at) {throw "INVALID_START_AT_ARGUMENT";}
 
  this.splice(start_at, end_at);
}
 
/**
* Clonar array
*
* nota: esta é uma clonagem simples, se o array contiver
* objectos, estes não serão "clonados"
*  
* @return Array Clone
*/
Array.prototype.Clone = function(){return this.slice(0);}
 
/**
* Debug
*
* @param String Controlo Html
* @param Optional String Legenda
* @param Optional Bool Adicionar ou substituir informação?
*/
Array.prototype.Verbose = function(obj /**, caption*/ /**, append */){
  var caption=arguments[1];
  var append=arguments[2];
  if(!caption) caption="";
 
  if(append) {$(obj).innerHTML+=caption;}
  else{$(obj).innerHTML=caption;}
 
  for (var i=0, count=this.length;i<count;i++){
    $(obj).innerHTML+=this[i]+";";
  } 
}
 
/**
* Preencher Array com números
*
* @param Int Número de Elementos
* @param Optional Int Começar em que valor
*/
Array.prototype.FillNumbers = function (end_at /**, start_at*/ ){
  var start_at=arguments[1];
  if(isNaN(start_at) || start_at=="" ) {start_at=1;}
  if(start_at>end_at) {throw "INVALID_START_AT";}
 
  for (var i=start_at; i<=end_at; i++){this.push(i);}
  return this;
}
 
/**
* Gerar indice aleatório
* @return Int Indice gerado
*/
Array.prototype.RandomIndex = function(){
  return Math.floor(Math.random() * this.length);
}
 
/**
* Ordenar Números
* Adaptada de: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_sort2
*
* @param Int
* @param Int
* @return Int    
*/
Array.prototype.SortNumber = function(a, b) {return a - b;}

/**
* Esta class tem como objectivo implementar a geração de uma aposta de EuroMilhões
*
* @author pedrocorreia.net
*/
Euromilhoes = function(){
 
  //necessário para permitir os métodos privados
  //acederem aos métodos não-privados da Class
  var self=this;
 
  //configurações html e css
  var _conf = {
    board: "board", //div da board
    verbose_span: "complete_set", //span para debug
    prefix_number: "numero", //prefixo da chave
    prefix_star: "estrela", //prefixo das estrelas
    css_number: "number", //class css da chave
    css_star: "star", //class css das estrelas
    lbl_numbers: "Números",
    lbl_stars: "Estrelas",
    css_sufix_selected: "_selected", //sufixo de um item selecionado
    bt_generate: "bt_generate", //gerar nova chave
    ddl_bets: "ddl_bets" //dropdown de apostas
  }
 
  //definições do jogo
  var _game = {
    total_number: 50, //total de números
    total_star: 9, //total de estrelas
    number_split_at: 6, //quadrados por linha
    star_split_at: 3 //estrelas por linha
  }
 
  /**
  * Método privado
  *
  * Construir boletim (só 1 aposta)
  */
  var _BuildGrid = function(){
 
    //números
    for(var i=1;i<=_game.total_number;i++){
      $box(_conf.prefix_number+"_"+i, _conf.css_number, i, _conf.board);
      if(i%_game.number_split_at==0) {$br(_conf.board);}
    }
    $br(_conf.board); //quebra de linha
    $br(_conf.board); //quebra de linha
 
    //estrelas
    for(var i=1;i<=_game.total_star;i++){
      $box(_conf.prefix_star+"_"+i, _conf.css_star, i, _conf.board);
      if(i%_game.star_split_at==0) {$br(_conf.board);}
    }
  }
 
  /**
  * Método privado
  * Preencher DropdownList com o conjunto de apostas
  */
  _BuildBets = function(){
 
    //apostas válidas
    var bets ={
      5: {start: 2, end: 9},
      6: {start: 2, end: 9},
      7: {start: 2, end: 9},
      8: {start: 2, end: 5},
      9: {start: 2, end: 4},
      10: {start: 2, end: 3},
      11: {start: 2, end: 2}
    }
 
    var value="", description="";
 
    for (var bet in bets){
      for (var i=bets[bet].start; i<=bets[bet].end;i++){
        value=bet+"-"+i;
        description=bet+" "+_conf.lbl_numbers+" + "+i+" "+_conf.lbl_stars;
        $ddListOption(_conf.ddl_bets, value, description);
      }
    }
  }
 
  /**
  * Obter Apostas
  *
  * @return Array
  */
  _GetBet = function(){
    var bet=$(_conf.ddl_bets).value;
    return bet.split("-");
  }
 
  /**
  * Método privado
  * Selecionar números gerados
  *
  * @param Array Array de números a selecionar
  * @param String Prefixo do nome do objecto a selecionar
  * @param String Class Css
  */
  var _SelectBoxes = function(o, prefix, css_class){
    for(var i=0, count=o.length;i<count;i++){
      $class(prefix+"_"+o[i],css_class+_conf.css_sufix_selected,1);
    }
  }
 
  /**
  * Método privado
  * Adicionar eventos
  */
  var _EventHandlers = function(){
    Events.AddEvent($(_conf.bt_generate),"click",self.GenerateEuroMilhoes);
  }
 
  /**
  * Limpar boletim
  */
  var _ClearGrid = function(){
    for(var i=1;i<=_game.total_number;i++){
      $class(_conf.prefix_number+"_"+i,_conf.css_number);
    }
 
    for(var i=1;i<=_game.total_star;i++){
      $class(_conf.prefix_star+"_"+i,_conf.css_star);
    }
  }
 
  /**
  * Responsável pela geração das chaves 
  * bem como o seu preenchimento
  */
  this.GenerateEuroMilhoes = function(){
    _ClearGrid(); //limpar boletim
 
    var bet = _GetBet(); //obter apostas
 
    //gerar números usanto o método Array.PreserveShuffle
    var a=new Array();
    var chave=a.FillNumbers(_game.total_number).PreserveShuffle(bet[0],1);
    _SelectBoxes(chave,_conf.prefix_number, _conf.css_number);
    chave.Verbose(_conf.verbose_span,_conf.lbl_numbers+": ");
 
    //gerar estrelas usando o método Array.DestructiveShuffle
    var estrelas=new Array();
    _SelectBoxes(estrelas.FillNumbers(_game.total_star).DestructiveShuffle(bet[1],1),_conf.prefix_star, _conf.css_star);
    estrelas.Verbose(_conf.verbose_span,"<br>"+_conf.lbl_stars+": ",1);
  }
 
  //construir boletim
  _BuildGrid();
 
  //construir apostas
  _BuildBets();
 
  //inicializar EventHandlers
  _EventHandlers(); 
}

/**
* Função de Inicialização
*
* @author pedrocorreia.net
*/
Init = function(){
  var euro_milhoes=new Euromilhoes();
  euro_milhoes.GenerateEuroMilhoes();
}
 
Events.AddEvent(window,"load",Init);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Array.Prototype e EuroMilhões</title>
 
    <script type="text/javascript" src="Events.js"></script>    
    <script type="text/javascript" src="Dom.js"></script>
    <script type="text/javascript" src="ArrayPrototype.js"></script>
    <script type="text/javascript" src="Euromilhoes.js"></script>
    <script type="text/javascript" src="Init.js"></script>    
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
 
  <body>
    <div id="title">Gerar Euromilhões</div>
    <div id="board"></div>
    <span id="complete_set"></span>
    <br /><br />
    <input type="button" value="Gerar Nova Chave" id="bt_generate" />
    <select id="ddl_bets"></select>
  </body>
</html>