Source Code
<SCRIPT type="text/javascript"> var Bricks = [10,11,12,13, 1,11,21,31, 20,21,22,23, 2,12,22,32, 1, 2,11,12, 1, 2,11,12, 1, 2,11,12, 1, 2,11,12, 2, 3,11,12, 2,12,13,23, 2, 3,11,12, 2,12,13,23, 1, 2,12,13, 2,11,12,21, 1, 2,12,13, 2,11,12,21, 0,10,11,12, 1, 2,11,21, 10,11,12,22, 1,11,20,21, 3,11,12,13, 2,12,22,23, 11,12,13,21, 1, 2,12,22, 2,11,12,13, 2,12,13,22, 11,12,13,22, 2,11,12,22 ]; var Spielfeld = [1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1 ]; var i,j,k; var Modus; var Brick; var Start = 166; var Position; var Teil0,Teil1,Teil2,Teil3;
var T0,T1,T2,T3; var blah,unten; var color;
var lost;
var Leerzeile;
var Speed; var next;
var Level;
var Linien;
var Punkte; function showBrick()
{
Teil0 = Position - Bricks[ 4*Modus + 16*Brick];
Teil1 = Position - Bricks[1 + 4*Modus + 16*Brick];
Teil2 = Position - Bricks[2 + 4*Modus + 16*Brick];
Teil3 = Position - Bricks[3 + 4*Modus + 16*Brick];
if (Spielfeld[NiS(Teil0,0)] || Spielfeld[NiS(Teil1,0)] ||
Spielfeld[NiS(Teil2,0)] || Spielfeld[NiS(Teil3,0)]) Verloren();
else
{
window.document.getElementById('S' + Teil0).style.backgroundColor = color;
window.document.getElementById('S' + Teil1).style.backgroundColor = color;
window.document.getElementById('S' + Teil2).style.backgroundColor = color;
window.document.getElementById('S' + Teil3).style.backgroundColor = color;
}
} function hideBrick()
{
window.document.getElementById('S' + Teil0).style.backgroundColor = 'black';
window.document.getElementById('S' + Teil1).style.backgroundColor = 'black';
window.document.getElementById('S' + Teil2).style.backgroundColor = 'black';
window.document.getElementById('S' + Teil3).style.backgroundColor = 'black';
} function NiS(Zelle,was)
{
temp = 11 + (2 * (1 + Math.floor(Zelle / 10))) + (10 * Math.floor(Zelle / 10)) + (Zelle % 10);
return temp + was;
} function UP()
{
if (Modus < 3) Temp = Modus + 1;
else Temp = 0;
T0 = Position - Bricks[ 4*Temp + 16*Brick];
T1 = Position - Bricks[1 + 4*Temp + 16*Brick];
T2 = Position - Bricks[2 + 4*Temp + 16*Brick];
T3 = Position - Bricks[3 + 4*Temp + 16*Brick]; if ( Spielfeld[NiS(T0,0)] || Spielfeld[NiS(T1,0)] || Spielfeld[NiS(T2,0)] ||
Spielfeld[NiS(T3,0)] || (((T0%10 < 1) || (T1%10 < 1) || (T2%10 < 1) ||
(T3%10 < 1)) && ((T0%10 > 8) || (T1%10 > 8) || (T2%10 > 8) || (T3%10 > 8)) || ((T0 < 12) || (T1 < 12) || (T2 < 12) || (T3 < 12))) ) return false;
hideBrick();
if (Modus < 3) Modus++;
else Modus = 0;
showBrick();
} function DOWN()
{
if (Spielfeld[NiS(Teil0,-12)] || Spielfeld[NiS(Teil1,-12)] ||
Spielfeld[NiS(Teil2,-12)] || Spielfeld[NiS(Teil3,-12)]) return false;
hideBrick();
Position -= 10;
showBrick();
return true;
} function LEFT()
{
if (Spielfeld[NiS(Teil0,-1)] || Spielfeld[NiS(Teil1,-1)] ||
Spielfeld[NiS(Teil2,-1)] || Spielfeld[NiS(Teil3,-1)]) return false;
hideBrick();
Position--;
showBrick();
}
function RIGHT()
{
if (Spielfeld[NiS(Teil0,1)] || Spielfeld[NiS(Teil1,1)] ||
Spielfeld[NiS(Teil2,1)] || Spielfeld[NiS(Teil3,1)]) return false;
hideBrick();
Position++;
showBrick();
} function Tastendruck(Druck)
{
if (document.all) k = window.event.keyCode;
else k = Druck.which;
if ((k == 38 || k == 32 || k == 87) && lost == 0) UP();
if ((k == 37 || k == 65) && lost == 0) LEFT();
if ((k == 39 || k == 68) && lost == 0) RIGHT();
if ((k == 40 || k == 83) && lost == 0) DOWN();
if (k == 80)
{
if (lost && document.getElementById('NG').style.visibility == "hidden")
{
lost = 0;
Verlauf();
}
else lost = 1;
}
} function Verlauf()
{
if (!lost)
{
(DOWN()) ? unten = 0 : unten = 1; if (unten == 1)
{
Punkte += Level;
Position = Start;
Modus = 0;
unten = 0;
Brick = Zufallsstein(); Spielfeld[NiS(Teil0,0)] = 1;
Spielfeld[NiS(Teil1,0)] = 1;
Spielfeld[NiS(Teil2,0)] = 1;
Spielfeld[NiS(Teil3,0)] = 1;
Zeilen();
document.getElementById('Points').value = Punkte;
showBrick();
}
blah = setTimeout("Verlauf()",1000/Speed);
}
} function Zufallsstein()
{
if (next == 11)
{
next = Math.random();
if (next <= 1/17) next = 0;
else if (next <= 3/17) next = 1;
else if (next <= 6/17) next = 2;
else if (next <= 9/17) next = 3;
else if (next <= 12/17) next = 4;
else if (next <= 15/17) next = 5;
else next = 6;
} temp = next;
next = Math.random();
if (next <= 1/17) next = 0;
else if (next <= 3/17) next = 1;
else if (next <= 6/17) next = 2;
else if (next <= 9/17) next = 3;
else if (next <= 12/17) next = 4;
else if (next <= 15/17) next = 5;
else next = 6; switch (next)
{
case 0:
color = '#0206AC';
break;
case 1:
color = 'darkblue';
break;
case 2:
color = 'darkred';
break;
case 3:
color = 'purple';
break;
case 4:
color = '#B67600';
break;
case 5:
color = 'green';
break;
case 6:
color = 'darkgreen';
break;
}
for (i = 0; i < 4; i++)
{
for (j = 0; j < 4; j++)
{
window.document.getElementById('P' + (i*10 + j)).style.backgroundColor = 'black';
}
}
window.document.getElementById('P' + (33 - Bricks[ 16*next])).style.backgroundColor = color;
window.document.getElementById('P' + (33 - Bricks[1 + 16*next])).style.backgroundColor = color;
window.document.getElementById('P' + (33 - Bricks[2 + 16*next])).style.backgroundColor = color;
window.document.getElementById('P' + (33 - Bricks[3 + 16*next])).style.backgroundColor = color; switch (temp)
{
case 0:
color = '#0206AC';
break;
case 1:
color = 'darkblue';
break;
case 2:
color = 'darkred';
break;
case 3:
color = 'purple';
break;
case 4:
color = '#B67600';
break;
case 5:
color = 'green';
break;
case 6:
color = 'darkgreen';
break;
}
return temp;
} function init()
{
window.document.getElementById('NG').style.visibility = 'hidden';
Spielfeld = [
1,1,1,1,1,1,1,1,1,1,1,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,0,0,1 ];
for (i = 0; i < 10; i++)
{
for (j = 0; j < 17; j++)
{
window.document.getElementById('S' + (j*10 + i)).style.backgroundColor = 'black';
}
}
Position = Start;
next = 11;
document.getElementById('Zeilen').value = "0";
document.getElementById('Level').value = "1";
document.getElementById('Points').value = "0";
Level = 1;
Punkte = 0;
Brick = Zufallsstein();
Modus = 0;
showBrick();
lost = 0;
Speed = 1;
Verlauf();
} function Zeilen()
{
Linien = 0;
for (i = 0; i < 16; i++)
{
do
{ temp = NiS(i * 10,0);
if (Spielfeld[temp] && Spielfeld[(temp+1)] &&Spielfeld[(temp+2)] &&
Spielfeld[(temp+3)] && Spielfeld[(temp+4)] && Spielfeld[(temp+5)] &&
Spielfeld[(temp+6)] && Spielfeld[(temp+7)] && Spielfeld[(temp+8)] &&
Spielfeld[(temp+9)])
{ Linien++;
Leerzeile = 1;
document.getElementById('Zeilen').value++;
Level = Math.floor(document.getElementById('Zeilen').value / 10) + 1;
document.getElementById('Level').value = Level;
if (document.getElementById('Zeilen').value%10 == 0) Speed *= 1.3;
for (j = i; j < 16; j++)
{
k = 0;
temp = NiS(j * 10,0);
while (k < 10)
{
window.document.getElementById('S' + (j*10 + k)).style.backgroundColor =
window.document.getElementById('S' + (j*10 + k + 10)).style.backgroundColor;
Spielfeld[temp+k] = Spielfeld[temp + 12 + k];
k++;
}
} k = 0;
temp = NiS(160,0);
while (k < 10)
{
window.document.getElementById('S' + (160 + k)).style.backgroundColor = 'black';
Spielfeld[temp+k] = 0;
k++;
}
}
else Leerzeile = 0;
}
while (Leerzeile);
} switch(Linien)
{
case 1:
Punkte += (50 * Level);
break;
case 2:
Punkte += (100 * Level);
break;
case 3:
Punkte += (300 * Level);
break;
case 4:
Punkte += (1200 * Level);
break;
}
} function Verloren()
{
lost = 1;
window.document.getElementById('NG').style.visibility = 'visible';
}
</SCRIPT> <TABLE cellspacing="0" cellpadding="0"> <TR>
<TD rowspan="17" style="background-color:grey"> </TD>
<TD id="S160"> </TD>
<TD id="S161"> </TD>
<TD id="S162"> </TD>
<TD id="S163"> </TD>
<TD id="S164"> </TD>
<TD id="S165"> </TD>
<TD id="S166"> </TD>
<TD id="S167"> </TD>
<TD id="S168"> </TD>
<TD id="S169"> </TD>
<TD rowspan="17" style="background-color:grey"> </TD>
</TR> <TR>
<TD id="S150"> </TD>
<TD id="S151"> </TD>
<TD id="S152"> </TD>
<TD id="S153"> </TD>
<TD id="S154"> </TD>
<TD id="S155"> </TD>
<TD id="S156"> </TD>
<TD id="S157"> </TD>
<TD id="S158"> </TD>
<TD id="S159"> </TD>
</TR>
.
.
.
<TR>
<TD id="S0"> </TD>
<TD id="S1"> </TD>
<TD id="S2"> </TD>
<TD id="S3"> </TD>
<TD id="S4"> </TD>
<TD id="S5"> </TD>
<TD id="S6"> </TD>
<TD id="S7"> </TD>
<TD id="S8"> </TD>
<TD id="S9"> </TD>
</TR> <TR>
<TD colspan="12" style="background-color:grey"> </TD>
</TR>
</TABLE> <TABLE cellpadding="0" cellspacing="0">
<TR>
<TD style="background-color:grey" colspan="6"> </TD>
</TR>
<TR>
<TD style="background-color:grey" rowspan="4"> </TD>
<TD id="P30"> </TD>
<TD id="P31"> </TD>
<TD id="P32"> </TD>
<TD id="P33"> </TD>
<TD style="background-color:grey" rowspan="4"> </TD>
</TR>
<TR>
<TD id="P20"> </TD>
<TD id="P21"> </TD>
<TD id="P22"> </TD>
<TD id="P23"> </TD>
</TR>
<TR>
<TD id="P10"> </TD>
<TD id="P11"> </TD>
<TD id="P12"> </TD>
<TD id="P13"> </TD>
</TR>
<TR>
<TD id="P0"> </TD>
<TD id="P1"> </TD>
<TD id="P2"> </TD>
<TD id="P3"> </TD>
</TR>
<TR>
<TD style="background-color:grey" colspan="6"> </TD>
</TR>
</TABLE> <INPUT type="button" value="⇑ " onClick="this.blur(); UP()">
<INPUT type="button" value="⇐ " onClick="this.blur(); LEFT()">
<INPUT type="button" value="⇓ " onClick="this.blur(); DOWN()">
<INPUT type="button" value="⇒ " onClick="this.blur(); RIGHT()"> <INPUT type="button" value="Pause" onClick="this.blur(); if(lost){lost=0; Verlauf(); }else lost=1"> <INPUT type="text" id="Zeilen" size="7" value="0">
<INPUT type="text" id="Level" size="7" value="0">
<INPUT type="text" id="Points" size="7" value="0"> <INPUT id="NG" type="button" value="New Game" onClick="this.blur(); init(); "> <SCRIPT type="text/javascript">
document.onkeydown = Tastendruck;
</SCRIPT> |
For this game I used two different containers: one complete container including the walls and an inner container without the walls (this is the space where the bricks can be moved around). The latter one is used for the graphical display (see the HTML table at the bottom) and the first one for internal processing (see the Spielfeld[] array).
Also in this game I tried to compress everything in one file. There is not a single external graphic needed since everything works with changing background colors of table cells. In this game I used black as the background color of empty cells and other colors for the bricks. Of course you can change these colors as you like but remember to change every occasion of it in the code below.
This array describes the bricks. If you have a 4×4 matrix and name the elements from the lower left to upper right with the formula row×10 + column you can get the four parts of one brick by putting a mark into the element you come to, when you substract one of the numbers of a quartet from the upper left element (33). The four quartets stand for the 4 positions a brick can have.