Sederhana Menggunakan HTML5

Table of Contents

Sederhana Menggunakan HTML5

Sederhana Menggunakan HTML5
Sederhana Menggunakan HTML5

Langkah 1 kita harus membuat kanvasnya terlebih dahulu , masukan coding :

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.Lakukan dalam JavaScript, bukan HTML agar lebih mudah. Setelah kita memiliki elemen kanvas kita mendapatkan referensi ke konteksnya, mengatur dimensi dan menambahkan ke bagian dokumen.

Langkah ke 2 kita akan memasukkan gambar :

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

Game ini membutuhkan grafis , kita akan membuat sesederhana mungkin , jadi kita hanya menggunakan gambar yang di letakkan ke suatu class.bgReady berfungsi untuk menunjukkan kesiapan kanvas untuk menerima gambar , seperti menjalankan gambar sebelum ada DOM error di dalamnya.
Adapun grafis yang akan kita gunakan : kanvas , jagoan dan juga monster

Langkah ke 3 yaitu membuat object permainan :

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

Sekarang kita akan mendefinisikan beberapa variabel yang harus digunakan nanti. Jagoan akan mendapatkan pengaturan dengan kecepatan yang dihitung berdasarkan piksel / detik.Sedangkan monster akan kita buat diam / tidak bergerak. Terakhir, monstersCaught merupakan variabel yang berfungsi menghitung monster yang sudah tertangkap oleh Jagoan.

Langkah ke 4 mengatur inputan dari user :

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

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 menyelesaikan ini kita hanya memiliki keysDown variabel yang menyimpan keyCode setiap gerakan. Jika kode kunci adalah dalam sebuah objek, maka pengguna hanya perlu menekan tombol itu.

Langkah ke 5 adalah membuat New Game / Permainan baru :

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.

Langkah ke 6 memperbarui objek :

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

Hal pertama yang dilakukannya adalah memeriksa tombol atas, bawah, kiri dan   kanan untuk melihat apakah user menggunakannya. Jika sudah, jagoan akan dipindahkan ke arah sesuai yang user tekan.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.Jika ada tabrakan antara jagoan dan monster , maka penghitungan nilai (+1 untuk monstersCaught) dan nilai akan di perbarui.

Sumber : https://balikpapanstore.id/grand-mountain-adventure-apk/