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");</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()">
<h1>
Canvas Space Game
</h1>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>
本節說明本代碼示例的設計和結構。 它為您講解代碼的不同部分，以及整合它們的方式。 Canvas 示例使用標準 HTML5 標頭 ，以便瀏覽器可以將它作為 HTML5 規格的一部分加以區別。
