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

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

网页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 onl oad="canvasSpaceGame()">
<h1>
Canvas Space Game
</h1>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>

Canvas 具体代码示例讨论

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

具体代码分成两个主要部分：
1.主体具体代码
2.脚本具体代码

主体具体代码
在页面加载时，主体标记使用 onl oad 数据库函数相关调用 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 具体代码已复制并粘贴到此示例的具体代码中。