扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript如何编写网页小游戏
  • 650

0
分享到

JavaScript如何编写网页小游戏

2024-04-02 19:04:59 650人浏览 八月长安
摘要

这篇文章主要介绍javascript如何编写网页小游戏，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！以下为游戏界面：以下为游戏代码： <html> <head&g

这篇文章主要介绍javascript如何编写网页小游戏，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

以下为游戏界面：

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  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如何编写网页小游戏”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: JavaScript如何编写网页小游戏

本文链接: https://lsjlt.com/news/76727.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript如何编写网页小游戏
    这篇文章主要介绍JavaScript如何编写网页小游戏，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！以下为游戏界面：以下为游戏代码： <html> <head&g...
    99+
    2024-04-02
  • 如何用javascript写小游戏
    在当下，JavaScript已经成为前端开发中必不可少的一项技能，它不仅可以开发网页交互效果，还能实现简单的小游戏。本文将介绍如何用JavaScript来编写小游戏。一、准备工作在本地电脑上创建一个新的文件夹，取一个合适的名字。在文件夹中新...
    99+
    2023-05-15
  • JavaScript如何实现网页五子棋小游戏
    这篇文章主要介绍“JavaScript如何实现网页五子棋小游戏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript如何实现网页五子棋小游戏”文章能帮助大家解决问题。设计思路如下：先采用...
    99+
    2023-07-02
  • 如何使用Python编写小游戏？
    大家好，我是沐尘而生，如果你是一个热爱编程的小伙伴，又想尝试游戏开发，那么这篇文章一定能满足你的好奇心。不废话，让我们马上进入Python游戏开发的精彩世界吧！ Python游戏开发的魅力 编写小游...
    99+
    2023-08-31
    python pygame 开发语言
  • 使用JavaScript编写一个2048小游戏
    今天就跟大家聊聊有关使用JavaScript编写一个2048小游戏，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。JavaScript可以做什么1.可以使网页具有交互性，例如响应用户点...
    99+
    2023-06-07
  • JavaScript实现网页五子棋小游戏
    本文实例为大家分享了JavaScript实现网页五子棋小游戏的具体代码，供大家参考，具体内容如下 设计思路如下： 1.先采用的Math.random（）方法决定哪一方先行; 2.设置...
    99+
    2024-04-02
  • 原生js如何编写2048小游戏
    这篇文章给大家分享的是有关原生js如何编写2048小游戏的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图：代码如下：<!DOCTYPE html> &l...
    99+
    2024-04-02
  • JavaScript编写猜拳游戏
    本文实例为大家分享了JavaScript编写猜拳游戏的具体代码，供大家参考，具体内容如下 HTML代码： <!DOCTYPE html> <html lang=...
    99+
    2024-04-02
  • Android编写2048小游戏
    先来说说2048游戏规则： 开始时棋盘内随机出现两个数字，出现的数字仅可能为2或4 玩家可以选择上下左右四个方向，若棋盘内的数字出现位移或合并，视为有效移动 玩家选择的方向上若...
    99+
    2022-06-06
    小游戏 Android
  • JavaScript如何编写一个贪吃蛇游戏
    这篇文章主要介绍了JavaScript如何编写一个贪吃蛇游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。写的比较乱，有个逻辑错误：蛇吃了果...
    99+
    2024-04-02
  • javaScript如何实现网页版弹球游戏
    这篇文章给大家分享的是有关javaScript如何实现网页版弹球游戏的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<!DOCTYPE html><html><h...
    99+
    2023-06-20
  • 基于JavaScript如何编写一个翻卡游戏
    这篇文章主要介绍“基于JavaScript如何编写一个翻卡游戏”，在日常操作中，相信很多人在基于JavaScript如何编写一个翻卡游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”基于JavaScript如...
    99+
    2023-07-05
  • JavaScript如何实现网页版五子棋游戏
    这篇文章将为大家详细讲解有关JavaScript如何实现网页版五子棋游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。本程序主要通过三部分实现：棋盘绘制2.鼠标交互3.输赢判断<!DOCTYPE&n...
    99+
    2023-06-20
  • win10玩不了网页小游戏如何解决
    本篇内容介绍了“win10玩不了网页小游戏如何解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！win10玩不了网页小游戏解决方法方法一： ...
    99+
    2023-07-01
  • 如何写Node.JS版本小游戏
    目录概述打造流程相关apireadline基础使用chalkclear步骤补充说明完整代码抛砖引玉概述 今天就利用Node.JS为大家带来简单有趣的的剪刀石头布的小游戏。 打造流...
    99+
    2024-04-02
  • 用python做简单的小游戏,如何用python写小游戏
    大家好，小编来为大家解答以下问题，初学者怎么用python写简单小游戏教程，如何用python编写一个简单的小游戏，今天让我们一起来看看吧！ 1、python简单小游戏代码 　　1、Python猜拳小游戏代码： 　　2、import r...
    99+
    2023-09-08
    人工智能
  • C/C++编写推箱子小游戏
    本文实例为大家分享了C/C++编写推箱子小游戏的具体代码，供大家参考，具体内容如下 我们用' #'来代表墙，‘O'来代表箱子，' * '代表终点，‘@'代表箱子已经到达终点，‘S来表...
    99+
    2024-04-02
  • python编写的游戏如何导出
    要将Python编写的游戏导出为可执行文件，可以使用第三方库pyinstaller或cx_Freeze。以下是使用这两个库的步骤：1...
    99+
    2023-09-29
    python
  • 基于JavaScript编写一个翻卡游戏
    目录前言翻卡动画生成随机分布数组均匀元素下的随机算法不均匀元素下的随机算法生成最终数组点击事件完整代码前言 首先将这个游戏需求拆分成三个部分： 翻卡动画生成随机分布数组点击事件 翻卡...
    99+
    2023-02-15
    JavaScript实现翻卡游戏 JavaScript翻卡游戏 JavaScript游戏
  • 原生js编写贪吃蛇小游戏
    本文实例为大家分享了js编写贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 刚学完js模仿着教程，把自己写的js原生小程序。 HTML部分 <!DOCTYPE html&...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作