Bagaimana membuat permainan HTML5 sederhana

Sejak merilis Onslaught! Arena, saya sudah banyak permintaan untuk tutorial yang sangat dasar mengenai cara membuat permainan sederhana pada kanvas. Setelah merenung dalam beberapa waktu bagaimana cara yang baik sehingga topik menjadi kompleks, saya memutuskan hanya untuk mengumpulkan permainan yang sangat sederhana saya bisa membayangkan dan menjalaninya dengan mudah tahap demi tahap.
Jadi ini dia! Mari kita melompat ke kanan dengan berjalan melalui game.js. Anda juga dapat bermain game di sini.

 

1.      Membuat 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 maupun HTML untuk menunjukkan bahwa ini mudah untuk dicapai. Setelah kita memiliki elemen kita mendapatkan referensi ke konteksnya, mengatur dimensi dan menambahkan ke bagian 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 bahwa sudah aman untuk menggambarnya, seperti mencoba untuk membuatnya sebelum dimuat akan melempar kesalahan DOM.

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

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 yang kita butuhkan untuk digunakan nanti. Pahlawan dirancang dengan kecepatan dimana seberapa cepat ia akan bergerak dalam piksel per detik. Raksasa tidak akan bergerak sehingga hanya memiliki koordinat. Terakhir, monstersCaught menyimpan jumlah monster pemain yang telah tertangkap.

4. Masukkan Pemain

// 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 bagian pertama dimana akan ada perjalanan pengembang yang berasal dari latar belakang pengembangan web. Hal yang penting untuk diingat adalah bahwa kita tidak selalu ingin untuk bereaksi terhadap suatu masukan peristiwa yang tepat ketika itu terjadi. Dalam banyak web, mungkin tepat untuk mulai menghidupkan atau meminta data yang tepat ketika pengguna memulai masukan. Tetapi dalam aliran ini, kami ingin permainan logika kita untuk hidup hanya di satu tempat  untuk mempertahankan kontrol ketat atas kapan dan jika sesuatu terjadi. Untuk itu kami hanya ingin menyimpan input pengguna 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. Sederhana!

5. Permainan Baru

// 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 suka untuk menyebutnya. Ini menempatkan pahlawan (pemain) di tengah layar dan raksasa di suatu tempat secara acak.

6. Memperbarui Objek

// Update game objects

var update = function (modifier) {

if (38 in keysDown) { // Player holding up

hero.y -= hero.speed * modifier;

}

if (40 in keysDown) { // Player holding down

hero.y += hero.speed * modifier;

}

if (37 in keysDown) { // Player holding left

hero.x -= hero.speed * modifier;

}

if (39 in keysDown) { // Player holding right

hero.x += hero.speed * modifier;

}

// Are they touching?

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 eksekusi satu interval. Hal pertama yang dilakukannya adalah memeriksa atas, bawah, kiri dan tombol panah kanan untuk melihat jika pengguna telah menekan mereka. Jika terjadi, pahlawan tersebut akan dipindahkan ke arah yang sesuai.

Apa yang mungkin tampak aneh adalah pengubah argumen menjadi diperbarui. Anda akan melihat bagaimana hal ini direferensikan dalam fungsi utama, namun biarkan saya menjelaskannya di sini. Pengubah adalah angka pada 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 keduanya. Jika setengah detik telah berlalu, nilai akan 0,5 dan pahlawan akan bergerak setengah dari kecepatan dalam jumlah waktu. Dan segera. 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 pindahkan pahlawan sesuai input pemain, kita dapat memeriksa untuk melihat apa yang terjadi dengan gerakan itu. Jika ada tabrakan dengan pahlawan dan raksasa, itu saja! Itu cukup banyak permainan. Kami perhitungkanan nilai (+1 untuk monstersCaught) dan me-reset permainan.

7. Render Objek

// Draw everything

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);

}

// Score

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

ctx.font = "24px Helvetica";

ctx.textAlign = "left";

ctx.textBaseline = "top";

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

};

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

Selanjutnya kita rubah 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. Perulangan Utama Permainan

var main = function () {

var now = Date.now();

var delta = now - then;

update(delta / 1000);

render();

then = now;

};

Perulangan utama permainan adalah apa yang mengontrol aliran permainan. Pertama kita ingin mendapatkan pencatat waktu 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 pencatat waktu.

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

9. Memulai Permainan!

// Let's play this game!

reset();

var then = Date.now();

setInterval(main, 1); // Execute as fast as possible

Disini, ini adalah potongan kode terakhir! Pertama kita sebut mengatur ulang untuk memulai permainan baru / tingkat. (Ingatlah bahwa ini pusat pahlawan dan tempat raksasa secara acak untuk pemain menemukannya.) Kemudian kita tempatkan pencatat waktu kami (dengan variabel itu) dan mulai interval.

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

 sumber: http://www.lostdecadegames.com