当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript编写的网页小游戏,很给力

JavaScript编写的网页小游戏,很给力

2017年12月12日  | 移动技术网IT编程  | 我要评论
以下为游戏界面:
以下为游戏代码:

<html>
<head>
  <script language="javascript">
    <!-- original: nick young () -->
    <!-- recompose: pakchoi () -->
    var timerid = null;
    var int = 40;
    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] = "blue";
    blcol[1] = "yello";
    blcol[2] = "red";
    blcol[3] = "purple";
    blcol[4] = "#ff0000";
    blcol[5] = "black";
    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 = 40;
    }
    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 = 50;
    }
    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 = ((bno < 10.5) ? "b0" : "b") + (bno-1);
      eval(tmpbno).bgcolor = blcol[bcl];
    }
    // end -->
  </script>
</head>
<body onload="onld();" onmousemove='x=event.x;mousemv();'>
<span id=info style='position:absolute'>
<pre>
<font style="font-size:24px" color="#000044"><i><b>pong</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='b00' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:29'><td></td></table>");
    write("<table id='b01' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:75'><td></td></table>");
    write("<table id='b02' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:121'><td></td></table>");
    write("<table id='b03' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:167'><td></td></table>");
    write("<table id='b04' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:213'><td></td></table>");
    write("<table id='b05' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:259'><td></td></table>");
    write("<table id='b06' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:305'><td></td></table>");
    write("<table id='b07' width='42' height='16' bgcolor='#ffff00' style='position:absolute; top:48; left:351'><td></td></table>");
    write("<table id='b08' width='42' height='16' bgcolor='#ffcf00' style='position:absolute; top:68; left:29'><td></td></table>");
    write("<table id='b09' 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>");
  }
</script>
</body>
</html>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对移动技术网的支持!

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网