Bagaimana untuk membuat permainan HTML5 kanvas sederhana

Sejak merilis Onslaught! Arena, aku sudah banyak permintaan untuk tutorial yang sangat dasar tentang cara membuat permainan sederhana di kanvas. Setelah merenungkan untuk beberapa waktu cara terbaik untuk mendekati topik ini kompleks, 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 ke kanan dengan berjalan melalui game.js. Anda juga dapat bermain game di sini.

1. Buat kanvas

// Create the 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 dicapai. Setelah kita memiliki elemen kita mendapatkan referensi ke konteksnya, mengatur dimensi dan menambahkan ke tubuh dokumen.

2. Sertakan gambar

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
 bgReady = true;
};
bgImage.src = "images/background.png";

Permainan membutuhkan grafis! Jadi mari kita memuat beberapa gambar. Saya ingin melakukan ini sesederhana mungkin sehingga itu hanya sebuah Gambar bukannya dibungkus dalam Kelas bagus atau sesuatu. bgReady digunakan untuk membiarkan kanvas tahu kalau sudah aman untuk menarik itu, seperti mencoba untuk membuat sebelum itu dimuat akan melempar kesalahan DOM.

3. Permainan objek

// Game objects
var hero = {
 speed: 256, // movement in pixels per second
 x: 0,
 y: 0
};
var monster = {
 x: 0,
 y: 0
};
var monstersCaught = 0;

Sekarang kita mendefinisikan beberapa variabel kita harus menggunakan nanti. pahlawan mendapatkan setup dengan kecepatan yang adalah seberapa cepat itu akan bergerak dalam piksel per detik. rakasa tidak akan bergerak sehingga hanya memiliki koordinat. Terakhir, monstersCaught menyimpan jumlah monster pemain telah tertangkap.

4. Pemain masukan

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
 keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
 delete keysDown[e.keyCode];
}, false);

Sekarang untuk penanganan masukan. Ini mungkin adalah bagian pertama yang akan perjalanan sampai 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 memulai masukan. Tapi dalam aliran ini, kami ingin permainan logika kita untuk hidup hanya di tempat sekali untuk mempertahankan kontrol ketat atas kapan dan 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 setiap acara. Jika kode kunci adalah dalam objek, pengguna saat ini menekan tombol itu. Wikipedia!

5. Baru permainan

// Reset the game when the player catches a monster
var reset = function () {
 hero.x = canvas.width / 2;
 hero.y = canvas.height / 2;

 // Throw the monster somewhere on the screen randomly
 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 apapun yang Anda ingin menyebutnya. Ini menempatkan pahlawan (pemain) di tengah layar dan rakasa di suatu tempat secara acak.

6. Memperbarui objek

Ini adalah fungsi update dan disebut setiap pelaksanaan selang tunggal. Hal pertama yang dilakukannya adalah memeriksa atas, bawah, kiri dan tombol panah kanan untuk melihat apakah pengguna telah menekan mereka. Jika demikian, pahlawan tersebut akan dipindahkan ke arah yang sesuai.

Apa yang mungkin tampak aneh adalah argumen pengubah 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 pindah pahlawan sesuai input pemain, kita dapat memeriksa untuk melihat apa yang terjadi dengan gerakan itu. Jika ada tabrakan dengan pahlawan dan rakasa, itu saja! Itu cukup banyak permainan. Kami penghitungan nilai (+1 untuk monstersCaught) dan me-reset permainan.

7. Render objek

Game lebih menyenangkan bila 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. Seperti kita tidak memiliki animasi yang rumit atau gerakan, kita sudah selesai menggambar.

8. Loop utama permainan

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

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

9. Mulai game!

Hampir sana, ini adalah potongan kode terakhir! Pertama kita sebut mengatur ulang untuk memulai permainan baru / tingkat. (Ingatlah bahwa ini pusat pahlawan dan tempat rakasa secara acak untuk pemain untuk menemukan.) Kemudian kita benih timestemp kami (dengan variabel itu) dan mulai interval.

Congraulations! Sekarang Anda (mudah-mudahan!) memahami dasar-dasar dasar pengembangan game dengan menggunakan elemen kanvas dalam JavaScript. Coba saja sendiri! Main game atau garpu kode pada GitHub dan memulai hacking.

Punya masukan?

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

Artikel terkait

Poles layar Tingkat Pilih: proses dan pelaksanaan
Lostcast Episode 18: Sponsor Sorceror ini
Lostcast Episode 17: Vincent Priceless

Sumber : 

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/