微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

使用html5 canvas创建太空游戏的示例

发布时间:2017-05-13 来源:未知 点击:
点评:这篇文章主要介绍了使用html5 canvas创建太空游戏的示例,需要的朋友可以参考下

HTML5 Canvas 可以快速创建出有助于游戏开发的轻型图片。 本部分说明如何使用 Canvas 创建将在网页中运行的怀旧风格外太空飞行游戏。 此游戏的设计主要是为了展示使用 Canvas 功能开发 Web 游戏的基本原则。 此太空游戏的目标是,使您的宇宙飞船穿过分布着爆炸小行星的星域,安全返回基地。nykHTML5中文学习网 - HTML5先行者学习网
本教程包含运行游戏的完整代码。代码是使用 HTML5 Canvas 和 JavaScript 编写的,包含四个独立的有注释代码示例。 每个示例都涉及一项关键的编程任务,这些任务是开发游戏的不同方面所必需的。 第四个代码示例将所有任务组合在一起,创建了一个完整有效的游戏,您可以使用箭头键移动飞船,穿越分布着爆炸红色小行星的星域迷宫。 如果您的飞船撞到行星,则将被毁坏。 为了安全返回基地,您必须避开小行星,或在您撞上小行星之前将其炸毁。 将根据您移动飞船的次数和您发射的炸弹数来进行计分。nykHTML5中文学习网 - HTML5先行者学习网
本主题包括一个独立的有注释代码示例,为您演示如何使用 HTML5 Canvas 和 JavaScript 创建包含白色星星的随机区域,以及绘制外形像飞盘一样的橙绿相间的宇宙飞船。 此游戏图像是使用像素创建的。 通过使用即时模式,Canvas 具有将像素直接放在屏幕上的能力。 此功能您能够轻松地在需要的位置,以选择的颜色绘制点、线和形状。 此代码示例将为您演示如何通过在形状中组合数学贝塞尔曲线和颜色来创建宇宙飞船。 然后,它将说明如何使用由弧形组成的小圆圈来绘制星星。nykHTML5中文学习网 - HTML5先行者学习网
此代码示例包含以下任务来演示使用Canvas 绘制这些游戏元素的基本原则:nykHTML5中文学习网 - HTML5先行者学习网
1.向网页添加 Canvas 元素nykHTML5中文学习网 - HTML5先行者学习网
2.创建黑色背景nykHTML5中文学习网 - HTML5先行者学习网
3.在背景上绘制随机星星nykHTML5中文学习网 - HTML5先行者学习网
4.向背景添加宇宙飞船nykHTML5中文学习网 - HTML5先行者学习网
代码示例的末尾是讨论材料,说明有关这些任务的设计和结构以及工作方式的详细信息。nykHTML5中文学习网 - HTML5先行者学习网
Canvas 代码示例:nykHTML5中文学习网 - HTML5先行者学习网

代码如下:nykHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>nykHTML5中文学习网 - HTML5先行者学习网
<html>nykHTML5中文学习网 - HTML5先行者学习网
<head>nykHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript">nykHTML5中文学习网 - HTML5先行者学习网
// This function is called on page load.nykHTML5中文学习网 - HTML5先行者学习网
function canvasSpaceGame() {nykHTML5中文学习网 - HTML5先行者学习网
// Get the canvas element.nykHTML5中文学习网 - HTML5先行者学习网
canvas = document.getElementById("myCanvas");nykHTML5中文学习网 - HTML5先行者学习网
// Make sure you got it.nykHTML5中文学习网 - HTML5先行者学习网
if (canvas.getContext)nykHTML5中文学习网 - HTML5先行者学习网
// If you have it, create a canvas user inteface element.nykHTML5中文学习网 - HTML5先行者学习网
{nykHTML5中文学习网 - HTML5先行者学习网
// Specify 2d canvas type.nykHTML5中文学习网 - HTML5先行者学习网
ctx = canvas.getContext("2d");</p><p>// Paint it black.nykHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle = "black";nykHTML5中文学习网 - HTML5先行者学习网
ctx.rect(0, 0, 300, 300);nykHTML5中文学习网 - HTML5先行者学习网
ctx.fill();</p><p>// Paint the starfield.nykHTML5中文学习网 - HTML5先行者学习网
stars();</p><p>// Draw space ship.nykHTML5中文学习网 - HTML5先行者学习网
makeShip();nykHTML5中文学习网 - HTML5先行者学习网
}nykHTML5中文学习网 - HTML5先行者学习网
}</p><p>// Paint a random starfield.</p><p>nykHTML5中文学习网 - HTML5先行者学习网
function stars() {</p><p>// Draw 50 stars.nykHTML5中文学习网 - HTML5先行者学习网
for (i = 0; i <= 50; i++) {nykHTML5中文学习网 - HTML5先行者学习网
// Get random positions for stars.nykHTML5中文学习网 - HTML5先行者学习网
var x = Math.floor(Math.random() * 299)nykHTML5中文学习网 - HTML5先行者学习网
var y = Math.floor(Math.random() * 299)</p><p>// Make the stars whitenykHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle = "white";</p><p>// Give the ship some room.nykHTML5中文学习网 - HTML5先行者学习网
if (x < 30 || y < 30) ctx.fillStyle = "black";</p><p>// Draw an individual star.nykHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.arc(x, y, 3, 0, Math.PI * 2, true);nykHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.fill();nykHTML5中文学习网 - HTML5先行者学习网
}nykHTML5中文学习网 - HTML5先行者学习网
}</p><p>function makeShip() {</p><p>// Draw saucer bottom.nykHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.moveTo(28.4, 16.9);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);nykHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle = "rgb(222, 103, 0)";nykHTML5中文学习网 - HTML5先行者学习网
ctx.fill();</p><p>// Draw saucer top.nykHTML5中文学习网 - HTML5先行者学习网
ctx.beginPath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.moveTo(22.3, 12.0);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);nykHTML5中文学习网 - HTML5先行者学习网
ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);nykHTML5中文学习网 - HTML5先行者学习网
ctx.closePath();nykHTML5中文学习网 - HTML5先行者学习网
ctx.fillStyle = "rgb(51, 190, 0)";nykHTML5中文学习网 - HTML5先行者学习网
ctx.fill();nykHTML5中文学习网 - HTML5先行者学习网
}nykHTML5中文学习网 - HTML5先行者学习网
</script>nykHTML5中文学习网 - HTML5先行者学习网
</head>nykHTML5中文学习网 - HTML5先行者学习网
<body onload="canvasSpaceGame()">nykHTML5中文学习网 - HTML5先行者学习网
<h1>nykHTML5中文学习网 - HTML5先行者学习网
Canvas Space GamenykHTML5中文学习网 - HTML5先行者学习网
</h1>nykHTML5中文学习网 - HTML5先行者学习网
<canvas id="myCanvas" width="300" height="300">nykHTML5中文学习网 - HTML5先行者学习网
</canvas>nykHTML5中文学习网 - HTML5先行者学习网
</body>nykHTML5中文学习网 - HTML5先行者学习网
</html>nykHTML5中文学习网 - HTML5先行者学习网
nykHTML5中文学习网 - HTML5先行者学习网

Canvas 代码示例讨论nykHTML5中文学习网 - HTML5先行者学习网

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

代码分成两个主要部分:nykHTML5中文学习网 - HTML5先行者学习网
1.主体代码nykHTML5中文学习网 - HTML5先行者学习网
2.脚本代码nykHTML5中文学习网 - HTML5先行者学习网

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

脚本代码nykHTML5中文学习网 - HTML5先行者学习网
脚本代码包括三个函数: canvasSpaceGame、stars 和 makeShip。 加载页面时将调用 canvasSpaceGame 函数。 stars 和 makeShip 都是从 canvasSpaceGame 调用的。nykHTML5中文学习网 - HTML5先行者学习网

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

stars 函数nykHTML5中文学习网 - HTML5先行者学习网
此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50 个潜在的星星位置,然后使用 fillStyle 创建白色。 随后,会进行一项检查,确认 x,y 坐标是否与左上角过于靠近。 如果星星绘制得与左上角过于靠近,则会将 fillStyle 更改为黑色,使其不会妨碍宇宙飞船。 随后,使用 arc 方法绘制每个星星并使用相应的填充颜色。nykHTML5中文学习网 - HTML5先行者学习网
makeShipnykHTML5中文学习网 - HTML5先行者学习网
此函数是从 canvasSpaceGame 调用的。 使用一系列的 beginPath、moveTo、bezierCurveTo、closePath、fillStyle 和 fill 方法,绘制一个简单的宇宙飞船。nykHTML5中文学习网 - HTML5先行者学习网
飞船是通过绘制两个椭圆来创建的,一个椭圆在另一个的上面。 它首先在 Adobe Illustrator CS5 中绘制,然后使用 的 Ai2Canvas 插件将图像导出到 Canvas。 生成的 Canvas 代码已复制并粘贴到此示例的代码中。nykHTML5中文学习网 - HTML5先行者学习网

nykHTML5中文学习网 - HTML5先行者学习网

这就是微学网-程序员之家为你提供的"使用html5 canvas创建太空游戏的示例"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/6772.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧