这篇文章将为大家详细讲解有关怎么在html5中使用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");</p>
<p>// Paint it black.
ctx.fillStyle = "black";
ctx.rect(0, 0, 300, 300);
ctx.fill();</p>
<p>// Paint the starfield.
stars();</p>
<p>// Draw space ship.
makeShip();
}
}</p>
<p>// Paint a random starfield.</p>
<p>
function stars() {</p>
<p>// 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)</p>
<p>// Make the stars white
ctx.fillStyle = "white";</p>
<p>// Give the ship some room.
if (x < 30 || y < 30) ctx.fillStyle = "black";</p>
<p>// Draw an individual star.
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}</p>
<p>function makeShip() {</p>
<p>// 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();</p>
<p>// 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()">
<h2>
Canvas Space Game
</h2>
<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。
关于怎么在html5中使用canvas创建一个太空游戏就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
