建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

如何使用HTML5 Canvas创建太空游戏

更新时间:2017-04-24整理编辑:建站学习网阅读:0

    HTML5 Canvas 可以快速创建出有助于游戏开发的轻型图片。 本部分说明如何使用 Canvas 创建将在网页中运行的怀旧风格外太空飞行游戏。 此游戏的设计主要是为了展示使用 Canvas 功能开发 Web 游戏的基本原则。 此太空游戏的目标是,使您的宇宙飞船穿过分布着爆炸小行星的星域,安全返回基地。

  本教程包含运行游戏的完整代码。代码是使用 HTML5 Canvas 和 JavaScript 编写的,包含四个独立的有注释代码示例。 每个示例都涉及一项关键的编程任务,这些任务是开发游戏的不同方面所必需的。 第四个代码示例将所有任务组合在一起,创建了一个完整有效的游戏,您可以使用箭头键移动飞船,穿越分布着爆炸红色小行星的星域迷宫。 如果您的飞船撞到行星,则将被毁坏。 为了安全返回基地,您必须避开小行星,或在您撞上小行星之前将其炸毁。 将根据您移动飞船的次数和您发射的炸弹数来进行计分。

  本主题包括一个独立的有注释代码示例,为您演示如何使用 HTML5 Canvas 和 JavaScript 创建包含白色星星的随机区域,以及绘制外形像飞盘一样的橙绿相间的宇宙飞船。 此游戏图像是使用像素创建的。 通过使用即时模式,Canvas 具有将像素直接放在屏幕上的能力。 此功能您能够轻松地在需要的位置,以选择的颜色绘制点、线和形状。 此代码示例将为您演示如何通过在形状中组合数学贝塞尔曲线和颜色来创建宇宙飞船。 然后,它将说明如何使用由弧形组成的小圆圈来绘制星星。

  此代码示例包含以下任务来演示使用Canvas 绘制这些游戏元素的基本原则:

  1.向网页添加 Canvas 元素

  2.创建黑色背景

  3.在背景上绘制随机星星

  4.向背景添加宇宙飞船

  代码示例的末尾是讨论材料,说明有关这些任务的设计和结构以及工作方式的详细信息。

 Canvas 代码示例:

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
      // This function is called on page load.


      function canvasSpaceGame() {

        // Get the canvas element.
        canvas = document.getElementById("myCanvas");

        // Make sure you got it.
        if (canvas.getContext)

        // If you have it, create a canvas user inteface element.
        {
          // Specify 2d canvas type.
          ctx = canvas.getContext("2d");

          // Paint it black.
          ctx.fillStyle = "black";
          ctx.rect(0, 0, 300, 300);
          ctx.fill();

          // Paint the starfield.
          stars();

          // Draw space ship.
          makeShip();
        }
      }

      // Paint a random starfield.


      function stars() {

        // Draw 50 stars.
        for (i = 0; i <= 50; i++) {
          // Get random positions for stars.
          var x = Math.floor(Math.random() * 299)
          var y = Math.floor(Math.random() * 299)

          // Make the stars white
          ctx.fillStyle = "white";

          // Give the ship some room.
          if (x < 30 || y < 30) ctx.fillStyle = "black";

// Draw an individual star.
          ctx.beginPath();
          ctx.arc(x, y, 3, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
        }
      }

      function makeShip() {

        // Draw saucer bottom.
        ctx.beginPath();
        ctx.moveTo(28.4, 16.9);
        ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
        ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
        ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
        ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
        ctx.closePath();
        ctx.fillStyle = "rgb(222, 103, 0)";
        ctx.fill();

        // Draw saucer top.
        ctx.beginPath();
        ctx.moveTo(22.3, 12.0);
        ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
        ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
        ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
        ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
        ctx.closePath();
        ctx.fillStyle = "rgb(51, 190, 0)";
        ctx.fill();
      }
    </script>
  </head>
  
  <body onload="canvasSpaceGame()">
    <h1>
      Canvas Space Game
    </h1>
    <canvas id="myCanvas" width="300" height="300">
    </canvas>
  </body>

</html>

Canvas 代码示例讨论

  本节说明本代码示例的设计和结构。 它为您讲解代码的不同部分,以及整合它们的方式。 Canvas 示例使用标准 HTML5 标头 ,以便浏览器可以将它作为 HTML5 规格的一部分加以区别。

  代码分成两个主要部分:

  1.主体代码

  2.脚本代码

  主体代码

  在页面加载时,主体标记使用 onload 函数调用 canvasSpaceGame 函数。 Canvas 标记是主体的一部分。 指定了 Canvas 初始宽度和高度,还指定了 ID 属性。 必须使用 ID,才能将 canvas 元素添加到页面的对象模型中。

  脚本代码

  脚本代码包括三个函数: canvasSpaceGame、stars 和 makeShip。 加载页面时将调用 canvasSpaceGame 函数。 stars 和 makeShip 都是从 canvasSpaceGame 调用的。

  canvasSpaceGame 函数

  加载页面时将调用此函数。 它通过在主体代码中使用 Canvas 元素 ID 来获取画布, 然后获取画布的上下文,并准备好接受绘图。 将上下文初始化为 2D 画布后,使用 fillStyle、rect 和 fill 方法将画布绘制为黑色。

  stars 函数

  此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50 个潜在的星星位置,然后使用 fillStyle 创建白色。 随后,会进行一项检查,确认 x,y 坐标是否与左上角过于靠近。 如果星星绘制得与左上角过于靠近,则会将 fillStyle 更改为黑色,使其不会妨碍宇宙飞船。 随后,使用 arc 方法绘制每个星星并使用相应的填充颜色。

  makeShip

  此函数是从 canvasSpaceGame 调用的。 使用一系列的 beginPath、moveTo、bezierCurveTo、closePath、fillStyle 和 fill 方法,绘制一个简单的宇宙飞船。

  飞船是通过绘制两个椭圆来创建的,一个椭圆在另一个的上面。 它首先在 Adobe Illustrator CS5 中绘制,然后使用 的 Ai2Canvas 插件将图像导出到 Canvas。 生成的 Canvas 代码已复制并粘贴到此示例的代码中。

本文网址:https://www.dedexuexi.com/wysj/html5/3066.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
HTML5是如何成为网页设计的未来的
« 上一篇2017年04月24日
HTML5实现锚点时请使用id取代name
2017年04月24日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录