Example of creating a space game using html5 canvas_html5 tutorial tips

HTML5 Canvas can quickly create lightweight images that aid game development. This section explains how to use Canvas to create a retro-style outer space flight game that will run in a web page. This game is designed primarily to demonstrate the basic principles of developing web games using the Canvas feature. The goal of this space game is to get your spaceship back to base safely through a star field littered with exploding asteroids.
This tutorial contains the complete code to run the game. The code is written using HTML5 Canvas and JavaScript and contains four separate annotated code examples. Each example involves a key programming task that is necessary to develop a different aspect of the game. The fourth code example combines all the tasks together to create a fully functioning game in which you use the arrow keys to move your ship through a maze of starfields dotted with exploding red asteroids. If your ship hits a planet, it will be destroyed. To get back to base safely, you must avoid asteroids or blow them up before you hit them. Points are awarded based on how many times you move your ship and how many bombs you launch.
This topic includes a stand-alone annotated code example that shows you how to use HTML5 Canvas and JavaScript to create a random area of ​​white stars and draw an orange-and-green spaceship shaped like a Frisbee. This game image was created using pixels. Using immediate mode, Canvas has the ability to place pixels directly on the screen. This feature allows you to easily draw points, lines, and shapes in the desired location and in the color of your choice. This code example shows you how to create a spaceship by combining mathematical Bezier curves and colors in shapes. It will then explain how to draw stars using small circles made of arcs.
This code sample contains the following tasks to demonstrate the basic principles of using Canvas to draw these game elements:
1. Add a Canvas element to the web page
2. Create a black background
3. Draw random stars on the background
4. Add a spaceship to the background
At the end of the code example is discussion material explaining details about the design and structure of these missions and how they work.
Canvas code example:

Copy code

The code is as follows:

Canvas Space Game

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 代码已复制并粘贴到此示例的代码中。