Er is geen CSS ondersteuning.
Het is geen kunst om een spelletje te maken. Het is wel een kunst om de JSLint validator tevreden te houden (door geen fouten in het script te hebben). Het is soms ook knap lastig om de HTML5 validator "in het groen te houden". Maar bij dit minesweeper script is alles weer dik voor elkaar. Het is zo weinig code dat ik er geen speciale pagina voor ga maken. Maak ergens in de body-tag van jouw pagina een div met het id "minesweeper". Kopieer eerst het onderstaande script en plaats dat zo laag mogelijk in de body-sectie van jouw pagina:
<script>
var mijnzwiep,o,w,k,v,e,vakje,zwiep=[],bom="X",veld=" ",l=225,elementje=document.getElementById("minesweeper");
function dollar(elementje){return document.getElementById(elementje);}
function m(elementje){return elementje?elementje.innerHTML:0;}
function n(elementje,d){if(elementje){elementje.innerHTML=d;}}
function J(elementje,d){elementje.style.backgroundColor=d;}
function z(vakje,d,f){
e=dollar(vakje+"#"+d);if(m(e)=="0"){
o="";
for(v=vakje-1;v<vakje+2;v++){
for(w=d-1;w<d+2;w++){
k=dollar(v+"#"+w);
if(m(k)==veld){
J(k,"#bbb");n(k,zwiep[v][w]);if(k){l--;}
if(zwiep[v][w]===0){
o+=o.length>0?";"+v+";"+w:v+";"+w;}
}}}
vakje=0;for(d=o.split(";");
d.length>1&&vakje<d.length;vakje+=2){z(parseInt(d[vakje],10),parseInt(d[vakje+1],10),f+1);}}}
function q(vakje,d){
e=dollar(vakje+"#"+d);
if(zwiep[vakje][d]==bom){
J(e,"#f00");
alert("kaboem!");
for(vakje=0;vakje<15;vakje++){
for(d=0;d<15;d++){n(dollar(vakje+"#"+d),zwiep[vakje][d]);}}}
else if(m(e)==veld){J(e,"#bbb");
n(e,zwiep[vakje][d]);l--;
z(vakje,d,0);if(l<=0){alert("perfect gedaan!");}}}
for(var r=0;r<15;r++){
zwiep[r]=[];
for(var c=0;c<15;c++){
zwiep[r][c]=0;}mijnzwiep="";}
for(r=0;r<15;r++){
for(c=0;c<15;c++){
mijnzwiep+="<span class='mine' id='"+r+"#"+c+"' onclick='q("+r+","+c+")'> </span>";
if(Math.random()<0.075){
zwiep[r][c]=bom;l--;
for(v=r-1;v<r+2;v++){
for(w=c-1;w<c+2;w++){
if(zwiep[v]&&zwiep[v][w]!=bom){zwiep[v][w]+=1;}}}}}
mijnzwiep+="<br/>";}n(elementje,"<pre>"+mijnzwiep+"</pre>");
</script>
En stop in de head van jouw pagina het onderstaande stukje stylesheet:
<style type="text/css">
.mine{
width:1em;
padding-left:5px;
padding-right:5px;
color:#00f;
background:#575;
border:1px solid #474}
#minesweeper{margin-left:100px}
</style>
Als je al die moeite niet wilt doen, kan je natuurlijk ook minesweeper op deze pagina spelen. Zo belangrijk is alles nou ook weer niet..
cache 14-09-2010