Javascript & DOM #9 – Membuat Game SUWIT JAWA v2.0 (Latihan DOM 2)

32 Thoughts to “Javascript & DOM #9 – Membuat Game SUWIT JAWA v2.0 (Latihan DOM 2)”

1. Rivo Rizaldi

   April 20, 2018 at 2:59 pm

   thanks pak atas sharing ilmunya sangat bermanfaat 😀
   Saya juga sudah buat cuma pakai suit jepang, hehe. Silahkan di cek : https://codepen.io/rivorizaldi/pen/LmVeeN
   saya modifikasi dengan fitur score dan juga tombol reset cuman tampilannya masih primitif 😀 , nanti klo ada kesempatan saya update tampilannya 😀 😀

   Reply
2. Hamid Trend

   May 3, 2018 at 10:54 am

   keren euy si pak dika, logikanya kuat, mantab pak..

   Reply
3. Fitra Ilham

   May 13, 2018 at 1:35 pm

   punten, pak mau nanya kenapa file png saya g kebaca ya? yang di bagian
   const pGajah = document.querySelector('.gajah');
   pGajah.addEventListener('click', function(){
   const pilihanComputer = getPilihanComputer();
   const pilihanPlayer = pGajah.className;
   const hasil = getHasil(pilihanComputer,pilihanPlayer);

   const imgComputer =document.querySelector('.img-komputer');
   imgComputer.setAttribute('src','gambar/' + pilihanComputer + '.png');

   Reply
4. Irfan Gani

   June 29, 2018 at 10:34 pm

   Hadir… sehat, maju, and suksess selalu.

   Reply
5. Harles Bayu Anggara

   July 8, 2018 at 6:03 pm

   sangat membantu untuk yang baru mempelajari DOM

   Reply
6. Yudi Ari Nugroho

   July 23, 2018 at 9:01 am

   mohon maaf kang. kadang. di google chroome saya coba tuh gambarnya ga sesuai dengan hasil dari functionnya. saya coba cek di console.log. function ngasih jawaban 'orang vs orang' hasilnya seri. yg tampil di web 'gajah vs orang' hasilnya seri.
   diliat dari hasilnya mah udah bener. tapi pemanggilan gambarnya kaya kurang cepet gitu. ga pas. tapi kalo di cek secara function di console log udah bener sih
   terus saya coba di mozila dia ga ngalamin hal yg saya uraikan diatas.
   pertanyaannya. apakah web browser chroome terlalu berat atau terlalu ringan ? sampe gambarnya kebablasan ?

   Reply
7. Erwin Perdana

   August 19, 2018 at 1:44 am

   https://codepen.io/erwin-perdana-the-bashful/pen/rZBLZO saya ada masalah di penambahan score nya pak,score yang bertambah tidak bisa menjadi 2,3,dst…hanya menampilkan score dengan nilai 1…walaupun sudah menang berkali-kali.
   kira2 salahnya dimana ya pak?

   Reply
8. RRP Digital

   September 1, 2018 at 4:37 pm

   pak dika kalo misalnya saya mau kasih point setiap kali main, misalnya kalo menang dapet pointnya 3, kalo seri poinnya 1, kalo kalah poinnya 0, dan itu terus bertambah poinnya setiap kali main.. itu pake apa ya?

   Reply
9. Dwi _

   September 16, 2018 at 4:34 am

   Pak sandhi saya ada masalah , Saat saya click Gajah dll , Munculnya bukan SERI , KALAH , ATAU MENANG , Tapi UNDEFINED , Kenapa ya pak ?

   Reply
10. farhan _246

    September 26, 2018 at 9:29 am

    Mau pak Sandhika, pada saat saya klik pilihan player nya, lalu gamang pilihan komputernya gak muncul ?

    Reply
11. Allright channel

    November 12, 2018 at 12:35 pm

    knp yh klo ngambil element sering salah "cannot read property of null"

    Reply
12. Allright channel

    November 12, 2018 at 11:32 pm

    Pak sandhi yang variabel player itu kok gk di deklarasikam dulu?

    Reply
13. gua download

    January 22, 2019 at 4:09 am

    saya begini pak
    function getPilComp(){
    
    let comp = Math.random();
    
    if(comp <= 0.3) return 'gajah';
    
    if(comp > 0.3 && comp <= 0.6) return 'orang';
    
    return 'semut';
    
    }

    let totalMenang = 0;
    
    let totalKalah = 0;
    
    function getHasil(player, comp){
    
    function menang(){
    
    totalMenang++;
    
    const menang = document.querySelector('.player');
    
    menang.innerHTML = totalMenang;
    
    return 'MENANG';
    
    }
    
    function kalah(){

    totalKalah++;
    
    const kalah = document.querySelector('h2');
    
    kalah.innerHTML = totalKalah;
    
    return 'KALAH';
    
    }
    
    if(comp == player) return 'SERI';
    
    if(player == 'gajah') return (comp == 'orang') ? menang() : kalah();
    
    if(player == 'orang') return (comp == 'semut') ? menang() : kalah();
    
    if(player == 'semut') return (comp == 'gajah') ? menang() : kalah();
    
    }

    function putar(){
    
    const imgComputer = document.querySelector('.img-computer');
    
    const gambar = ['gajah', 'orang', 'semut'];
    
    let i = 0;
    
    const waktuMulai = new Date().getTime();
    
    setInterval(function(){
    
    if(new Date().getTime() – waktuMulai > 1000){
    
    clearInterval;
    
    return;
    
    }
    
    imgComputer.setAttribute('src', 'img/' + gambar[i++] + '.png');
    
    if(i == gambar.length) i = 0;
    
    }, 100)
    
    }

    const pilihan = document.querySelectorAll('li img');
    
    pilihan.forEach(function(pil){
    
    pil.addEventListener('click', function(){
    
    const pilComp = getPilComp();
    
    const pilPlayer = pil.className;
    
    const hasil = getHasil(pilPlayer, pilComp);

    putar();

    setTimeout(function(){
    
    const iComp = document.querySelector('.img-computer');
    
    iComp.setAttribute('src', 'img/' + pilComp + '.png');

    const info = document.querySelector('.info');
    
    info.innerHTML = hasil;
    
    }, 1000);
    
    });
    
    });

    Reply
14. annas Januar

    February 2, 2019 at 6:44 am

    Selesai pak tapi agak dimodifikasi jadi batu kertas gunting.
    CSS + HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>Batu Kertas Gunting By Annas</title>
    <style>
    /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    body {
    background-color: gray;
    font-family: arial;
    }
    h1 {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    margin-top: 30px;
    text-transform: uppercase;
    color: blue;
    text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.7778174593px 0.7778174593px 0 #aaaaaa, 1.5556349186px 1.5556349186px 0 #aaaaaa, 2.3334523779px 2.3334523779px 0 #aaaaaa, 3.1112698372px 3.1112698372px 0 #aaaaaa, 3.8890872965px 3.8890872965px 0 #aaaaaa, 4.6669047558px 4.6669047558px 0 #aaaaaa, 5.4447222151px 5.4447222151px 0 #aaaaaa, 6.2225396744px 6.2225396744px 0 #aaaaaa, 7.0003571337px 7.0003571337px 0 #aaaaaa, 7.7781745931px 7.7781745931px 0 #aaaaaa;
    }

    .container {
    width: 600px;
    margin: auto;
    padding: 20px;
    position: relative;
    }

    .area-komputer {
    width: 560px;
    height: 250px;
    margin: 5px auto;
    background-color: red;
    position: relative;
    padding-top: 40px;
    box-sizing: border-box;
    border-radius: 40px 40px 0 0;
    }
    .skorcomputer{
    width: 70px;
    height: 70px;
    border: 5px solid yellow;
    margin: 5px auto;
    background-color: white;
    position: absolute;
    margin-top: -100px;
    margin-left: -360px;
    left: 50%;
    top: 50%;
    border-radius: 30px;
    z-index: 1;
    text-align: center;
    line-height: 60px;
    color: red;
    font-size: 26px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
    .skorplayer{
    width: 70px;
    height: 70px;
    border: 5px solid yellow;
    margin: 5px auto;
    background-color: white;
    position: absolute;
    margin-top: 15px;
    margin-left: -360px;
    left: 50%;
    top: 50%;
    border-radius: 30px;
    z-index: 1;
    text-align: center;
    line-height: 60px;
    color: red;
    font-size: 26px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
    .skor{
    margin: 5px auto;
    position: absolute;
    margin-top: -32.5px;
    margin-left: -370px;
    left: 50%;
    top: 50%;
    font-size: 26px;
    color: black;
    z-index: 1;
    text-align: center;
    line-height: 60px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);

    }

    .area-player {
    width: 560px;
    height: 250px;
    margin: 5px auto;
    background-color: white;
    position: relative;
    border-radius: 0 0 40px 40px;
    }

    .info {
    width: 150px;
    height: 60px;
    border: 5px solid black;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    top: 50%;
    margin-top: -30px;
    background-color: white;
    border-radius: 30px;
    z-index: 1;
    text-align: center;
    line-height: 60px;
    color: black;
    font-size: 26px;
    text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }

    ul {
    padding-top: 80px;
    padding-left: 25px;
    }

    li {
    display: inline-block;
    margin: 0 18px;
    }

    img {
    width: 130px;
    height: 130px;
    display: block;
    margin: auto;
    border-radius: 50%;
    }

    .batu, .kertas, .gunting{
    transition: .3s;
    position: relative;
    top:0;
    cursor: pointer;
    }

    .batu:hover, .gunting:hover, .kertas:hover, .active {
    box-shadow: 0 0 10px 5px limegreen;
    }

    .batu:active, .gunting:active, .kertas:active {
    top: 2px;
    }

    </style>

    </head>
    <body>
    <h1>Batu Kertas Gunting</h1>

    <div class="container">
    <div class="area-komputer">
    <img src="img/batu.png" class="img-computer">
    </div>
    <div class="info"></div>
    <div class='skor'>SCORE</div>
    <div class='skorcomputer'></div>
    <div class='skorplayer'></div>
    <div class="area-player">
    <ul>
    <li>
    <img src="img/batu.png" class="batu">
    </li>
    <li>
    <img src="img/kertas.png" class="kertas">
    </li>
    <li>
    <img src="img/gunting.png" class="gunting">
    </li>
    </ul>
    </div>
    </div>

    </body>
    <script type='text/javascript' src='script.js'>
    </script>
    </html>
    javascript
    function dpilihancomputer(c){
    var c = Math.random();
    if (c <= 0.33) return 'batu';
    if (c <= 0.66) return 'kertas';
    return 'gunting';
    }
    function dhasil(c, p){
    if (c == p) return 'SERI'
    if (p == 'batu' && c == 'gunting' || p == 'gunting' && c == 'kertas' || p == 'kertas' && c == 'batu' )return 'MENANG'
    if (p == 'batu' && c == 'kertas' || p == 'gunting' && c == 'batu' || p == 'kertas' && c == 'gunting') return 'KALAH'

    }
    function putar(){
    const gc = document.querySelector('.img-computer');
    const gambar = ['batu','kertas','gunting'];
    let i = 0;
    const waktuawal = new Date().getTime();
    setInterval(function(){
    if(new Date().getTime() – waktuawal > 1000){
    clearInterval;
    return
    }
    gc.setAttribute('src', 'img/' + gambar[i++] +'.png')
    if (i == gambar.length){
    i = 0
    }
    }, 100)

    }
    const skorplayer = document.querySelector('.skorplayer');
    const skorcomputer = document.querySelector('.skorcomputer');
    const pilih = document.querySelectorAll('li img');
    let sc = 0
    let sp = 0
    pilih.forEach(function(pil) {
    pil.addEventListener('click', function() {
    const pilihancomputer = dpilihancomputer();
    const pilihanplayer = pil.className;
    const hasil = dhasil(pilihancomputer,pilihanplayer);

    putar();
    setTimeout(function(){
    const gc = document.querySelector('.img-computer');
    gc.setAttribute('src', 'img/' + pilihancomputer +'.png');
    const a = document.querySelector('.info');
    a.innerHTML = hasil
    if(hasil == 'MENANG'){
    sp += 1
    skorplayer.innerHTML = sp
    }else if(hasil == 'KALAH'){
    sc += 1
    skorcomputer.innerHTML = sc
    }

    }, 1000);
    });
    });

    Reply
15. YT Apin

    February 17, 2019 at 7:15 am

    terimakasih pak sandi ilmu nya
    semoga bermanfaat

    Reply
16. Tedi Sunjaya

    February 19, 2019 at 11:20 am

    gue buat onlinenya ahhh

    Reply
17. stefenn hahaz

    February 19, 2019 at 1:56 pm

    pak .. tolong dijawab kok forEach saya Error ya dia mncul tulisan pilihan.forEach is not a function , pdhl E syaa ud hruf besar dan const pilihan = document.querySelectorAll("li img") ud bener kan pak kok mncul forEach is not a function ya mohon dijawab pak

    Reply
18. deedyy priayanto

    March 4, 2019 at 10:49 am

    semoga ilmu yang di bagi semakin bermanfaat bagi orang banyak makasih banyak pak

    Reply
19. Muhammad Rafiuddin

    March 17, 2019 at 2:09 pm

    Lihat ini jadi ingat games jaman dulu, game flash di komputer ku.

    Jangan2 bapak yg bikin game2 tsb. Hehe.. Mantap ilmunya pak.

    Reply
20. Vy ende

    April 30, 2019 at 9:26 am

    cara mengatasi uncaught syntaxerror unexpected token gimana ya file jsnya tidak mau di hubungkan

    Reply
21. Prasetyo awe

    May 3, 2019 at 10:34 pm

    Pak sandhika galih emang top,berkat bapak sekarang saya sudah mulai paham mengenai prigramming,sampai-sampai semua playlist yt bapak saya download semua.

    Reply
22. raka sindu

    July 18, 2019 at 2:56 pm

    Keren abiss
    request buat tutorial reactjs dong pak

    Reply
23. Halifah Anaya

    July 26, 2019 at 8:17 am

    pengen cepet-cepet namatin semua video pak sandhika … 🙂

    Reply
24. Riyan Clsg

    July 29, 2019 at 12:55 pm

    sempet ngalamin hal yang sama yakni angka score setelah 1 kembali ke 0, nemu penjelasan dibawah, akhirnya benar, coba bisa di cek
    https://codepen.io/gde-riyan/pen/WVRgBE

    Reply
25. hutomo OSKOJ

    August 16, 2019 at 4:14 am

    channel begini yang seharusnya masuk trending

    Reply
26. mursidin 2000

    September 3, 2019 at 4:04 am

    pak, klo punya saya fungsinya berjalan dan hasilnya juga keliatan. tapi image computernya tidak kelihatan pada saat berpindah.
    awalnya muncul, jika kita klik atau di mainkan image nggak kelihatan, tapi hasilnya muncul (di tau).mohon solusinya pak.

    Reply
27. Muhammad Kevin

    September 15, 2019 at 6:47 pm

    untuk tantangan diakhir video aku ngerjainnya gini, mohon koreksi kalo salah dan kurang efektif

    let hPlayer = 0, hComputer = 0;
    
    const pilihan = document.querySelectorAll('li img');
    
    pilihan.forEach(function(pil) {
    
    pil.addEventListener('click', function() {
    
    const pilComp = getPilihanComp();
    
    const pilPlayer = pil.className;
    
    const hasil = getHasil(pilComp, pilPlayer);
    
    const info = document.querySelector('.info');
    
    // change gambar komputer
    
    putar();
    
    setTimeout(function() {
    
    const imgComp = document.querySelector('.img-komputer');
    
    imgComp.setAttribute('src', 'img/' + pilComp + '.png');
    
    // tampilan hasil
    
    info.innerHTML = hasil;
    
    if(hasil == 'MENANG') hPlayer++;
    
    else if(hasil == 'KALAH') hComputer++;
    
    const p = document.querySelector('.hPlayer');
    
    const c = document.querySelector('.hComputer');
    
    p.innerHTML = 'Player : ' + hPlayer;
    
    c.innerHTML = 'Computer : ' + hComputer;
    
    }, 1000);
    
    info.innerHTML = '';
    
    })
    
    })

    Reply
28. tarantula labaz

    October 17, 2019 at 6:05 am

    Terima kasih banyak pak

    Reply
29. Youkoso

    October 20, 2019 at 7:21 am

    Pake sistem operasi apa pak?

    Reply
30. Muhammad Bayu

    November 4, 2019 at 4:23 pm

    memang panutanQ bapak satu ni <3

    Reply
31. NO NAME

    November 16, 2019 at 2:39 pm

    Makasi pak

    Reply
32. seto kuncoro

    November 26, 2019 at 8:16 am

    Permisi Pak Sandhika, saya mau tanya… jika pada function getHasil(player, comp) saya buat rules-nya jadi :
    if(player == comp) return 'SERI';
    
    if(player == 'gajah') return (comp = 'orang') ? 'MENANG' : 'KALAH';
    
    if(player == 'orang') return (comp = 'semut') ? 'MENANG' : 'KALAH';
    
    if(player == 'semut') return (comp = 'gajah') ? 'MENANG' : 'KALAH';
    kenapa ketika :
    player : gajah
    comp : semut
    hasil : menang ??
    apa ada yg salah dalam rules yg saya buat? mohon petunjuk….

    EDIT :
    setelah saya modifikasi jadi
    if(player == 'gajah) {
    if(comp == 'orang') return 'MENANG';
    return 'KALAH';
    }
    baru dah pas play,
    player : 'gajah'
    comp : 'semut'
    hasil : 'kalah'
    heran saya… padahal harusnya sama aja… 😅
    btw, makasih ilmunya pak 🙏

    Reply