HTML5 Canvas 可以快速創(chuàng)建出有助于游戲開發(fā)的輕型圖片。 本部分說明如何使用 Canvas 創(chuàng)建將在網(wǎng)頁(yè)中運(yùn)行的懷舊風(fēng)格外太空飛行游戲。 此游戲的設(shè)計(jì)主要是為了展示使用 Canvas 功能開發(fā) Web 游戲的基本原則。 此太空游戲的目標(biāo)是，使您的宇宙飛船穿過分布著爆炸小行星的星域，安全返回基地。
本教程包含運(yùn)行游戲的完整代碼。代碼是使用 HTML5 Canvas 和 JavaScript 編寫的，包含四個(gè)獨(dú)立的有注釋代碼示例。 每個(gè)示例都涉及一項(xiàng)關(guān)鍵的編程任務(wù)，這些任務(wù)是開發(fā)游戲的不同方面所必需的。 第四個(gè)代碼示例將所有任務(wù)組合在一起，創(chuàng)建了一個(gè)完整有效的游戲，您可以使用箭頭鍵移動(dòng)飛船，穿越分布著爆炸紅色小行星的星域迷宮。 如果您的飛船撞到行星，則將被毀壞。 為了安全返回基地，您必須避開小行星，或在您撞上小行星之前將其炸毀。 將根據(jù)您移動(dòng)飛船的次數(shù)和您發(fā)射的炸彈數(shù)來進(jìn)行計(jì)分。
本主題包括一個(gè)獨(dú)立的有注釋代碼示例，為您演示如何使用 HTML5 Canvas 和 JavaScript 創(chuàng)建包含白色星星的隨機(jī)區(qū)域，以及繪制外形像飛盤一樣的橙綠相間的宇宙飛船。 此游戲圖像是使用像素創(chuàng)建的。 通過使用即時(shí)模式，Canvas 具有將像素直接放在屏幕上的能力。 此功能您能夠輕松地在需要的位置，以選擇的顏色繪制點(diǎn)、線和形狀。 此代碼示例將為您演示如何通過在形狀中組合數(shù)學(xué)貝塞爾曲線和顏色來創(chuàng)建宇宙飛船。 然后，它將說明如何使用由弧形組成的小圓圈來繪制星星。
此代碼示例包含以下任務(wù)來演示使用Canvas 繪制這些游戲元素的基本原則：
1.向網(wǎng)頁(yè)添加 Canvas 元素
2.創(chuàng)建黑色背景
3.在背景上繪制隨機(jī)星星
4.向背景添加宇宙飛船
代碼示例的末尾是討論材料，說明有關(guān)這些任務(wù)的設(shè)計(jì)和結(jié)構(gòu)以及工作方式的詳細(xì)信息。
Canvas 代碼示例:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//Thisfunctioniscalledonpage load.
functioncanvasSpaceGame() {
//Getthe canvas element.
canvas=document.getElementById("myCanvas");
//Make sure you got it.
if(canvas.getContext)
//Ifyou have it, create a canvas user inteface element.
{
//Specify 2d canvas type.
ctx=canvas.getContext("2d");
//Paint it black.
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
新聞熱點(diǎn)
疑難解答
圖片精選
