首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 18, 2017
以下为游戏界面：
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 = "<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>

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

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

- Author -

诚信开发

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
可以文本显示的公告栏的js代码
Mar 11 Javascript
List Installed Software Features
Jun 11 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
微信小程序实战之自定义toast（6）
Apr 18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
JavaScript实现旋转轮播图
Aug 18 #Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 #Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
DFA(1) JSON(10) linux(15) MapReduce(1) MybatisPlus(2) css3 (2) pyqt5(3) pycharm(6) Normal From(1) Qlabel(1)
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
把大数据数字口语化（python与js）两种实现
2013/02/21 Python
python实现的生成随机迷宫算法核心代码分享（含游戏完整代码）
2014/07/11 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
用Python实现随机森林算法的示例
2017/08/24 Python
快速入门python学习笔记
2017/12/06 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
银行求职信个人范文
2013/12/16 职场文书
直接有效的自我评价
2014/01/11 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
法制宣传月活动方案
2014/05/11 职场文书
代收款委托书范本
2014/10/01 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
师范生教育见习总结
2015/06/23 职场文书
业务员管理制度范本
2015/08/06 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python