JSFiddle - React, Tailwind, and code Playground
by Ccile
HTML
<div id='table'>
</div>
<div id="instructions">
<div id="pre_taille">
<p>
Sélectionnez une échelle de taille
</p>
<FORM NAME="preselection">
<SELECT NAME="liste" size="1">
<OPTION VALUE="50">50*50</OPTION>
<OPTION VALUE="100">100*100</OPTION>
<OPTION VALUE="150">150*150</OPTION>
<OPTION VALUE="200">200*200</OPTION>
<OPTION VALUE="250">250*250</OPTION>
<OPTION VALUE="300">300*300</OPTION>
<OPTION VALUE="350">350*350</OPTION>
<OPTION VALUE="400">400*400</OPTION>
<OPTION VALUE="450">450*450</OPTION>
<OPTION VALUE="500">500*500</OPTION>
</SELECT>
</FORM>
<button id="valider_pre_taille">Valider la taille</button>
</div>
<div id="sans_nom">
<div id='text'>
<p>
Placez les cellules vivantes en cliquant sur les cases ou en choisissant le placement aléatoire, puis lancez le jeu.
</p>
<p id='alea_li'>
</p>
</div>
<button id="button">Lancer</button>
<button id='stop'>Stop</button>
<button id='alea'>Aléatoire</button>
<button id="clear">Mise à zéro</button>
</div>
</div>
CSS
#game
{
border-collapse: separate;
border: 1px solid #000;
}
#game td
{
width: 4px;
height: 4px;
border: 1px solid #ccc;
background: #fff;
-webkit-border-radius: 2px;/*Pour d'anciens navigateurs, for old browser*/
-moz-border-radius: 2px;/*P.A.N., F.O.B.*/
border-radius: 2px;
}
#game td.alive
{
background: #000;
}
#instructions
{
border : 1px solid black;
position : absolute;
right: 2px;
width : 300px;
}
#sans_nom
{
display : none;
}
JavaScript
function addEvent(element,event,func,bool)
{
bool=bool||true;
element.addEventListener? element.addEventListener(event,func,bool):element.attachEvent('on'+event,func);/*P.A.N./F.O.B.*/
}
function preAff()
{
alert(3);
}
/*var pre_selec=document.forms[0].liste;*/
var pre_selec=document.getElementsByName("preselection")[0];
/*tab=makeMatrix(1,1,false);*/
addEvent( pre_selec,"change",preAff);