Mini Games - HTML CSS Javascript Doang

Поділитися
Вставка
  • Опубліковано 18 жов 2024
  • tutorial membuat game sederhana berbasis web menggunakan HTML CSS dan javascript untuk pemula.
    projek web ini bisa kalian pake untuk:
    1. tugas di sekolah / kampus khususnya anak RPL, teknik informatika, sistem informasi dan lainnya.
    2. ngisi waktu luang, nambah-nambah jam terbang & portofolio pribadi
    3. ngasah logika, berfikir kritis, belajar modifiikasi & meningkatkan kreatifitas.
    SOURCE CODE: github.com/dea...
    anjay so bijak banget gue diatas wkwkwk, intinya ini belum final ya karena code nya masih perlu di refacto, di buat clean code untuk tiap function dan permainan datanya. UI nya juga masih polos, jadi siapa yang setuju next round bikin lebih ciamik dan lebih canggih lagi?
    kuy komen dibawah ya 🥳
    🔻play this video at 720p if you want to see the code clearly - highly recommended 🔻
    TONTON JUGA VIDEO MENARIK LAINNYA 👇
    YANG BIASA DIALAMI PROGRAMMER: • Yang Dialami PROGRAMME...
    NGOBROLIN GAJI PROGRAMMER: • NGOBROLIN GAJI PROGRAM...
    10 TIPE PROGRAMMER DI INDONESIA: • 10 TIPE PROGRAMMER DI ...
    SEBELUM KERJA JADI PROGRAMMER, TAU DULU SKILL INI: • AUTO JADI PROFESIONAL ...
    KUNCI SUKSES JADI PROGRAMMER: • KUNCI SUKSES JADI PROG...
    CARA JADI PROGRAMMER TANPA BASIC IT: • SEKARANG SIAPAPUN BISA...
    16 REKOMENDASI LAPTOP UNTUK PROGRAMMING: • LAPTOP YANG COCOK UNTU...
    CARA MENGASAH LOGIKA: • Video
    ISTILAH-ISTILAH PROGRAMMING UNTUK PEMULA: • Istilah-istilah Progra...
    BAHASA PEMROGRAMAN YANG COCOK UNTUK PEMULA: • Bahasa Pemrograman Yan...
    SEPUTAR FRAMEWORK & LIBRARY: • Video
    TIPS BELAJAR PROGRAMMING 2022: • Tips Belajar Programmi...
    #game #tutorial #coding
    🚀 Daily on Tiktok @dea.afrizal / / dea.afrizal 🚀
    =================
    💌 Email (for business) 💌
    dea.afrizal@icloud.com
    ==================
    👇UA-cam gue yang lainnya 👇
    ✨Braptech Racing Motor (hobi gue merawat motor tua) ✨
    / braptechracing
    🏍 Teman1Roda (hobi gue broadcasting untuk hiburan channel motor) 🏍
    / @teman1rodachannel
    👩‍💻 Dea Afrizal Channel (real life) 👩‍💻
    / deaafrizal
    🔻🔻🔻 SUBSCRIBE 🔻🔻🔻
    For More Update
    🔺🔺🔺LONCENGNYA 🔺🔺🔺

КОМЕНТАРІ • 209

  • @lurd2830
    @lurd2830 2 роки тому +3

    6:02 "Sekarang kita mulai untuk griding ato layouting la ya"
    Ketika ngomong gini musik pun bunyi, aseeek slurrr
    16:20 Javascript cuy

  • @dimasramadhan8182
    @dimasramadhan8182 2 роки тому +6

    Sering sering bikin konten yang begini bang, ini jelas banget stepnya juga. Mantap jadi bisa ngikutin.. dan pertama kali sih buat game dari HTML CSS Javascript sederhana kayak gini. cuma dari sini wkw pedahal gua udah ikutin beberapa course ditempat lain, tpi ini yang paling menarikk. joss masszeh

  • @sandipermana8429
    @sandipermana8429 2 роки тому +4

    Buat standar bro. Masukan aja, gunakan h1 hanya sekali setiap page.
    Nice content. Sukses terus channel nya

  • @Peter.C
    @Peter.C 2 роки тому +63

    Bang bikin kontennya konsisten ya karena ingin belajar programing lebih mendalam dan melanjutkan playlist yang abng buat.

    • @deaafrizal
      @deaafrizal  2 роки тому +22

      siapp perlahan ya cuy, krna channel nya baru jadi masih keteter 🤪.
      ditunggu aja okeeehh

  • @yosukerechain2000
    @yosukerechain2000 2 роки тому +1

    _Long time.... rindu dulu bikin game.di JS pake HTA aja, saat itu sangat menarik. Kalau sekarang game2 bagus2 enginenya....._

  • @lisinmancay8639
    @lisinmancay8639 2 роки тому +2

    Mantul. Pelajarannya. Coba ngikutin

  • @fendihidayat9658
    @fendihidayat9658 2 роки тому +1

    Saya subscribe bang... Moga selalu konsisten di YT dan Tik Tok

  • @harismujianto8316
    @harismujianto8316 2 роки тому +4

    Buat playlist React bang. Gua suka penyampaian lu bang. Semoga dinotice 😅

  • @Semangat-wq6fj
    @Semangat-wq6fj 2 роки тому +1

    Bagus banget bang metode dan tutorial nya sangat membantu saya yang masih baru belajar html, konsisten terus ya bang sehat selalu good luck pokonya 🙏

  • @gghogg686
    @gghogg686 2 роки тому +1

    Bang saran belajar ngoding yg bener gimana, saya belajar ngoding itu lihat codingannya web orang lain, lalu saya ketik sendiri

  • @danusakhi478
    @danusakhi478 2 роки тому +1

    Gw lulusan tkj, skrg mau kuliah ngambil informatika, dan gua mau coba belajar dri channel lu bang

  • @YukCodingproduction
    @YukCodingproduction 2 роки тому +2

    Bang bikin konten lanjut nya dong bagaimana menambah kan fitur musik di dalam game itu bang

  • @zizioixs14
    @zizioixs14 2 роки тому +1

    enak banget liat nya...kalo udah paham sama bahasa java nya😅

  • @febrianto7720
    @febrianto7720 2 роки тому +1

    mksh bang tutorialnya jadi makin semangat belajar Html nya ni

  • @Gibhsei
    @Gibhsei 2 роки тому +1

    keren ini javascript doang, canggih.

  • @rianajifebriansyah5609
    @rianajifebriansyah5609 2 роки тому +3

    Wkwkwk sekelas bang dean aja masih eror .aku sering bangat eror pas buat tugas kuliah tapi anehnya sampe di kasih tau dimimpi salahnya di variable pas di ganti baru jalan wkwkwkk .semangat terus bang

  • @setopriambodo243
    @setopriambodo243 2 роки тому +1

    Canggihhh gak sia sia dapet chanel ente dari tiktok bang

    • @deaafrizal
      @deaafrizal  2 роки тому +1

      aseeekk, thank u cuy mga kepake yaaaa

  • @gusion2018
    @gusion2018 2 роки тому +2

    Dah 2rb sub bang.selamattt

    • @deaafrizal
      @deaafrizal  2 роки тому +2

      iya bner jg ya, thanks bro 👋😇

    • @gusion2018
      @gusion2018 2 роки тому +1

      @@deaafrizal sama sama broo

  • @ilyas9305
    @ilyas9305 2 роки тому +1

    mau nanya kak sebenernya chanel" yang bikin game simpel c++ itu bisa dimainin atau ga ya,pengen belajar soalnya kalo rill

  • @michele_xgc4032
    @michele_xgc4032 2 роки тому +1

    Makasih bang buat tutorialnya,mudah dipahami

  • @kosmasnagara8802
    @kosmasnagara8802 2 роки тому +1

    Terimakasih tutorialnya

  • @alfarabimaulana4712
    @alfarabimaulana4712 2 роки тому +1

    Mantap. Bermanfaat banget.

  • @zidaneuchiha1554
    @zidaneuchiha1554 2 роки тому +2

    Boleh nih bikin game🤙

  • @muzaimsurya365
    @muzaimsurya365 2 роки тому +1

    Bang bikin konten kek gini lagi dong, tapi yang pake reactjs

  • @Asyraf_ID
    @Asyraf_ID 2 роки тому +2

    Next buat projek pakai golang, buat portofolio🙏😀

  • @maspio48
    @maspio48 2 роки тому

    Terima kasih bg, videonya sangat membantuu bgt💯

  • @ahmadzainuri5910
    @ahmadzainuri5910 2 роки тому +2

    Bang mohon buatin game tebak angka dong bang,,contohnya online 2015

  • @tonidwi4123
    @tonidwi4123 2 роки тому +1

    Bang fungsi set setplayeroption parameter option nya didapat dari argumen mana ya?

  • @bocah_gaming21fans96
    @bocah_gaming21fans96 2 роки тому +1

    bang gua kok gak bisa buka live servernya? tulisannya open a folder or workspace

  • @thedoll233
    @thedoll233 Рік тому

    luwh keren bet bang kayaknya

  • @ardiramaxt
    @ardiramaxt 2 роки тому +4

    Bang Part 5 Boostrap nya semoga cepat up

  • @rioangkasa5364
    @rioangkasa5364 2 роки тому

    Sering2 bagi ilmu bang

  • @cahya_usubio9834
    @cahya_usubio9834 2 роки тому +1

    kaya gini gua sering sih di sekolah buat
    karena dirumah nggak punya komputer 😪

  • @JoyceMath
    @JoyceMath 3 місяці тому

    Bang aku kok pas bagian winCalculation() nya kok pas player == bot itu output nya ga seri ya? Kalo kertas ama kertas = player menang,
    Kalo gunting ama gunting = bot menang,
    Kalo batu ama batu = player menang.
    Help :v

  • @DARYASYAFILLAPRATAMA
    @DARYASYAFILLAPRATAMA 2 роки тому

    Semangat bang Cuy Next nya....!

  • @arjosoekardan5906
    @arjosoekardan5906 2 роки тому +1

    Untuk video berikutnya bisakah Bang mengulas khusus tentang bagian Javascript nya karena di video ini sudah pakai konsep OOP (Object Oriented Programming) yang bukan lagi untuk pemula

  • @khairul_azzam_ammar_nur
    @khairul_azzam_ammar_nur 2 роки тому

    Terima kasih Bang Dea ...

  • @fansmilitan2701
    @fansmilitan2701 2 роки тому

    bang harga jengkol di warsun naik kagak kena inflasi dan imbas perang ukraina vs rusia ?

  • @tifune6226
    @tifune6226 2 роки тому +4

    10:48 cara munculin emoji gimana pake extensi kah?

  • @noldyy6435
    @noldyy6435 2 роки тому

    Bang kok di match result gw kok gk muncul hasilnya padahal klo di console udh berfungsi dengan baik? Tolong di dijwb bang🙏

  • @Rofiqi-zl7uh
    @Rofiqi-zl7uh 2 роки тому

    Semangat bikin kontennya bang

  • @arjosoekardan5906
    @arjosoekardan5906 2 роки тому

    Janjinya kapan terpenuhi Bang untuk improve coding nya supaya ada score dsb?

  • @akmaldiraa
    @akmaldiraa 2 роки тому +2

    Bang pake asynchronous aja bang biar kekinian kwkwkw
    const NamaFungsi = () => {
    //idk
    }

  • @rafael.athaya
    @rafael.athaya 2 роки тому +1

    bang kalo tanpa live server boleh gak,soalnya malah ada pesan "Cannot GET /index.html/"

    • @AndriYss
      @AndriYss 2 роки тому

      bantu jawab, bisa bro, tapi kalau gak pakek kalau ada perubahan harus refres webnya

    • @iniijaing8726
      @iniijaing8726 2 роки тому

      @@AndriYss nah itu males klik refresh hahaa

  • @mantapjiwa....229
    @mantapjiwa....229 2 роки тому

    Tutor bikin web wedding organizer bang🙏😅

  • @Vann_immortal
    @Vann_immortal 2 роки тому +1

    Bang cara jadiin apk nya gmn bang? Gw udh buat game cuma gatau caranya biar jadi apk jawab jir Jan dilove doang !!!

  • @ROTI_BALAP_GAMING
    @ROTI_BALAP_GAMING 4 місяці тому +1

    ✌✊🖖

  • @masteradmin8147
    @masteradmin8147 2 роки тому

    mirip punya Sandhika Galih youtuber Web programming unpas

  • @hafidzramdanii
    @hafidzramdanii 2 роки тому +1

    Bang buat nyari gunting kertas batunya dmna?

  • @itsmefarelll
    @itsmefarelll 6 місяців тому +1

    Aduh saya nge stuck di eror playerOption

  • @ELFATIH3127.OFFICIAL
    @ELFATIH3127.OFFICIAL 2 роки тому +1

    Bang misalkan kita bergabung dan kita belum punya bakat di IT bisa ga ya ? dan harus pake aplikasi apa buat belajar ny bang ? #terimakasiBang#suksesSelluIlmunya

    • @deaafrizal
      @deaafrizal  2 роки тому

      gw juga gak bakat IT kok, kan dari kimia awalnya. tapi bisa bisa aja tuh 😜

  • @putramaajid6693
    @putramaajid6693 Рік тому +1

    bang mau nanya bagian javascript nya dimana ya kok ga ada

  • @dianafnioktavia4369
    @dianafnioktavia4369 2 роки тому

    Bang buat untuk tutorial game onet dong bang?

  • @alugod4938
    @alugod4938 2 роки тому

    Kalo nggak muncul pas di inspect di console gimana bang solusinya

  • @Yandinugraha262
    @Yandinugraha262 2 роки тому +1

    Cara munculin emoticon gunting kertas itu gmna bang

  • @IndraMaulana-vq8df
    @IndraMaulana-vq8df 2 роки тому

    Bang klo mau belajar coding spek leptop apaan

  • @gunawanapriliyanto8107
    @gunawanapriliyanto8107 11 місяців тому

    misi, ini code yg di github sudah jadi apa ada perbaikian lgi?

  • @witchestify
    @witchestify 2 роки тому

    Permisi bang mau nanya, CSS flexbos cheatsheet-nya itu dapat darimana ya? terima kasih

    • @VoltageCode1903
      @VoltageCode1903 2 роки тому

      Extension Css flexbox cheatsheet diinstall abg itu

  • @putrageral7706
    @putrageral7706 2 роки тому +1

    Bang ko saya salah di viewport sama di pas start new bng agak bingung

  • @jaspergaming3497
    @jaspergaming3497 2 роки тому

    Bang game ini bisa di jalankan di android gak ya, (berbasis Android)

  • @ywan1816
    @ywan1816 2 роки тому +1

    10:48 dapet emoji kayak gitu dimana?

  • @bachrulpanjigumilang3821
    @bachrulpanjigumilang3821 2 роки тому +1

    bang lu pake apa dah kok lu ngetik transition dan tranfrom langsung webkit dll itu gimna cara ya bang ?

    • @deaafrizal
      @deaafrizal  2 роки тому

      hayoloo hahaa, itu ada kok video setup vscode gw. coba cek deh 🤪

    • @dandi_saputra
      @dandi_saputra 2 роки тому

      Hayooloo🥴

  • @fikkrizaldi
    @fikkrizaldi 2 роки тому +2

    theme vscodenya apa bang? sama font nya? thanks before

    • @fikkrizaldi
      @fikkrizaldi 2 роки тому

      apa bang tema sm font nya wkwkw

    • @fikkrizaldi
      @fikkrizaldi 2 роки тому

      klo sempet bikin video ekstensi apa aja bang yg diinstall di vscodenya hehe

    • @wizardpro5472
      @wizardpro5472 2 роки тому

      @@fikkrizaldi nitip mana tau di balas sama admin 🗿

  • @TOMAT6666
    @TOMAT6666 2 роки тому +1

    Klo bikin game psp butuh brp taun bg😁

  • @businessman8715
    @businessman8715 2 роки тому +4

    31:23 untuk versi yg sudah revisi ada bang ? Pengen tau script yg lebih simpel

    • @businessman8715
      @businessman8715 2 роки тому

      Apakah bisa menggunakan metode selain setter getter ?

  • @farelwidyadhana5147
    @farelwidyadhana5147 2 роки тому +1

    Bang cr munculin emoji gitu gmn ya?

  • @kaedeharakazuha2003
    @kaedeharakazuha2003 2 роки тому

    kalau mau buat game pake unity aja, guampang banget buat game kayak ginian awkwkwk

    • @Rewan72
      @Rewan72 7 місяців тому

      Cara pake unity gimna bang apakah berbayar?

  • @rib6777
    @rib6777 2 роки тому +1

    cara complie di vs gimana bang, gangerti"
    pilss bang🙏

  • @kevinparisian7973
    @kevinparisian7973 Рік тому

    Bang kok giliran di tes klik di console nya ga ada notif sama sekali

  • @putraaja-jx5zf
    @putraaja-jx5zf Місяць тому

    Bang gua udah buat nih tapi folder nya otomatis ke ganti crome

  • @bayugilangpamungkas4579
    @bayugilangpamungkas4579 Рік тому

    pengen nanya cara masang emoticon kek punyamu bang? plissss.....

  • @karraofficial9395
    @karraofficial9395 2 роки тому +1

    Mantap kak

  • @Mhw1908
    @Mhw1908 2 роки тому +1

    munculin emoji gimana itu bang ?

  • @rendyputra344
    @rendyputra344 2 роки тому

    Bang itu make extension apaan kok bisa langsung auto ketulis webkit pas ngetik transform

  • @herolmaniaq7301
    @herolmaniaq7301 Рік тому +1

    Itu make apa koding nya

  • @yoga865
    @yoga865 2 роки тому +1

    06:35 muka-muka mikirin nama class yang bagus🤣🤣🤣

  • @kaisarchannel1635
    @kaisarchannel1635 2 роки тому

    Alhamdulillah 3hari ngikutin tutor bang dea hasilnya pusing

  • @hidayahapriliansyah
    @hidayahapriliansyah 2 роки тому +1

    bang saran, hurufnya tolong gedein hihi ....

    • @deaafrizal
      @deaafrizal  2 роки тому

      siappppp next yaa 👌 thank u sarannya

  • @ahmadnafal7694
    @ahmadnafal7694 2 роки тому +2

    Bang mohon izin nanya bang, kok di gue gabisa ya html Ama css nya digabungin

  • @ahmadrafi3530
    @ahmadrafi3530 2 роки тому

    Bang gua salah terus di macth result nya knp ya , pas bagian mau ngedeklarasiin si (this.winner) nya gak ke baca, beda sama punya lu bang

    • @ifajaarrr
      @ifajaarrr 2 роки тому

      Udah bisa belum bre?

  • @farhanreizha
    @farhanreizha 2 роки тому +1

    mongodb kapan a?

  • @virgouroboros4820
    @virgouroboros4820 2 роки тому +1

    Kamu psatir yak bang 😱😜

  • @aldijaya330
    @aldijaya330 2 роки тому +2

    Bang udah sama bang tapi malah gak jalan udah cek beberapa jam gagal terus

    • @deaafrizal
      @deaafrizal  2 роки тому +1

      cek di source code. ada di deskripsi yaaa

    • @aldijaya330
      @aldijaya330 2 роки тому

      @@deaafrizal yg mna bang

  • @reyytech
    @reyytech 2 роки тому +1

    Makasih bang

  • @alifafawniazahra6307
    @alifafawniazahra6307 Рік тому

    lambang kaya dollar itu emg dollar kah?

  • @whi6923
    @whi6923 2 роки тому

    spil merek rokonya apa bang 😂

  • @adityaariadi9302
    @adityaariadi9302 Рік тому

    Coding game lagi bang 👍👍👍👍

  • @rizqiemaulana9740
    @rizqiemaulana9740 3 місяці тому

    Mas mau nanya cara buat ≠ kek gini pencet tombol apa ya?

  • @diz_04
    @diz_04 2 роки тому +1

    Cara buat tanda tidak sama dengan gimana ya , tolong dong

  • @frangkymulersimanjuntak3120
    @frangkymulersimanjuntak3120 2 роки тому +2

    Rambut model baru bang cuy

  • @NumpangNonton22
    @NumpangNonton22 11 місяців тому

    Bang cara buat simbol ≠ ini nya gimana bang? pliss jawab🙏

    • @deaafrizal
      @deaafrizal  11 місяців тому

      itu kaya gini ketiknya !=

  • @gilabola373
    @gilabola373 2 роки тому

    Bang, klo tambah button reset gmna bg?

  • @argaay1253
    @argaay1253 Рік тому

    bang buut ngeluarin emoji ap ya?

  • @herolmaniaq7301
    @herolmaniaq7301 Рік тому

    Kalo di jadiin apk bisah gak,?

  • @alkria_0
    @alkria_0 10 місяців тому

    bang itu emotnya pencet apa bang dan terimakasih sudah memberi tutorialnya

    • @deaafrizal
      @deaafrizal  10 місяців тому

      windows + titik di keyboard

    • @alkria_0
      @alkria_0 10 місяців тому

      makasih bang,trus satu lagi itu pas bagian CSS yang transition itu kok saya g ada yang di bawahnya kayak webkit,moz,ms itu saya g ada apakah ada kesalahan
      @@deaafrizal

    • @ucxcl-bpdhouklaaxnq_j6ow351
      @ucxcl-bpdhouklaaxnq_j6ow351 5 місяців тому

      @@alkria_0 itu mah ekstensi dari vscodenya

  • @farel___
    @farel___ 2 роки тому

    bang coba design² lagi bang

  • @iwyjoni
    @iwyjoni 2 роки тому

    bang untuk munculin tampilan mobile itu gimana cara'nya?

  • @alzyyyyy
    @alzyyyyy 2 роки тому

    cara memunculkan emoji batu, gunting, kertas gmn ya?

    • @Putri-vq4mv
      @Putri-vq4mv 2 місяці тому

      pencet windows trus pencet titik, di barengin pncetnya

  • @sultanfauzanashari482
    @sultanfauzanashari482 2 роки тому

    bisa dibuka ke hp ga si bang hasil run nya?

  • @jabarhaque482
    @jabarhaque482 2 роки тому

    bang kok pickoption nya ga berfungsi ya?