JavaScripts -> Fun -> Zahlenschiebe-Spiel
Das Spiel kennt jeder, 15 Zahlen müssen so verschoben werden, dass sie wieder in der richtigen Reihenfolge sind.
Einbindung einfach an der Stelle wo das Spiel sein soll durch <script type="text/javascript">riddle();</script>
Kompatibilität getestet:
Script-Code
<script type="text/javascript">
<!--
//Zahlenschiebe-Spiel (c) 2003 Triple-M - http://www.htmlarsenal.de
var width=4; //Breite (min.4)
var height=4; //Hoehe (min.4)
var easy=20; //Anzahl Verschiebungen Einfach
var med=50; //Anzahl Verschiebungen Mittel
var diff=100; //Anzahl Verschiebungen Schwierig
//Bitte ab hier nichts mehr veraendern - Please do not change anything from here on!
var zuege=0;
var fields=new Array(height);
for(i=0;i<fields.length;i++)fields[i]=new Array(width);
function draw(m) {
var emptyx,emptyy;
for(i=0; i<fields.length; i++) for(j=0; j<fields[i].length; j++) {
document.getElementById('ri_' + i + '_' + j).firstChild.nodeValue = fields[i][j];
document.getElementById('ri_' + i + '_' + j).style.borderStyle='solid';
document.getElementById('ri_' + i + '_' + j).style.backgroundColor='#ffffff';
}
for(i=0; i<fields.length; i++) for(j=0; j<fields[i].length; j++) if(fields[i][j]==0) {
emptyx=i;
emptyy=j;
break;
}
document.getElementById('ri_' + emptyx + '_' + emptyy).firstChild.nodeValue = ' ';
document.getElementById('ri_' + emptyx + '_' + emptyy).style.borderStyle='none';
if(m) {
if(emptyx>0)
document.getElementById('ri_' + (emptyx-1) + '_' + emptyy).style.backgroundColor='#c0c0ff';
if(emptyy>0)
document.getElementById('ri_' + emptyx + '_' + (emptyy-1)).style.backgroundColor='#c0c0ff';
if(emptyx<(width-1))
document.getElementById('ri_' + (emptyx+1) + '_' + emptyy).style.backgroundColor='#c0c0ff';
if(emptyy<(height-1))
document.getElementById('ri_' + emptyx + '_' + (emptyy+1)).style.backgroundColor='#c0c0ff';
}
document.getElementById('zug').firstChild.nodeValue=zuege+'. Zug';
}
function checkwin() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++) {
if((fields[i][j]!=run)&&(fields[i][j]!=0))return false;
run++;
}
return true;
}
function domove(x,y) {
if(x>0) if(fields[x-1][y]==0) {
fields[x-1][y]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(y>0) if(fields[x][y-1]==0) {
fields[x][y-1]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(x<(width-1)) if(fields[x+1][y]==0) {
fields[x+1][y]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(y<(width-1)) if(fields[x][y+1]==0) {
fields[x][y+1]=fields[x][y];
fields[x][y]=0;
return 1;
}
return 0;
}
function move(x,y) {
if(domove(x,y))zuege++;
draw(0);
if(checkwin()) {
alert("Sie haben gewonnen!");
window.setTimeout("draw(0)",500);
}
else window.setTimeout("draw(1)",500);
}
function mix(times) {
while(!domove(Math.floor(Math.random()*width),Math.floor(Math.random()*height)));
draw(0);
if(times>0)window.setTimeout("mix("+(times-1)+")",50);
else window.setTimeout("draw(1)",500);
zuege=0;
}
function reset() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++)fields[i][j]=run++;
fields[fields.length-1][fields[fields.length-1].length-1]=0;
zuege=0;
draw(0);
}
function riddle() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++)fields[i][j]=run++;
fields[fields.length-1][fields[fields.length-1].length-1]=0;
document.write('<style type="text/css">td.ri { border:1px solid #000000; background-color:#ffffff; color:#000000; text-align:center; vertical-align:center; width:40px; height:40px; cursor:default; font-family:verdana,sans-serif;} <\/style>');
document.write('<table style="border:2px solid #000000; border-spacing:2px; background-color:#ffffff">');
for(i=0;i<fields.length;i++) {
document.write('<tr>');
for(j=0;j<fields[i].length;j++) document.write('<td class="ri" id="ri_' + i + '_' + j + '" onClick="move(' + i + ',' + j + ')">' + (fields[i][j] ? fields[i][j] : 'X') + '<\/td>');
document.write('<\/tr>');
}
document.write('<tr><td id="zug" colspan="'+width+'" style="height:20px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#c0c0c0; color:#000000; font-weight:bold; border:1px solid #000000">0.Zug<\/td><\/tr>');
document.write('<tr>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#c0ffc0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+easy+')">Einfach<\/td>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ffffc0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+med+')">Mittel<\/td>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ffc0c0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+diff+')">Schwer<\/td>');
document.write('<td colspan="'+(width-3)+'"style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ff0000; color:#000000; border:1px solid #000000; font-size:10px" onClick="reset()">Reset<\/td><\/tr>');
document.write('<\/table>');
draw(0);
}
//-->
</script>
<!--
//Zahlenschiebe-Spiel (c) 2003 Triple-M - http://www.htmlarsenal.de
var width=4; //Breite (min.4)
var height=4; //Hoehe (min.4)
var easy=20; //Anzahl Verschiebungen Einfach
var med=50; //Anzahl Verschiebungen Mittel
var diff=100; //Anzahl Verschiebungen Schwierig
//Bitte ab hier nichts mehr veraendern - Please do not change anything from here on!
var zuege=0;
var fields=new Array(height);
for(i=0;i<fields.length;i++)fields[i]=new Array(width);
function draw(m) {
var emptyx,emptyy;
for(i=0; i<fields.length; i++) for(j=0; j<fields[i].length; j++) {
document.getElementById('ri_' + i + '_' + j).firstChild.nodeValue = fields[i][j];
document.getElementById('ri_' + i + '_' + j).style.borderStyle='solid';
document.getElementById('ri_' + i + '_' + j).style.backgroundColor='#ffffff';
}
for(i=0; i<fields.length; i++) for(j=0; j<fields[i].length; j++) if(fields[i][j]==0) {
emptyx=i;
emptyy=j;
break;
}
document.getElementById('ri_' + emptyx + '_' + emptyy).firstChild.nodeValue = ' ';
document.getElementById('ri_' + emptyx + '_' + emptyy).style.borderStyle='none';
if(m) {
if(emptyx>0)
document.getElementById('ri_' + (emptyx-1) + '_' + emptyy).style.backgroundColor='#c0c0ff';
if(emptyy>0)
document.getElementById('ri_' + emptyx + '_' + (emptyy-1)).style.backgroundColor='#c0c0ff';
if(emptyx<(width-1))
document.getElementById('ri_' + (emptyx+1) + '_' + emptyy).style.backgroundColor='#c0c0ff';
if(emptyy<(height-1))
document.getElementById('ri_' + emptyx + '_' + (emptyy+1)).style.backgroundColor='#c0c0ff';
}
document.getElementById('zug').firstChild.nodeValue=zuege+'. Zug';
}
function checkwin() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++) {
if((fields[i][j]!=run)&&(fields[i][j]!=0))return false;
run++;
}
return true;
}
function domove(x,y) {
if(x>0) if(fields[x-1][y]==0) {
fields[x-1][y]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(y>0) if(fields[x][y-1]==0) {
fields[x][y-1]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(x<(width-1)) if(fields[x+1][y]==0) {
fields[x+1][y]=fields[x][y];
fields[x][y]=0;
return 1;
}
if(y<(width-1)) if(fields[x][y+1]==0) {
fields[x][y+1]=fields[x][y];
fields[x][y]=0;
return 1;
}
return 0;
}
function move(x,y) {
if(domove(x,y))zuege++;
draw(0);
if(checkwin()) {
alert("Sie haben gewonnen!");
window.setTimeout("draw(0)",500);
}
else window.setTimeout("draw(1)",500);
}
function mix(times) {
while(!domove(Math.floor(Math.random()*width),Math.floor(Math.random()*height)));
draw(0);
if(times>0)window.setTimeout("mix("+(times-1)+")",50);
else window.setTimeout("draw(1)",500);
zuege=0;
}
function reset() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++)fields[i][j]=run++;
fields[fields.length-1][fields[fields.length-1].length-1]=0;
zuege=0;
draw(0);
}
function riddle() {
run=1;
for(i=0;i<fields.length;i++)for(j=0;j<fields[i].length;j++)fields[i][j]=run++;
fields[fields.length-1][fields[fields.length-1].length-1]=0;
document.write('<style type="text/css">td.ri { border:1px solid #000000; background-color:#ffffff; color:#000000; text-align:center; vertical-align:center; width:40px; height:40px; cursor:default; font-family:verdana,sans-serif;} <\/style>');
document.write('<table style="border:2px solid #000000; border-spacing:2px; background-color:#ffffff">');
for(i=0;i<fields.length;i++) {
document.write('<tr>');
for(j=0;j<fields[i].length;j++) document.write('<td class="ri" id="ri_' + i + '_' + j + '" onClick="move(' + i + ',' + j + ')">' + (fields[i][j] ? fields[i][j] : 'X') + '<\/td>');
document.write('<\/tr>');
}
document.write('<tr><td id="zug" colspan="'+width+'" style="height:20px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#c0c0c0; color:#000000; font-weight:bold; border:1px solid #000000">0.Zug<\/td><\/tr>');
document.write('<tr>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#c0ffc0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+easy+')">Einfach<\/td>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ffffc0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+med+')">Mittel<\/td>');
document.write('<td style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ffc0c0; color:#000000; border:1px solid #000000; font-size:10px" onClick="mix('+diff+')">Schwer<\/td>');
document.write('<td colspan="'+(width-3)+'"style="height:30px; vertical-align:center; text-align:center; font-family:verdana,sans-serif; cursor:default; background-color:#ff0000; color:#000000; border:1px solid #000000; font-size:10px" onClick="reset()">Reset<\/td><\/tr>');
document.write('<\/table>');
draw(0);
}
//-->
</script>