Contoh mencipta permainan angkasa menggunakan petua tutorial html5 canvas_html5

Kanvas HTML5 boleh mencipta imej ringan dengan cepat yang membantu pembangunan permainan. Bahagian ini menerangkan cara menggunakan Kanvas untuk mencipta permainan penerbangan angkasa lepas gaya retro yang akan dijalankan dalam halaman web. Permainan ini direka bentuk terutamanya untuk menunjukkan prinsip asas membangunkan permainan web menggunakan ciri Kanvas. Matlamat permainan angkasa lepas ini adalah untuk mengembalikan kapal angkasa anda ke pangkalan dengan selamat melalui medan bintang yang dipenuhi dengan asteroid yang meletup.
Tutorial ini mengandungi kod lengkap untuk menjalankan permainan. Kod ini ditulis menggunakan HTML5 Canvas dan JavaScript dan mengandungi empat contoh kod beranotasi berasingan. Setiap contoh melibatkan tugas pengaturcaraan utama yang diperlukan untuk membangunkan aspek permainan yang berbeza. Contoh kod keempat menggabungkan semua tugas bersama-sama untuk mencipta permainan yang berfungsi sepenuhnya di mana anda menggunakan kekunci anak panah untuk menggerakkan kapal anda melalui labirin medan bintang yang dihiasi dengan asteroid merah yang meletup. Jika kapal anda melanggar planet, ia akan musnah. Untuk kembali ke pangkalan dengan selamat, anda mesti mengelakkan asteroid atau meletupkannya sebelum anda memukulnya. Mata diberikan berdasarkan berapa kali anda mengalihkan kapal anda dan berapa banyak bom yang anda lancarkan.
Topik ini termasuk contoh kod beranotasi yang berdiri sendiri yang menunjukkan kepada anda cara menggunakan Kanvas HTML5 dan JavaScript untuk mencipta kawasan rawak bintang putih dan melukis kapal angkasa berwarna jingga dan hijau berbentuk seperti Frisbee. Imej permainan ini dicipta menggunakan piksel. Menggunakan mod segera, Canvas mempunyai keupayaan untuk meletakkan piksel terus pada skrin. Ciri ini membolehkan anda melukis titik, garisan dan bentuk dengan mudah di lokasi yang dikehendaki dan dalam warna pilihan anda. Contoh kod ini menunjukkan kepada anda cara membuat kapal angkasa dengan menggabungkan lengkung Bezier matematik dan warna dalam bentuk. Ia kemudiannya akan menerangkan cara melukis bintang menggunakan bulatan kecil yang diperbuat daripada lengkok.
Sampel kod ini mengandungi tugasan berikut untuk menunjukkan prinsip asas penggunaan Kanvas untuk melukis elemen permainan ini:
1. Tambahkan elemen Kanvas pada halaman web
2. Cipta latar belakang hitam
3 . Lukiskan bintang rawak pada latar belakang
4. Tambahkan kapal angkasa ke latar belakang
Pada penghujung contoh kod ialah bahan perbincangan yang menerangkan butiran tentang reka bentuk dan struktur misi ini dan cara ia berfungsi.
Contoh kod kanvas:

Salin kod

Kod tersebut adalah seperti berikut:

Canvas Space Game
< /h1>

Leinwand 代码示例讨论

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

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

主体代码
在页面加载时, 主体标记使用 onload 函数调用 canvasSpaceGame 函数。 Canvas 标记是主体的一部分。 指定了 Canvas 初始宽度和高度,还指定了 ID 属性. 必须使用 ID,才能将 Canvas元素添加到页面的对象模型中.

脚本代码
脚本代码包括代码包括三个函数: canvasSpaceGame、stars 和 makeShip。 加载页面时将调用 canvasSpaceGame 函数。 stars 和 makeShip 都是从 CanvasSpaceGame ist eine Datei.

canvasSpaceGame 函数
加载页面时将调用此函数。 它通过在主体代码中使用 Canvas 元素 ID 来获取画布， 然后获取画布的上下文, 并准备好接受绘图. 将上下文初始化为 2D 画布后, Verwenden Sie „fillStyle、rect“ und „fill“.

stars 函数
此函数是从 canvasSpaceGame 调用的。 它使用 for loop 在二维平面上生成 50. 个潜在的星星位置，然后Die Funktion „fillStyle“ wird verwendet. y不会妨碍宇宙飞船
makeShip
Die Funktion „canvasSpaceGame“ ist die Funktion „beginPath“, „moveTo“, „bezierCurveTo“, „closePath“, „fillStyle“ und „fill“.宙飞船.
飞船是通过绘制两个椭圆来创建的, 一个椭圆在另一个的上面. 它首先在 Adobe Illustrator CS5 中制, 然后使用 的 Ai2Canvas 插件将图像导出到 Canvas. 生成的 Canvas 代码已复制并粘贴到此示例的代码中.