Melompat dan Jatuh ~ Pemrograman dan Teknologi

Untuk menampilkan gerakan jatuh, kita tidak bisa hanya menambah atau mengurangi posisi koordinat y dengan nilai yang sama. Kecepatan saat jatuh sudah seharusnya bertambah saat semakin dekat dengan permukaan tanah. Dalam game, kita juga perlu mempertimbangkan keberadaan gravitasi saat menampilkan benda yang jatuh.

Anggap saja kita punya gambar karakter seperti di bawah ini dengan nama "animasi.png". Selanjutnya, kita akan menuliskan source code yang membuat karakter tersebut melompat dan jatuh saat mouse diklik.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas width="640" Height="640" id="kanvas" style="background-color:pink;border:1px black solid">
        Canvas tidak dapat ditampilkan
    </canvas>
  <script>
    var kanvas=document.getElementById("kanvas");
    var ct=kanvas.getContext("2d");
    var gambar=new Image();
    gambar.src="animasi.png";
    gambar.onload=function(){
    var lompat=0, gravitasi=0.2, kecepatan=0;
    var n=3, x=0, y=kanvas.height-gambar.height;
    var batas=y;
    var panjang=gambar.width/n, tinggi=gambar.height;
        ct.drawImage(gambar, 0, 0, panjang, tinggi, x, y, panjang, tinggi);
        kanvas.onclick=function(e){
            if(lompat==0){
                y-=75;
                lompat=1;
                kecepatan=0.2;
            }
        }
        
        setInterval(function(){
            if(lompat!=0 && y<batas){
                y+=kecepatan;
                kecepatan+=gravitasi;
            }else{
                lompat=0;
                y=batas;
            }
            ct.clearRect(0, 0, kanvas.width, kanvas.height);
            ct.drawImage(gambar, 0, 0, panjang, tinggi, x, y, panjang, tinggi);
        }, 25);
    }
  </script>
</body>
</html>

Seperti biasa, kita menggunakan setInterval untuk mengatur waktu perubahan tampilan. Kita juga menggunakan onclick untuk menentukan apa yang harus dilakukan saat mouse diklik. Karena ada tiga "potong" karakter dalam gambarnya, maka kita perlu mengatur bagian yang ditampilkan.

Untuk mencoba kode HTML dan script di atas, copas dan simpan kodenya ke dalam file HTML. Ingat, gambar diletakkan di folder yang sama dengan file HTML-nya!

Sekarang kita tambahkan latar belakang dan sedikit gerakan. Ubah script dari kode HTML di atas jadi seperti di bawah ini.

var karakter=document.getElementById("karakter");
var gambar=document.getElementById("gambar");
var kanvas=document.getElementById("kanvasku");
var ct=kanvas.getContext("2d");
var main=0;
function mainkan(){
    var lompat=0, perubahan=0.5, kecepatan=0;
    var n=3, x=0, y=0;
    var jposisi=3;
    var pkarakter=0;
    var panjang=gambar.width/n, tinggi=gambar.height;
    var xkarakter=4;
    var ykarakter=gambar.height-karakter.height;
    var batas=ykarakter;
    
    kanvas.onclick=function(e){
        if(lompat==0){
            ykarakter-=75;
            lompat=1;
            kecepatan=0.5;
        }
    }
    
    setInterval(function(){
        if(lompat!=0 && ykarakter<batas){
            ykarakter+=kecepatan;
            kecepatan+=perubahan;
        }else{
            lompat=0;
            ykarakter=batas;
        }
        
        ct.clearRect(0, 0, kanvas.width, kanvas.height);
        
        //background
        n=kanvas.width/gambar.width+2;
        if(x>=gambar.width)x=0;
        for(var i=0;i<n;i++){
            ct.drawImage(gambar, i*gambar.width-x, 0);
        }
        x+=4;
        
        var panjang=karakter.width/jposisi, tinggi=karakter.height;
        if(pkarakter>=jposisi)pkarakter=0;
        ct.drawImage(karakter, pkarakter*panjang, 0, panjang, tinggi, xkarakter, ykarakter, panjang, tinggi);
        pkarakter++;
    }, 50);
}
gambar.onload=function(){
    main++;
    if(main>=2)mainkan();
}
karakter.onload=function(){
    main++;
    if(main>=2)mainkan();
}