Memindahkan Kotak dan Mengubah Bentuknya dengan jQuery Keycode

Arief Siswanto

2024-11-09 13:48:27

Interaksi menggunakan keyboard adalah salah satu cara efektif untuk membuat website lebih dinamis. Di artikel ini, kita akan membahas cara memindahkan sebuah kotak dan mengubah bentuknya menggunakan jQuery dan keycode. Kotak tersebut akan bergerak sesuai tombol panah dan berubah bentuk saat kita menekan tombol Spasi.

Persiapan Kode

Tambahkan pustaka jQuery ke proyek Anda, kemudian gunakan kode HTML dan JavaScript berikut.

Kode Lengkap


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box{
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: #7eb3f5;
            left: 100px;
            top: 100px;
        }
        .bulat{
            border-radius: 50%;
        }
        .triangle{
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid #7eb3f5;
            background-color: transparent;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).keydown(function (e) {
                const left = parseInt($(".box").css("left").replace("px",""));
                const top = parseInt($(".box").css("top").replace("px",""));
                const maxLeft = $(document).width();
                const maxTop = $(document).height();
                
                if(e.keyCode == 37 && left != 0){
                    $(".box").css("left", left - 100 + "px");
                }
                if(e.keyCode == 38 && top != 0){
                    $(".box").css("top", top - 100 + "px");
                }
                if(e.keyCode == 39 && left + 200 < maxLeft){
                    $(".box").css("left", left + 100 + "px");
                }
                if(e.keyCode == 40 && top + 200 < maxTop){
                    $(".box").css("top", top + 100 + "px");
                }

                if(e.keyCode == 32){
                    if($(".box").hasClass("bulat")){
                        $(".box").removeClass("bulat");
                        if($(".box").hasClass("triangle")){
                            $(".box").removeClass("triangle");
                        }else{
                            $(".box").addClass("triangle");
                        }
                    }else{
                        $(".box").addClass("bulat")
                    }

                    if($(".box").hasClass("bulat") && $(".box").hasClass("triangle")){
                        $(".box").removeClass("bulat triangle");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Penjelasan Kode

HTML dan CSS:
- div dengan kelas box digunakan sebagai objek yang akan kita gerakkan.
- class="bulat" menambahkan gaya lingkaran dengan border-radius: 50%.
- class="triangle" menerapkan gaya segitiga dengan bantuan properti border.
JavaScript dan jQuery:
- Saat menekan tombol panah, nilai left dan top dari elemen box akan diubah.
- Tombol Spasi digunakan untuk mengubah bentuk kotak. Jika kotak berbentuk lingkaran (bulat), kotak akan berubah menjadi segitiga. Jika ditekan lagi, kotak akan kembali ke bentuk awal.

Kesimpulan

Dengan bantuan jQuery, kita bisa menambahkan interaksi keyboard dengan mudah pada elemen-elemen di halaman. Kode ini dapat dikembangkan lebih lanjut untuk membuat navigasi objek di halaman atau menerapkan efek visual lainnya. Semoga bermanfaat, dan selamat mencoba!

Showing 1-2 of 2 items.