Mau ikut kelas online SSLC BSS UB, bagaimana membuat game secara dasar dengan HTML5 Canvas dan engine terkait yang lainnya, daftarkan diri Anda dengan join ke kelas dengan code r3oa6fs di Google Classroom, atau dengan meng-email uboiz@yahoo.com.

Membuat Game Pong dengan HTML5 Canvas

-

Membuat halaman HTML5 Canvas Sederhana

Contoh membuat halaman HTML, dengan menambahkan element Canvas di dalamnya. Untuk editing, dapat menggunakan software Notepad++, yang dapat didownload sesuai device komputer yang akan digunakan untuk mengkompilasi.

Berikut ini adalah video cara membuat workspace Canvas di HTML5 di atas.


Mengganti Background


Menyiapkan Papan Pemantul


Menambahkan Net

Gambar net, dapat menggunakan garis dashed stroke, atau garis yang terputus-putus.


Menambahkan Bola

Menggambarkan bola, menggunakan fungsi arc dengan ketentuan parameter input


Menambahkan Menambahkan Interaksi Mouse

Parameter yang perlu ditambahkan adalah lastMouse yang memilki nilai ke arah x dan ke arah y. parameter ini adalah nilai yang menunjukkan posisi terbaru mouse yang terdeteksi browser.


Menambahkan Gerakan Bola

Gerakan bola, dapat menggunakan animasi, gerakan tiap satuan waktu.


Menambahkan Collision dengan Papan


Menambahkan Interaksi Touch

Sebagaimana fungsi mouse, fungsi touch juga bertugas mendeteksi posisi terakhir sentuhan untuk device smartphone.


Menambahkan Nilai


Download Code

Comments

Post a Comment

Popular posts from this blog

Challenge yang Harus Diikuti oleh SSLC

-
Salah satu tujuan adanya Samsung Smart Learning Class (SSLC) adalah mencetak siswa-siswi Sekolah Tingkat Menengah dan Guru, untuk dapat membuat game dan dapat mendistribusikannya melalui platform smartphone Android.  Oleh karena itu, Samsung bekerjasama dengan Decoding, menyediakan kelas online pembuatan game berbasis smartphone menggunakan Construct dan Unity, sebagai bentuk usaha untuk mewujudkan tujuan di atas.  Kelas online Decoding diadakan satu kali pertemuan perminggu dan dengan durasi 1-2 jam, dengan memanfaatkan fasilitas Hangout, dengan pemateri yang ditunjuk oleh pihak Decoding. Selain kelas online, bersama Decoding, Samsung juga mengadakan Challenge yaitu:  Games Construct Challenge ( https://www.dicoding.com/challenges/497 )  Games Unity Challenge ( https://www.dicoding.com/challenges/494 )  Kedua challenge di atas hanya boleh diikuti oleh siswa/siswi dan guru SSLC, dan telah dimulai sejak Desember 2018 dan akan berakhir pada Febr...
Read more

ARCore untuk Augmented Reality

-
Image
Salah satu product Google yang berupa library dan ditujukan untuk kepentingan pembuatan Augmented reality adalah ARCore  Sampai tulisan ini ditulis, sebenarnya penulis belum mengetahui sepenuhnya bagaimana cara penggunaan menggunakan ARCore dalam code program.  Namun penulis telah mencoba beberapa contoh kode program ARCore yang dapat di download di link Github di sini , dan membuat file apknya dengan Android Studio.  Berikut ini screenshot beberapa aplikasi contoh dari link Github di atas, yang merupakan properti dari Developer ARCore: Solar System Chromakey HelloSceneform Device untuk mengambil screenshot adalah Samsung Galaxy A8, Samsung Smart Learning Class Brawijaya Smart School Malang. Dimana sebenarnya library ini tidak hanya digunakan untuk Android, namun dapat digunakan di beberapa platform pengembangan software seperti di UNREAL, UNITY, dan iOS.  Referensi: Developer, Google. 2019. ARCore. https://developers.google...
Read more