Bagaimana Cara Untuk Membuat Sebuah Permainan Kanvas Sederhana HTML5

Bagaimana Cara Untuk Membuat Sebuah Permainan Kanvas Sederhana HTML5

Sejak meluncurkan permainan Onslaught! Arena, aku telah menerima banyak permintaan untuk membuat tutorial yang sangat dasar tentang bagaimana cara untuk membuat permainan sederhana di kanvas. Setelah merenungkan untuk beberapa waktu cara untuk pendekatan terbaik subjek kompleks ini, Saya memutuskan hanya untuk mengumpulkan permainan yang sangat sederhana saya bisa membayangkan dan berjalan melalui itu praktis baris demi baris.  Jadi ini dia! Mari kita melompat segera dengan berjalan melalui game.js. Anda juga dapat bermain game di sini.

1.                  Membuat kanvas

               // Membuat canvas

               var canvas = document.createElement("canvas");

               var ctx = canvas.getContext("2d");

               canvas.width = 512;

   canvas.height = 480;

   document.body.appendChild(canvas);

Hal pertama yang perlu kita lakukan adalah membuat elemen kanvas. Saya melakukan ini dalam JavaScript, bukan HTML untuk menunjukkan betapa mudah membuatnya. Setelah kita memiliki elemen kita mendapatkan referensi ke konteksnya, mengatur dimensi dan menambahkan ke bagian dokumen.

2.                         Menyertakan gambar

               // Gambar latar belakang

               var bgReady = false;

               var bgImage = new Image();

               bgImage.onload = function () {

                               bgReady = true;

               };

               bgImage.src = "images/background.png";

Sebuah Permainan membutuhkan grafis! Jadi mari kita memuat beberapa gambar. Saya ingin melakukan ini sesederhana mungkin, jadi itu hanya sebuah Gambar yang bukan dibungkus dalam Kelas bagus atau sesuatu. bgReady digunakan untuk memberitahu kanvas kalau sudah aman untuk menggambarnya, seperti mencoba untuk menterjemahkan sebelum itu dimuat dan akan melemparkan kesalahan DOM.

Kita melakukan ini untuk masing-masing dari tiga grafis yang kita butuhkan: latar belakang, pahlawan dan monster.

3.                         Objek permainan

               // Objek permainan

               var hero = {

                               speed: 256, // gerakan dalam pixel per detik

                               x: 0,

                               y: 0

               };

               var monster = {

                               x: 0,

                               y: 0

               };

               var monstersCaught = 0;

              

Sekarang kita mendefinisikan beberapa variabel yang akan kita gunakan nanti. Pahlawan mendapatkan setup dengan kecepatan, diaman seberapa cepat itu akan bergerak dalam piksel per detik. Monster tidak akan bergerak sehingga hanya memiliki koordinat. Terakhir, monstersCaught menyimpan jumlah monster pemain telah tertangkap.

4.                         Masukan pemain

               // Menangani keyboard kontrol

               var keysDown = {};

               addEventListener("keydown", function (e) {

                               keysDown[e.keyCode] = true;

               }, false);

               addEventListener("keyup", function (e) {

                               delete keysDown[e.keyCode];

               }, false);

              

Sekarang menangani masalah penginputan. Ini mungkin adalah bagian utama yang akan dilakukan oleh pengembang yang berasal dari latar belakang pengembangan web. Yang penting untuk diingat adalah bahwa kita tidak selalu ingin untuk bereaksi terhadap suatu peristiwa masukan yang tepat ketika itu terjadi. Dalam tumpukan web, mungkin tepat untuk mulai menghidupkan atau meminta data yang tepat ketika pengguna mulai masuk. Tapi dalam aliran ini, kami ingin permainan logika kita untuk hidup hanya di satu tempat untuk mempertahankan semua kontrol jika sesuatu terjadi. Untuk itu kami hanya ingin menyimpan input pengguna untuk nanti.

Untuk mencapai hal ini kita hanya memiliki keysDown variabel yang menyimpan keyCode pada setiap kejadian. Jika kode kunci berada didalam objek, pengguna harus menekan tombol itu. Mudahkan!

5.                         Permainan baru

               // Reset permainan ketika pemain menangkap rakasasa

               var reset = function () {

                               hero.x = canvas.width / 2;

                               hero.y = canvas.height / 2;

// Melemparkan Rakasasa di suatu tempat di layar secara acak

                               monster.x = 32 + (Math.random() * (canvas.width - 64));

                               monster.y = 32 + (Math.random() * (canvas.height - 64));

               };

              

Fungsi reset dipanggil untuk memulai permainan baru, atau tingkat, atau terserah Anda ingin menyebutnya apa. Ini menempatkan pahlawan (pemain) di tengah layar dan rakasa di suatu tempat secara acak.

6.                         Pembaruan objek

               // Memperbarui objek permainan

               var update = function (modifier) {

                               if (38 in keysDown) { // Pemain memegang

                               hero.y -= hero.speed * modifier;

                                              }

                               if (40 in keysDown) { // Pemain menekan

                                              hero.y += hero.speed * modifier;

                               }

                               if (37 in keysDown) { // Pemain menekan kiri

                                              hero.x -= hero.speed * modifier;

                               }

                               if (39 in keysDown) { // Pemain menekan kanan

                                              hero.x += hero.speed * modifier;

                               }

                               // Mereka menyentuh?

                               if (

                                              hero.x <= (monster.x + 32)

                                              && monster.x <= (hero.x + 32)

                                              && hero.y <= (monster.y + 32)

                                              && monster.y <= (hero.y + 32)

                               ) {

                                              ++monstersCaught;

                                              reset();

                               }

               };

              

Ini adalah fungsi update dan disebut setiap satu interval eksekusi. Hal pertama yang dilakukannya adalah memeriksa atas, bawah, kiri dan kanan tombol panah untuk melihat apakag pengguna telah menekannya. Jika demikian, pahlawan akan berpindah ke arah yang sesuai.

Yang mungkin tampak aneh adalah merubah argumen masuk ke update. Anda akan melihat bagaimana hal ini direferensikan dalam fungsi utama, tapi biarkan saya menjelaskan di sini. pengubah adalah angka berdasarkan waktu berdasarkan 1. Jika tepat satu detik telah berlalu, nilai akan menjadi 1 dan kecepatan pahlawan akan dikalikan dengan 1, berarti dia akan pindah 256 piksel dalam kedua itu. Jika setengah detik telah berlalu, nilai akan 0,5 dan pahlawan akan pindah setengah dari kecepatan dalam jumlah waktu. Dan sebagainya. Fungsi ini dipanggil begitu cepat sehingga nilai pengubah biasanya akan sangat rendah, tetapi menggunakan pola ini akan memastikan bahwa pahlawan akan bergerak dengan kecepatan yang sama tidak peduli seberapa cepat (atau lambat) script berjalan.

Sekarang kita sudah dapat memindahkan pahlawan sesuai yang diinputkan oleh pemain, kita dapat memeriksa untuk melihat apa yang terjadi dengan gerakan itu. Apabila hanya ada tabrakan dengan pahlawan dan rakasa, itu saja! Itu cukup banyak permainan. Kami menambahkan nilai (+1 untuk monstersCaught) dan me-reset permainan.

7.                         Membuat objek

               // Menarik segala sesuatu

               var render = function () {

                               if (bgReady) {

                                              ctx.drawImage(bgImage, 0, 0);

                               }

                               if (heroReady) {

                                              ctx.drawImage(heroImage, hero.x, hero.y);

                               }

                               if (monsterReady) {

                                              ctx.drawImage(monsterImage, monster.x, monster.y);

                               }

                               // Skor

                               ctx.fillStyle = "rgb(250, 250, 250)";

                               ctx.font = "24px Helvetica";

                               ctx.textAlign = "left";

                               ctx.textBaseline = "top";

                               ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);

               };

              

Game akan lebih menyenangkan apabila Anda bisa melihat aksi turun, jadi mari kita menarik segala sesuatu ke layar. Pertama kita mengambil gambar latar belakang dan menariknya ke kanvas. Ulangi untuk pahlawan dan rakasa. Perhatikan bahwa perintah ini penting, karena setiap gambar ditarik ke permukaan akan ditarik selama piksel di bawahnya.

Selanjutnya kita mengubah beberapa sifat pada konteks yang berhubungan dengan cara menggambar font, dan kami membuat panggilan ke fillText untuk menampilkan skor pemain. Apabila  kita tidak memiliki animasi yang rumit atau gerakan, kita sudah selesai menggambar.

8.                         Loop permainan utama

               // Loop permainan utama

               var main = function () {

                               var now = Date.now();

                               var delta = now - then;

                               update(delta / 1000);

                               render();

                               then = now;

               };

              

Loop permainan utama adalah apa yang mengontrol aliran permainan. Pertama kita ingin mendapatkan waktu permainan saat ini sehingga kita dapat menghitung delta (berapa banyak milidetik yang berlalu sejak interval terakhir). Kami dapat mengubahnya untuk mengirim yang baru dan membaginya dengan 1000 (jumlah milidetik dalam satu detik). Yang sering kita sebut membuat dan merekam timestamp(pencatat waktu).

Lihat juga Onslaught itu! Arena Studi Kasus untuk lebih lanjut tentang loop permainan..

9.                         Memulai permainan!

               // Mari kita memainkan permainan ini!

               reset();

               var then = Date.now();

               setInterval(main, 1); // Menjalankan secepat mungkin

              

Hampir sama, ini adalah potongan kode terakhir! Pertama kita sebut memanggil “Reset/Ulang” untuk memulai permainan baru / tingkatan. (Ingatlah bahwa ini pusat pahlawan dan tempat rakasa secara acak bagi pemain untuk menemukannya.) Kemudian kita menaruh pencatat waktu kami (dengan variabel itu) dan memulai interval.

SELAMAT! Sekarang Anda (mudah-mudahan!) memahami dasar-dasar dasar pengembangan game dengan menggunakan elemen kanvas dalam JavaScript. Anda dapat mencobanya sendiri! Bermain game atau merubah kode pada GitHub dan memulai hacking.

Ingin Memberi Saran?

Apa yang anda pikirkan dari tutorial ini? Apakah itu berguna? Terlalu lambat, terlalu cepat, terlalu teknis, tidak teknis? Tolong beritahu saya dan saya akan mencoba untuk meningkatkan tutorial berikutnya! Pastikan untuk mengikuti kami di Twitter untuk mngetahui tutorial berikutnya.