Sunday, November 29, 2015

Web Game ; membuat animasi bola

Sering Kita jumpai dalam sebuah sebuah web game terdapat animasi bola yang memantulkan, ketika bola tersebut bersentuhan atau kena batas halaman web atau batas canvas yang sudah di tentukan, sehingga bola tersebut berpindah ke tempat yang sumbunya (x dan y) berbeda. Variabel yang digunakan dalam animasi tersebut adalah canvas, ctx, circleX, circleY circleXModifier dan circleYModifier dan untuk sebagai pengontrol perpindahan bolanya dilakukan fungsi if-else.

Dibawah ini adalah langkah-langkah untuk membuat animasi bola yaitu;
1. Buka notepad atau notepad ++
2. Tuliskan script dibawah ini dalam notepad atau notepad ++

<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;
           
    window.onload = function(){        
                       
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");             
                       
                        setInterval(draw, 1.6);
            };
           
            function draw() {
                        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 = "#FF0000";
                        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 variable global dimana circle adalah posisi x bola, circle adalah posisi y bola, circleXModifier adalah kecepatan x dari bola, dan circle adalah kecepatan y dari bola.
Script yang berwarna hijau menerangkan melakukan penggambaran bola dengan warna merah sesuai dengan lokasi yang dimiliki oleh circleX dan circle.
Script yang berwarna biru merupakan perubahan nilai circle dan circle yang selalu ditambahkan oleh circleXModifier dan cirleYModifier sehingga mengakibatkan bola selalu bergerak.
Script yang berwarna ungu, merupakan cara untuk membatasi posisi x dari bola sehingga tidak keluar dari canvas
Dan Script berwarna orange merupakan cara untuk membatasi posisi y dari bola sehingga tidak keluar dari canvas

3. Simpan script diatas dengan extend atau tipe file “.html”.

4. Setelah disimpan, bukalah file tersebut dan hasilkan seperti gambar diatas.

0 komentar:

Post a Comment

 
Copyright © . Grup Kuliah - Posts · Comments
Powered by Blogger
close
==[ Klik disini 1X ] [ Close ]==