溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么在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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
