JeuTropFacile - WayTooEasyGame: 3 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:09

Ini adalah permainan yang sepenuhnya dibuat pada HTML dan JavaScript dengan P5js perpustakaan. Terdapat 2 fail bernama index.html dan sketch.js. Saya sangat pemula dalam kod jadi saya minta maaf jika tidak jelas.

Anda boleh bermain permainan dengan pautan ini

Anda mengawal bola putih dengan tombol panah dan anda harus mengelakkan bola merah (pada masa ini, hanya ada satu).

Saya membuat 2 pemboleh ubah: posX = 200 dan posY = 200

Pada sketch.js, saya membuat kanva dalam penyediaan fungsi dengan 640x x 480y dengan latar belakang kelabu dalam cabutan fungsi, kemudian saya membuat bulatan putih dengan kedudukan pada posX, posY, 75, 75.

Langkah 1: Menggerakkan Bulatan

Seperti yang saya katakan sebelumnya, anda boleh menggunakan kekunci anak panah untuk menggerakkan bulatan.

Untuk melakukan itu saya membuat fungsi updatePositionEllipse ().

Saya menggunakan keadaan ini untuk membuatnya berfungsi: if (keyIsDown (DOWN_ARROW)) {

posY + = 5;

}

Apabila kekunci bawah ditekan, bulatan bergerak ke bawah.

Saya menggunakannya pada setiap kekunci lain supaya anda dapat bergerak ke kiri, kanan, atas dan bawah.

Langkah 2: Membuat Sempadan Had

Untuk membuat bola putih berhenti di hujung kanva saya menggunakan fungsi testOutOfScreen.

Di dalamnya, saya menggunakan syarat jika (posX> 600) {

posX = 600; berat badan (6); strok ('biru'); garis (637, 0, 637, 480); }

jika kedudukan x lebih tinggi daripada 600: ia menyekat bola dan menarik garis biru dengan sempadan 6 diletakkan di sebelah kanan kanva.

Saya melakukan ini untuk setiap sempadan.