topical media & game development

talk show tell print

game-javascript-casual-breakout-game.htm / htm



  
  <!-- FIVE STEPS TO INSTALL BREAK OUT:
  
    1.  Put the first code in the break out opener page
    2.  Create a new document, save it as break-out.html
    3.  Copy the coding into the HEAD of break-out.html
    4.  Add the next section into the BODY tag of break-out.html
    5.  Put the last coding into the BODY of break-out.html  -->
  
  <!-- STEP ONE: Put the first code into the break out opener page  -->
  
  <center>
  <form name="open-break-out">
  <input type=button value="Play Break Out" onClick="window.open('break-out.html','break-out','top=100,left=100,width=575,height=400');">
  </form>
  </center>
  
  <!-- STEP TWO: Create a new document, save it as break-out.html  -->
  
  <!-- STEP THREE: Paste this code into the HEAD of break-out.html  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Nick Young (ywing9787@aol.com) -->
  <!-- Web Site:  http://www.angelfire.com/biz6/ywing9787 -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  var timerID = null;
  var INT = 10;
  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";
  
  function mainF() {
  clearTimeout(timerID);
  tim = tim + 1;
  with (Math){ tmptim = floor(tim / 10)};
  document.forms[0].TM.value = tmptim;
  ballX = ballX + ballDX;
  ballY = ballY + ballDY;
  outCHK();
  blkCHK();
  ball.style.posTop = ballY;
  ball.style.posLeft = ballX;
  racket.style.posLeft = tmpRL;
  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.forms[0].TM.value = tmptim;
  clrmes.style.posTop = -1000;
  clrmes.style.posLeft = -1000;
  ovrmes.style.posTop = -1000;
  ovrmes.style.posLeft = -1000;
  for (ib = 0; ib < 5; ib++){ for (ia = 0; ia < 8; ia++) {
  chc(ib * 8 + ia +1, ib);
  blsta[ib * 8 + ia] = ib;
        }
     }
  }
  document.forms[0].BL.value = ballN;
  starter.style.posTop = -1000;
  starter.style.posLeft = -1000;
  gameFLG = 1;
  loadFLG = 1;
  ballX = 209;
  ballY = 270;
  ballDX =- 8;
  ballDY =- 8;
  tmpRL = 193;
  missFLG = 0;
  timerID = setTimeout("mainF()", INT);
  }
  function SUP() {
  UP.outerHTML = "<DIV ID='DN' STYLE='position:absolute'><A HREF='javascript:SDN()'>SPEED DOWN</A></DIV>";
  DN.style.posTop = 170;
  DN.style.posLeft = 432;
  INT = 10;
  }
  function SDN() {
  DN.outerHTML = "<DIV ID='UP' STYLE='position:absolute'><A HREF='javascript:SUP()'>SPEED UP</A></DIV>";
  UP.style.posTop = 170;
  UP.style.posLeft = 432;
  INT = 100;
  }
  function MouseMv() {
  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.forms[0].BL.value = ballN;
  gameFLG = 0;
  loadFLG = 0;
  starter.style.posTop  =  200;
  starter.style.posLeft  =  180;
  if (blclr >= 40) {
  clrmes.style.posTop = 150;
  clrmes.style.posLeft = 160;
  }
  if (ballN <= 0) {
  ovrmes.style.posTop = 150;
  ovrmes.style.posLeft = 160;
  blclr = 40;
     }
  }
  function onLD() {
  bgIE.style.posTop = 16;
  bgIE.style.posLeft = 16;
  ball.style.posTop = 270;
  ball.style.posLeft = 209;
  racket.style.posTop = 280;
  racket.style.posLeft = 193;
  info.style.posTop = 16;
  info.style.posLeft = 432;
  starter.style.posTop = -1000;
  starter.style.posLeft = -1000;
  clrmes.style.posTop = -1000;
  clrmes.style.posLeft = -1000;
  ovrmes.style.posTop = -1000;
  ovrmes.style.posLeft = -1000;
  DN.style.posTop = 170;
  DN.style.posLeft = 432;
  for (ib = 0; ib < 5; ib++) {
  for (ia = 0; ia < 8; ia++) {
  blsta[ib * 8 + ia] = ib;
     }
  }
  starter.style.posTop = 200;
  starter.style.posLeft = 180;
  }
  function chc(bno,bcl) {
  tmpbno = "b" + (bno-1);
  eval(tmpbno).bgColor = blcol[bcl];
  }
  //  End -->
  </script>
  </HEAD>
  
  <!-- STEP FOUR: Insert the event handlers into the BODY tag of break-out.html  -->
  
  <body onLoad="onLD();" onMouseMove='X=event.x;MouseMv();'>
  
  <!-- STEP FIVE: Copy this code into the BODY of your HTML document  -->
  
  <span id=info style='position:absolute'>
  <pre>
  <font style="font-size:24px" color="#000044"><i><b>BREAK OUT</b></i></font>
  <form>
  Ball: <input type=text name=BL size=5 value=5>
  Time: <input type=text name=TM size=5 value=0>
  </form>
  </pre>
  </span>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!--  block image write
  with (document) {
  write("<table id='bgIE' width='394' height='300' bgcolor='#000000' style='position:absolute'><td></td></table>");
  
  write("<table id='b0' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:29'><td></td></table>");
  write("<table id='b1' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:75'><td></td></table>");
  write("<table id='b2' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:121'><td></td></table>");
  write("<table id='b3' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:167'><td></td></table>");
  write("<table id='b4' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:213'><td></td></table>");
  write("<table id='b5' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:259'><td></td></table>");
  write("<table id='b6' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:305'><td></td></table>");
  write("<table id='b7' width='42' height='16' bgcolor='#FFFF00' style='position:absolute; top:48; left:351'><td></td></table>");
  
  write("<table id='b8' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:29'><td></td></table>");
  write("<table id='b9' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:75'><td></td></table>");
  write("<table id='b10' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:121'><td></td></table>");
  write("<table id='b11' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:167'><td></td></table>");
  write("<table id='b12' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:213'><td></td></table>");
  write("<table id='b13' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:259'><td></td></table>");
  write("<table id='b14' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:305'><td></td></table>");
  write("<table id='b15' width='42' height='16' bgcolor='#FFCF00' style='position:absolute; top:68; left:351'><td></td></table>");
  
  write("<table id='b16' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:29'><td></td></table>");
  write("<table id='b17' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:75'><td></td></table>");
  write("<table id='b18' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:121'><td></td></table>");
  write("<table id='b19' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:167'><td></td></table>");
  write("<table id='b20' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:213'><td></td></table>");
  write("<table id='b21' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:259'><td></td></table>");
  write("<table id='b22' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:305'><td></td></table>");
  write("<table id='b23' width='42' height='16' bgcolor='#FF7F00' style='position:absolute; top:88; left:351'><td></td></table>");
  
  write("<table id='b24' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:29'><td></td></table>");
  write("<table id='b25' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:75'><td></td></table>");
  write("<table id='b26' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:121'><td></td></table>");
  write("<table id='b27' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:167'><td></td></table>");
  write("<table id='b28' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:213'><td></td></table>");
  write("<table id='b29' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:259'><td></td></table>");
  write("<table id='b30' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:305'><td></td></table>");
  write("<table id='b31' width='42' height='16' bgcolor='#FF3F00' style='position:absolute; top:108; left:351'><td></td></table>");
  
  write("<table id='b32' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:29'><td></td></table>");
  write("<table id='b33' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:75'><td></td></table>");
  write("<table id='b34' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:121'><td></td></table>");
  write("<table id='b35' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:167'><td></td></table>");
  write("<table id='b36' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:213'><td></td></table>");
  write("<table id='b37' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:259'><td></td></table>");
  write("<table id='b38' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:305'><td></td></table>");
  write("<table id='b39' width='42' height='16' bgcolor='#FF0000' style='position:absolute; top:128; left:351'><td></td></table>");
  
  write("<div id='ball' style='position:absolute'>");
  write("<table width='4' height='8' bgcolor='#B0B0B0' style='position:absolute; left:0; top:0'><td></td></table>");
  write("<table width='8' height='4' bgcolor='#B0B0B0' style='position:absolute; left:-1; top:2'><td></td></table>");
  write("<table width='4' height='4' bgcolor='#FFFFFF' style='position:absolute; left:0; top:1'><td></td></table>");
  write("</div>");
  write("<table id='racket' width='40' height='4' bgcolor='#B0B0FF' style='position:absolute'><td></td></table>");
  write("<div id='starter' style='position:absolute'><form><input type='button' value='START' ONCLICK='initG();blur()'></form></div>");
  write("<div id='clrmes'  style='position:absolute'><font style='font-size:24px' color='#44CC44'>ALL CLEAR!</font></div>");
  write("<div id='ovrmes' style='position:absolute'><font style='font-size:24px' color='#CC4444'>GAME OVER!</font></div>");
  write("<div id='DN' style='position:absolute'><a href='javascript:SDN()'>SPEED DOWN</a></div>");
  }
  // End -->
  </script>
  
  <p><center>
  <font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  12.64 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.