17 KiB

Raw Blame History Unescape Escape

Bina Permainan Angkasa Bahagian 2: Lukis Hero dan Raksasa pada Kanvas

API Kanvas adalah salah satu ciri paling berkuasa dalam pembangunan web untuk mencipta grafik dinamik dan interaktif terus dalam pelayar anda. Dalam pelajaran ini, kita akan mengubah elemen HTML <canvas> kosong itu menjadi dunia permainan yang dipenuhi dengan hero dan raksasa. Anggaplah kanvas sebagai papan seni digital anda di mana kod menjadi visual.

Kita akan membina berdasarkan apa yang anda pelajari dalam pelajaran sebelumnya, dan kini kita akan mendalami aspek visual. Anda akan belajar cara memuat dan memaparkan sprite permainan, meletakkan elemen dengan tepat, dan mencipta asas visual untuk permainan angkasa anda. Ini menjembatani jurang antara halaman web statik dan pengalaman interaktif yang dinamik.

Menjelang akhir pelajaran ini, anda akan mempunyai adegan permainan lengkap dengan kapal hero anda yang diletakkan dengan betul dan formasi musuh yang bersedia untuk bertempur. Anda akan memahami bagaimana permainan moden memaparkan grafik dalam pelayar dan memperoleh kemahiran untuk mencipta pengalaman visual interaktif anda sendiri. Mari kita terokai grafik kanvas dan hidupkan permainan angkasa anda!

Kuiz Pra-Pelajaran

Kuiz pra-pelajaran

Kanvas

Jadi, apakah sebenarnya elemen <canvas> ini? Ia adalah penyelesaian HTML5 untuk mencipta grafik dan animasi dinamik dalam pelayar web. Tidak seperti imej atau video biasa yang statik, kanvas memberi anda kawalan pada tahap piksel terhadap segala yang muncul di skrin. Ini menjadikannya sempurna untuk permainan, visualisasi data, dan seni interaktif. Anggaplah ia sebagai permukaan lukisan yang boleh diprogramkan di mana JavaScript menjadi berus lukisan anda.

Secara lalai, elemen kanvas kelihatan seperti segi empat kosong dan telus pada halaman anda. Tetapi di situlah potensi terletak! Kuasa sebenar muncul apabila anda menggunakan JavaScript untuk melukis bentuk, memuat imej, mencipta animasi, dan membuat sesuatu bertindak balas terhadap interaksi pengguna. Ia serupa dengan bagaimana perintis grafik komputer awal di Bell Labs pada tahun 1960-an perlu memprogram setiap piksel untuk mencipta animasi digital pertama.

✅ Baca lebih lanjut tentang API Kanvas di MDN.

Berikut adalah cara ia biasanya diisytiharkan, sebagai sebahagian daripada badan halaman:

<canvas id="myCanvas" width="200" height="100"></canvas>

Apa yang dilakukan oleh kod ini:

Menetapkan atribut id supaya anda boleh merujuk elemen kanvas tertentu ini dalam JavaScript
Menentukan width dalam piksel untuk mengawal saiz mendatar kanvas
Menetapkan height dalam piksel untuk menentukan dimensi menegak kanvas

Melukis Geometri Mudah

Sekarang anda tahu apa itu elemen kanvas, mari kita terokai cara sebenarnya melukis di atasnya! Kanvas menggunakan sistem koordinat yang mungkin terasa biasa dari kelas matematik, tetapi ada satu kelainan penting yang khusus untuk grafik komputer.

Kanvas menggunakan koordinat Cartesian dengan paksi x (mendatar) dan paksi y (menegak) untuk meletakkan segala yang anda lukis. Tetapi inilah perbezaan utama: tidak seperti sistem koordinat dari kelas matematik, titik asal (0,0) bermula di sudut kiri atas, dengan nilai x meningkat apabila anda bergerak ke kanan dan nilai y meningkat apabila anda bergerak ke bawah. Pendekatan ini berasal dari paparan komputer awal di mana pancaran elektron mengimbas dari atas ke bawah, menjadikan kiri atas sebagai titik permulaan semula jadi.

Imej dari MDN

Untuk melukis pada elemen kanvas, anda akan mengikuti proses tiga langkah yang sama yang membentuk asas semua grafik kanvas. Setelah anda melakukannya beberapa kali, ia menjadi kebiasaan:

Dapatkan rujukan kepada elemen Kanvas anda dari DOM (sama seperti elemen HTML lain)
Dapatkan konteks rendering 2D – ini menyediakan semua kaedah lukisan
Mulakan melukis! Gunakan kaedah terbina dalam konteks untuk mencipta grafik anda

Berikut adalah cara ia kelihatan dalam kod:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Mari kita pecahkan langkah demi langkah:

Kita ambil elemen kanvas kita menggunakan IDnya dan simpan dalam pemboleh ubah
Kita dapatkan konteks rendering 2D – ini adalah alat kita yang penuh dengan kaedah lukisan
Kita beritahu kanvas bahawa kita mahu mengisi sesuatu dengan warna merah menggunakan sifat fillStyle
Kita lukis segi empat bermula dari sudut kiri atas (0,0) yang lebar dan tinggi 200 piksel

✅ API Kanvas kebanyakannya memberi tumpuan kepada bentuk 2D, tetapi anda juga boleh melukis elemen 3D ke laman web; untuk ini, anda mungkin menggunakan API WebGL.

Anda boleh melukis pelbagai perkara dengan API Kanvas seperti:

Bentuk geometrik, kami telah menunjukkan cara melukis segi empat, tetapi ada banyak lagi yang boleh anda lukis.
Teks, anda boleh melukis teks dengan mana-mana fon dan warna yang anda inginkan.
Imej, anda boleh melukis imej berdasarkan aset imej seperti .jpg atau .png sebagai contoh.

✅ Cuba! Anda tahu cara melukis segi empat, bolehkah anda melukis bulatan pada halaman? Lihat beberapa lukisan Kanvas yang menarik di CodePen. Berikut adalah contoh yang sangat mengagumkan.

Muat dan Lukis Aset Imej

Melukis bentuk asas berguna untuk permulaan, tetapi kebanyakan permainan memerlukan imej sebenar! Sprite, latar belakang, dan tekstur adalah apa yang memberikan daya tarikan visual kepada permainan. Memuat dan memaparkan imej pada kanvas berfungsi secara berbeza daripada melukis bentuk geometrik, tetapi ia mudah difahami setelah anda memahami prosesnya.

Kita perlu mencipta objek Image, memuat fail imej kita (ini berlaku secara asinkron, bermaksud "di latar belakang"), dan kemudian melukisnya ke kanvas setelah ia sedia. Pendekatan ini memastikan imej anda dipaparkan dengan betul tanpa menghalang aplikasi anda semasa ia dimuat.

Pemuatan Imej Asas

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

Apa yang berlaku dalam kod ini:

Kita cipta objek Imej baru untuk memegang sprite atau tekstur kita
Kita beritahu ia fail imej mana yang perlu dimuat dengan menetapkan laluan sumber
Kita dengar acara muat supaya kita tahu dengan tepat bila imej sedia untuk digunakan

Cara Lebih Baik untuk Memuat Imej

Berikut adalah cara yang lebih mantap untuk mengendalikan pemuatan imej yang biasa digunakan oleh pembangun profesional. Kita akan membungkus pemuatan imej dalam fungsi berasaskan Janji – pendekatan ini, yang dipopularkan apabila Janji JavaScript menjadi standard dalam ES6, menjadikan kod anda lebih teratur dan mengendalikan ralat dengan baik:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Apa yang telah kita lakukan di sini:

Membungkus semua logik pemuatan imej itu dalam Janji supaya kita boleh mengendalikannya dengan lebih baik
Menambah pengendalian ralat yang sebenarnya memberitahu kita apabila sesuatu tidak kena
Menggunakan sintaks async/await moden kerana ia lebih mudah dibaca
Termasuk blok try/catch untuk mengendalikan sebarang masalah pemuatan dengan baik

Setelah imej anda dimuat, melukisnya ke kanvas sebenarnya agak mudah:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Mari kita lalui langkah demi langkah:

Kita muat kedua-dua imej hero dan raksasa kita di latar belakang menggunakan await
Kita ambil elemen kanvas kita dan dapatkan konteks rendering 2D yang kita perlukan
Kita letakkan imej hero tepat di tengah menggunakan beberapa matematik koordinat cepat
Kita letakkan imej raksasa di sudut kiri atas untuk memulakan formasi musuh kita
Kita tangkap sebarang ralat yang mungkin berlaku semasa pemuatan atau rendering

Kini Masa untuk Mula Membina Permainan Anda

Sekarang kita akan menggabungkan semuanya untuk mencipta asas visual permainan angkasa anda. Anda mempunyai pemahaman yang kukuh tentang asas kanvas dan teknik pemuatan imej, jadi bahagian praktikal ini akan membimbing anda melalui pembinaan skrin permainan lengkap dengan sprite yang diletakkan dengan betul.

Apa yang Perlu Dibina

Anda akan membina halaman web dengan elemen Kanvas. Ia harus memaparkan skrin hitam 1024*768. Kami telah menyediakan dua imej untuk anda:

Kapal hero
5*5 raksasa

Langkah yang Disyorkan untuk Memulakan Pembangunan

Cari fail permulaan yang telah dibuat untuk anda dalam sub folder your-work. Struktur projek anda harus mengandungi:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

Apa yang anda ada:

Sprite permainan berada dalam folder assets/ supaya semuanya kekal teratur
Fail HTML utama anda menyediakan elemen kanvas dan mempersiapkan segalanya
Fail JavaScript di mana anda akan menulis semua magik rendering permainan anda
Fail package.json yang menyediakan pelayan pembangunan supaya anda boleh menguji secara tempatan

Buka folder ini dalam Visual Studio Code untuk memulakan pembangunan. Anda memerlukan persekitaran pembangunan tempatan dengan Visual Studio Code, NPM, dan Node.js dipasang. Jika anda belum memasang npm pada komputer anda, berikut adalah cara untuk memasangnya.

Mulakan pelayan pembangunan anda dengan menavigasi ke folder your-work:

cd your-work
npm start

Perintah ini melakukan beberapa perkara yang cukup hebat:

Memulakan pelayan tempatan di http://localhost:5000 supaya anda boleh menguji permainan anda
Menyajikan semua fail anda dengan betul supaya pelayar anda boleh memuatnya dengan betul
Memantau fail anda untuk perubahan supaya anda boleh membangun dengan lancar
Memberikan anda persekitaran pembangunan profesional untuk menguji segalanya

💡 Nota: Pelayar anda akan menunjukkan halaman kosong pada mulanya – itu dijangka! Apabila anda menambah kod, segarkan pelayar anda untuk melihat perubahan anda. Pendekatan pembangunan iteratif ini serupa dengan bagaimana NASA membina komputer panduan Apollo – menguji setiap komponen sebelum mengintegrasikannya ke dalam sistem yang lebih besar.

Tambah kod

Tambah kod yang diperlukan ke your-work/app.js untuk melengkapkan tugas berikut:

Lukis kanvas dengan latar belakang hitam

💡 Cara melakukannya: Cari TODO dalam /app.js dan tambahkan hanya dua baris. Tetapkan ctx.fillStyle kepada hitam, kemudian gunakan ctx.fillRect() bermula dari (0,0) dengan dimensi kanvas anda. Mudah!
Muat tekstur permainan

💡 Cara melakukannya: Gunakan await loadAsset() untuk memuat imej pemain dan musuh anda. Simpan dalam pemboleh ubah supaya anda boleh menggunakannya kemudian. Ingat – ia tidak akan muncul sehingga anda benar-benar melukisnya!
Lukis kapal hero di posisi tengah-bawah

💡 Cara melakukannya: Gunakan ctx.drawImage() untuk meletakkan hero anda. Untuk koordinat x, cuba canvas.width / 2 - 45 untuk meletakkannya di tengah, dan untuk koordinat y gunakan canvas.height - canvas.height / 4 untuk meletakkannya di kawasan bawah.
Lukis formasi 5×5 kapal musuh

💡 Cara melakukannya: Cari fungsi createEnemies dan sediakan gelung bersarang. Anda perlu melakukan beberapa matematik untuk jarak dan posisi, tetapi jangan risau – saya akan tunjukkan caranya!

Pertama, tetapkan pemalar untuk susun atur formasi musuh yang betul:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Mari kita pecahkan apa yang dilakukan oleh pemalar ini:

Kita tetapkan 5 musuh setiap baris dan lajur (grid 5×5 yang bagus)
Kita tentukan berapa banyak ruang untuk diletakkan antara musuh supaya mereka tidak kelihatan sempit
Kita kira betapa luasnya keseluruhan formasi kita
Kita tentukan di mana untuk bermula dan berhenti supaya formasi kelihatan berpusat

Kemudian, cipta gelung bersarang untuk melukis formasi musuh:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

Apa yang dilakukan oleh gelung bersarang ini:

Gelung luar bergerak dari kiri ke kanan merentasi formasi kita
Gelung dalam bergerak dari atas ke bawah untuk mencipta barisan yang kemas
Kita lukis setiap sprite musuh pada koordinat x,y yang kita kira
Segalanya kekal berjarak sama rata supaya kelihatan profesional dan teratur

Hasil

Hasil akhir sepatutnya kelihatan seperti ini:

Penyelesaian

Sila cuba menyelesaikannya sendiri terlebih dahulu tetapi jika anda tersangkut, lihat penyelesaian

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk melengkapkan cabaran berikut:

Penerangan: Tingkatkan kanvas permainan angkasa anda dengan menambah kesan visual dan elemen interaktif menggunakan teknik API Kanvas yang telah anda pelajari.

Arahan: Cipta fail baru bernama enhanced-canvas.html dengan kanvas yang memaparkan bintang animasi di latar belakang, bar kesihatan berdenyut untuk kapal hero, dan kapal musuh yang perlahan-lahan bergerak ke bawah. Sertakan kod JavaScript yang melukis bintang berkelip menggunakan posisi dan opasiti rawak, melaksanakan bar kesihatan yang berubah warna berdasarkan tahap kesihatan (hijau > kuning > merah), dan menganimasikan kapal musuh untuk bergerak ke bawah skrin pada kelajuan yang berbeza.

Ketahui lebih lanjut tentang mod ejen di sini.

🚀 Cabaran

Anda telah belajar tentang melukis dengan API Kanvas yang berfokuskan 2D; lihat API WebGL, dan cuba lukis objek 3D.

Kuiz Pasca-Pelajaran

Kuiz pasca-pelajaran

Kajian & Pembelajaran Sendiri

Ketahui lebih lanjut tentang API Kanvas dengan membacanya.

Tugasan

Bermain dengan API Kanvas

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

17 KiB Raw Blame History Unescape Escape