Kumpulan Informasi Loker dan Kuliah di Indonesia

Saturday, December 5, 2015

Web Game : Membuat Animasi Warna

10:25:00 PM Posted by Abdul Rohman No comments
Sebuah web yang menggunakan pemrograman bahasa HTML 5, warna merupakan hal menarik untuk ditampilkan baik yang terdapat pada objek maupun background. Apalagi warna tersebut Kita buatkan animasinya yang menambahkan variasi. Untuk membuat animasi warna diterapkan konsep warna RGB yang didalam ada nilai mulai dari 0 sampai dengan 255, dan membuat fungsi if – else untuk pergerakan objek.

Dibawah ini adalah contoh langkah-langkah untuk membuat animasi warna dengan menggunakan bentuk bulat atau bola adlah sebagai berikut:

1. Buka program editor (notepad, notepad ++ atau dengan yang lain)
2. Tuliskan script dibawah dalam aplikasi editor
<html>
    <head>
        <style>
        canvas {
            border-width: 1px;
                                    border-style: solid;       
        }
        </style>
        <script>  
           
            var canvas;
            var ctx;
            var circleX = 70;
            var circleY = 70;
            var circleXModifier = 2;
            var circleYModifier = 2;
            var scale = 1.0;
            var r = 255;     
            var g = 255;
            var b = 255;
           
    window.onload = function(){        
                       
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");             
                       
                        setInterval(draw, 1.6);
            };
           
            function draw() {
                        r = Math.round(Math.random() * 255);
                        g = Math.round(Math.random() * 255);
                        b = Math.round(Math.random() * 255);
                       
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                                               
                        ctx.beginPath();
                        ctx.arc(circleX, circleY, 70, 0, 2 * Math.PI, false);
                        ctx.fillStyle = "rgb("+r+","+g+","+b+")";
                        ctx.fill();
                       
                        circleX += circleXModifier;
                        circleY += circleYModifier;
                       
                        if (circleX >= canvas.width-70)
                                    circleXModifier = -2;
                        else if (circleX < 70)
                                    circleXModifier = 2;
                       
                        if (circleY >= canvas.height-70)
                                    circleYModifier = -2;
                        else if (circleY < 70)
                                    circleYModifier = 2;                          
            }
        </script>
    </head>
    <body>
    <center>
        <canvas id="myCanvas" width="640" height="480">
        </canvas>
    </center>
    </body>
</html>

Keterangan:
Script yang berwarna merah , yaitu untuk melakukan pembangkitan nilai rgb dari Math.random() range 0 sampai dengan 255
Script yang berwarna biru, hasil pembangkitan nilai rgb Kita masukkan dalam style sehingga warna bola ( bentuk ) akan berubah secara berulang-ulang atau terus menerus.
3. Simpan Script tadi dengan menggunakan extend atau tipe file “.html”

4. Nah sekarang Bisa Kita coba dengan membuka file html diatas. Dan hasilnya seperti gambar diatas.

0 komentar:

Post a Comment