Cara Membuat Game Basketball dengan JavaScript

  • Whatsapp

Selain sepak bola, penggemar olah raga basket juga cukup banyak. Nah, kali ini kita akan mencoba membuat game basketball dengan menggunakan bahasa pemrograman CSS dan JavaScript. Bahasa pemrograman CSS digunakan untuk membuat background, sedangkan bahasa pemrograman JavaScript digunakan untuk menampilkan serta memainkan game.

Lalu, bagaimana caranya membuat game basketball dengan bahasa pemrograman CSS dan JavaScript? Mudah kok, yuk buka komputer kamu dan ikuti beberapa langkah mudah di bawah ini.

Bacaan Lainnya

1. Download dulu gambar pendukung dan file plugin. Letakkan folder gambar pendukung dan folder file plugin di folder yang sama dengan index.html dan style.css.

2. Buka XAMPP Control Panel, serta aktifkan Apache.

3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.





Cara Membuat Game Basketball dengan JavaScript


Game Basket Ball







Simpan kode HTML5 di atas di folder xampplite → htdocs → buat folder baru dengan nama Basketball → simpan kode di atas dengan nama index.html.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/Basketball.

5. Untuk membuat background game basketball, buka lembar kerja baru di teks editor dan ketikkan script code CSS berikut ini.

body {
margin: 0;
background-color: #b22222;
}
canvas {
margin: 0 auto;
border: thin solid black;
}
span {
display: block;
margin: 30px auto;
width: 500px;
text-align: center;
}
h2 {
text-align: center;
}

Simpan kode CSS di atas di folder xampplite → htdocs → buka folder Basketball → simpan kode di atas dengan nama style.css.

6. Reload alamat url : http://localhost/Basketball. Berikut tampilan background game basketball.

7. Untuk menampilkan game dan agar game bisa dimainkan, buka kembali file index.html dan ketikkan script code JavaScript berikut ini diantara script kode .


Jangan lupa untuk Crtl+S.

8. Reload alamat url : http://localhost/Basketball. Berikut tampilan awal dari game basketball.

Cobalah masukkan bola ke dalam ring basket.

Game juga akan menampilkan nilai terbaik yang berhasil dicetak.

9. Selesai, menarik sekali bukan?.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/Basketball. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. Basketball menunjuk pada folder Basketball saya di xampplite → htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Game Basketball dengan JavaScript’. Selamat mencoba.

Anda Merasa Terbantu dengan artikel ini? Silahkan share dan bergabung dengan pinthar.net di Facebook agar tidak ketinggalan info menarik lain nya.

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *