登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript编写的网页小游戏分享(图)

黄舟
发布: 2017-08-20 10:09:29
原创
2373人浏览过

这篇文章主要介绍了javascript编写的网页小游戏,附上全部代码供大家查看,实现了网页的小游戏页面,需要的朋友可以参考下

以下为游戏界面:



以下为游戏代码:

<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 = "<p ID=&#39;DN&#39; STYLE=&#39;position:absolute&#39;><A HREF=&#39;javascript:SDN()&#39;>SPEED DOWN</A></p>";
      DN.style.posTop = 170;
      DN.style.posLeft = 432;
      INT = 40;
    }
    function SDN() {
      DN.outerHTML = "<p ID=&#39;UP&#39; STYLE=&#39;position:absolute&#39;><A HREF=&#39;javascript:SUP()&#39;>SPEED UP</A></p>";
      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=&#39;X=event.x;MouseMv();&#39;>
<span id=info style=&#39;position:absolute&#39;>
<pre class="brush:php;toolbar:false">
<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>
登录后复制

以上就是JavaScript编写的网页小游戏分享(图)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号