BreakOut

Die meisten von euch kennen das Spiel Breakout, evtl. auch unter einem anderen Namen.

Wir haben das Javascript BreakOut inzwischen so angepaßt, dass ihr es auch im Firefox Browser spielen könnt.

Weiterhin ist es nicht mehr nötig, sich die ganze Datei runterzuladen – es genügt, wenn ihr den Javascript-Code von unten einfach auf eurer Homepage einfügt. Auf Bilder oder sonstiges müsst ihr nicht achten 🙂

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- // Original: Nick Young (ywing9787 (at) aol.com) // Web Site: http://www.angelfire.com/biz6/ywing9787 // // modifiziert von kostenlose-javascripts.de // funktioniert jetzt auch im Firefox ;) var timerID = null; var INT = 30; var loadFLG = 0; var gameFLG = 0; var missFLG = 0; var tim = 0; var blcol = new Array(5); // block color var blsta = new Array(40); // block status var blNO = new Array(40); // block No var blclr = 0; // clear block var ballX = 0; // ball data var ballY = 0; var ballN = 5; var ballDX = 0; var ballDY = 0; var tmpRL = 193; var X = 0; blcol[0] = "#FFFF00"; blcol[1] = "#FFCF00"; blcol[2] = "#FF7F00"; blcol[3] = "#FF3F00"; blcol[4] = "#FF0000"; blcol[5] = "#000000"; document.write('<div style="position: relative;">'); document.write('<span id="info" style="position:absolute">'); document.write('<div>'); document.write('Ball: <input type="text" name="BL" id="BL" size="5" value="5"><br />'); document.write('Zeit: <input type="text" name="TM" id="TM" size="5" value="0">'); document.write('</div>'); document.write('</span>'); function SUP() { document.getElementById('UP').outerHTML = "<div id='DN' style='position:absolute'><a href='javascript:SDN()'>LANGSAMER</a></div>"; document.getElementById('DN').style.top = "170px"; document.getElementById('DN').style.left = "432px"; INT = 10; } function SDN() { document.getElementById('DN').outerHTML = "<div id='UP' style='position:absolute'><a href='javascript:SUP()'>SCHNELLER</a></div>"; document.getElementById('UP').style.top = "170px"; document.getElementById('UP').style.left = "432px"; INT = 100; } with (document) { document.write("<div id='bgIE' width='394' height='300' bgcolor='#000000' style='background-color:#000000;width:394px;height:300px;position:absolute'></div>"); document.write("<div id='b0' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:29px'></div>"); document.write("<div id='b1' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:75px'></div>"); document.write("<div id='b2' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:121px'></div>"); document.write("<div id='b3' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:167px'></div>"); document.write("<div id='b4' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:213px'></div>"); document.write("<div id='b5' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:259px'></div>"); document.write("<div id='b6' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:305px'></div>"); document.write("<div id='b7' style='background-color:#FFFF00; width:42px;height:16px;position:absolute; top:48px; left:351px'></div>"); document.write("<div id='b8' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:29px'></div>"); document.write("<div id='b9' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:75px'></div>"); document.write("<div id='b10' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:121px'></div>"); document.write("<div id='b11' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:167px'></div>"); document.write("<div id='b12' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:213px'></div>"); document.write("<div id='b13' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:259px'></div>"); document.write("<div id='b14' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:305px'></div>"); document.write("<div id='b15' style='background-color:#FFCF00; width:42px;height:16px;position:absolute; top:68px; left:351px'></div>"); document.write("<div id='b16' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:29px'></div>"); document.write("<div id='b17' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:75px'></div>"); document.write("<div id='b18' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:121px'></div>"); document.write("<div id='b19' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:167px'></div>"); document.write("<div id='b20' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:213px'></div>"); document.write("<div id='b21' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:259px'></div>"); document.write("<div id='b22' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:305px'></div>"); document.write("<div id='b23' style='background-color:#FF7F00; width:42px;height:16px;position:absolute; top:88px; left:351px'></div>"); document.write("<div id='b24' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:29px'></div>"); document.write("<div id='b25' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:75px'></div>"); document.write("<div id='b26' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:121px'></div>"); document.write("<div id='b27' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:167px'></div>"); document.write("<div id='b28' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:213px'></div>"); document.write("<div id='b29' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:259px'></div>"); document.write("<div id='b30' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:305px'></div>"); document.write("<div id='b31' style='background-color:#FF3F00; width:42px;height:16px;position:absolute; top:108px; left:351px'></div>"); document.write("<div id='b32' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:29px'></div>"); document.write("<div id='b33' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:75px'></div>"); document.write("<div id='b34' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:121px'></div>"); document.write("<div id='b35' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:167px'></div>"); document.write("<div id='b36' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:213px'></div>"); document.write("<div id='b37' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:259px'></div>"); document.write("<div id='b38' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:305px'></div>"); document.write("<div id='b39' style='background-color:#FF0000; width:42px;height:16px;position:absolute; top:128px; left:351px'></div>"); document.write("<div id='ball' style='position:absolute'>"); document.write("<div style='background-color:#B0B0B0; width:4px;height:8px;position:absolute; left:0px; top:0px'></div>"); document.write("<div style='background-color:#B0B0B0; width:8px;height:4px;position:absolute; left:-1px; top:2px'></div>"); document.write("<div style='background-color:#FFFFFF; width:4px;height:4px;position:absolute; left:0px; top:1px'></div>"); document.write("</div>"); document.write("<div id='racket' style='background-color:#B0B0FF; width:40px;height:4px;position:absolute'></div>"); document.write("<div id='starter' style='position:absolute'><input type='button' value='START' onclick='initG();blur()'></div>"); document.write("<div id='clrmes' style='position:absolute'><font style='font-size:24px' color='#44CC44'>ALL CLEAR!</font></div>"); document.write("<div id='ovrmes' style='position:absolute'><font style='font-size:24px' color='#CC4444'>GAME OVER!</font></div>"); document.write("<div id='DN' style='position:absolute'><a href='javascript:SDN()'>LANGSAMER</a></div>"); } function mainF() { clearTimeout(timerID); tim = tim + 1; with (Math){ tmptim = floor(tim / 10)}; document.getElementById('TM').value = tmptim; ballX = ballX + ballDX; ballY = ballY + ballDY; outCHK(); blkCHK(); document.getElementById('ball').style.top = ballY + "px"; document.getElementById('ball').style.left = ballX + "px"; document.getElementById('racket').style.left = tmpRL + "px"; if (gameFLG == 01){ timerID = setTimeout("mainF()", INT); } } function initG() { if (blclr >= 40) { blclr = 0; tim = 0; ballN = 3; with (Math) { tmptim = floor(tim / 10); } document.getElementById('TM').value = tmptim; document.getElementById('clrmes').style.top = "-1000px"; document.getElementById('clrmes').style.left = "-1000px"; document.getElementById('ovrmes').style.top = "-1000px"; document.getElementById('ovrmes').style.left = "-1000px"; for (ib = 0; ib < 5; ib++){ for (ia = 0; ia < 8; ia++) { chc(ib * 8 + ia +1, ib); blsta[ib * 8 + ia] = ib; } } } document.getElementById('BL').value = ballN; document.getElementById('starter').style.top = "-1000px"; document.getElementById('starter').style.left = "-1000px"; gameFLG = 1; loadFLG = 1; ballX = 209; ballY = 270; ballDX =- 8; ballDY =- 8; tmpRL = 193; missFLG = 0; timerID = setTimeout("mainF()", INT); } function MouseMv(e) { X = (e) ? e.pageX - 225: window.event.x; if (loadFLG == 1) { tmpRL = X - 20; if (tmpRL < 16) { tmpRL = 16; } if (tmpRL > 370) { tmpRL = 370; } } } function outCHK() { if (ballX < 16){ ballX = 32 - ballX; ballDX = -ballDX; } if (ballX > 401){ ballX = 802 - ballX; ballDX = -ballDX; } if (ballY < 16){ ballY = 32 - ballY; ballDY = -ballDY; } if (ballY >= 272) { if (missFLG == 0) { tmpX = (ballDX / ballDY) * (272 - ballY) + ballX; if (tmpX >= tmpRL - 12) { if (tmpX <= tmpRL + 42) { ballY = 272; ballDY = -ballDY; ballX = tmpX; ballRD = tmpX - tmpRL; with (Math){ ballDX = 8 * abs(ballDX) / ballDX; } if (ballRD < -4){ ballDX = -15; } if (ballRD > 36){ ballDX = 15; } if (ballRD >= 14){ if (ballRD <= 16) { ballDX = -2; } } if (ballRD >= 17){ if (ballRD <= 20) { ballDX = 2; } } if (ballRD >= 0){ if (ballRD <= 4) { ballDX = -4; } } if (ballRD >= 28){ if (ballRD <= 32) { ballDX = 4; } } if (ballRD >= -4){ if (ballRD <= -1) { ballDX = -11; } } if (ballRD >= 33){ if (ballRD <= 36) { ballDX = 11; } } } } if (ballDY > 0){ missFLG = 1; } } else { if (ballY > 290){ missFLG = 0; ballN = ballN - 1; gameEnd(); } } } } function blkCHK() { tmpY = ballY + 4; tmpX = ballX + 4; if (tmpY >= 48) { if (tmpY <= 147) { if (tmpX >= 29) { if (tmpX <= 396) { with (Math) { ia = floor((tmpX - 29) / 46); ib = floor((tmpY - 48) / 20); ic = ib * 8 + ia; } if (blsta[ic] <= 4) { tmpbc = blsta[ic] + 1; blsta[ic] = tmpbc; chc(ic + 1, tmpbc); if (tmpbc == 5){ blclr = blclr + 1; } if (blclr >= 40){ gameEnd(); } if (ballDX > 0) { iy=(ballDY / ballDX) * (29 + 46 * ia - tmpX) + tmpY; if (iy > 48 + 20 * ib + 18) { tmpY1 = 48 + 20 * ib + 18; tmpX1 = (ballDX / ballDY) * (48 + 20 * ib + 18 - tmpY) + tmpX; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDY = -ballDY; } else { if (iy < 44 + 20 * ib) { tmpY1 = 48 + 20 * ib; tmpX1 = (ballDX / ballDY) * (48 + 20 * ib - tmpY) + tmpX; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDY = -ballDY; } else { tmpX1 = 29 + 46 * ia; tmpY1 = (ballDY / ballDX) * (29 + 46 * ia - tmpX) + tmpY; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDX = -ballDX; } } } else { iy = (ballDY / ballDX) * (29+46 * ia + 44 - tmpX) + tmpY; if (iy > 48 + 20 * ib + 18) { tmpY1 = 48 + 20 * ib + 18; tmpX1 = (ballDX / ballDY) * (48 + 20 * ib + 18 - tmpY) + tmpX; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDY = -ballDY; } else { if (iy < 44 + 20 * ib) { tmpY1 = 48 + 20 * ib; tmpX1 = (ballDX / ballDY) * (48 + 20 * ib - tmpY) + tmpX; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDY = -ballDY; } else { tmpX1 = 29+46 * ia + 44; tmpY1 = (ballDY / ballDX) * (29 + 46 * ia + 44 - tmpX) + tmpY; ballX = tmpX1 - 4; ballY = tmpY1 - 4; ballDX = -ballDX; } } } } } } } } } function gameEnd() { document.getElementById('BL').value = ballN; gameFLG = 0; loadFLG = 0; document.getElementById('starter').style.top = "200px"; document.getElementById('starter').style.left = "180px"; if (blclr >= 40) { document.getElementById('clrmes').style.top = "150px"; document.getElementById('clrmes').style.left = "160px"; } if (ballN <= 0) { document.getElementById('ovrmes').style.top = "150px"; document.getElementById('ovrmes').style.left = "160px"; blclr = 40; } } function onLD() { document.getElementById('bgIE').style.top = "16px"; document.getElementById('bgIE').style.left = "16px"; document.getElementById('ball').style.top = "270px"; document.getElementById('ball').style.left = "209px"; document.getElementById('racket').style.top = "280px"; document.getElementById('racket').style.left = "193px"; document.getElementById('info').style.top = "16px"; document.getElementById('info').style.left = "432px"; document.getElementById('starter').style.top = "-1000px"; document.getElementById('starter').style.left = "-1000px"; document.getElementById('clrmes').style.top = "-1000px"; document.getElementById('clrmes').style.left = "-1000px"; document.getElementById('ovrmes').style.top = "-1000px"; document.getElementById('ovrmes').style.left = "-1000px"; document.getElementById('DN').style.top = "170px"; document.getElementById('DN').style.left = "432px"; for (ib = 0; ib < 5; ib++) { for (ia = 0; ia < 8; ia++) { blsta[ib * 8 + ia] = ib; } } document.getElementById('starter').style.top = "200px"; document.getElementById('starter').style.left = "180px"; } function chc(bno,bcl) { tmpbno = document.getElementById("b" + (bno-1)); eval(tmpbno).style.backgroundColor = blcol[bcl]; } document.write('</div>'); //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/spiele/breakout/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">onLD();document.onmousemove=MouseMv;</script> <!-- präsentiert von kostenlose-javascripts.de -->