Scrolling Background ~ Pemrograman dan Teknologi

Untuk membuat background, kita tidak perlu banyak gambar, kita bisa menggunakan background yang diulang-ulang atau bisa juga dengan mapping. Untuk kali ini yang akan kita bahas adalah penggunaan gambar untuk membuat background yang ditampilkan berulang-ulang atau bahasa Inggrisnya "Repeating / Scrolling Background". Untuk membuatnya, kita perlu gambar yang tingginya maksimal setinggi kanvas yang akan kita tampilkan di halaman web kita agar tidak ada bagian <canvas> yang kosong. Misalnya, kita akan menggunakan gambar di bawah ini.

<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<img hidden src="background.png" id="gambar">
<canvas width="640" height="640" id="kanvasku">
<SCRIPT>
    var gambar=document.getElementById("gambar");
    var kanvas=document.getElementById("kanvasku");
    var ct=kanvas.getContext("2d");
    var x=0;
    var intervalku=setInterval(function(){
        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;
    }, 50);
</SCRIPT>
</BODY>
<HTML>

Kita menggunakan for supaya jumlah perulangan dari gambar bisa disesuaikan dengan ukuran kanvas walaupun kita bisa juga tidak menggunakan perulangan dan menuliskan drawImage beberapa kali. Selain itu, kita menggunakan interval dan variabel x yang berubah nilainya di tiap interval untuk membuat background tampak seperti bergerak. Oh ya, namai gambar tersebut dengan nama "gambar.png" dan letakkan di folder yang sama dengan HTML-nya.

Selanjutnya, kita akan coba masukkan karakter yang bergerak di tempat ke dalam background tersebut. Nama gambar karakter tersebut dengan nama "animasi.png".

var karakter=document.getElementById("karakter");
var gambar=document.getElementById("gambar");
var kanvas=document.getElementById("kanvasku");
var ct=kanvas.getContext("2d");
var x=0, y=0, xkarakter=4, ykarakter=0;
var jposisi=3;
var pkarakter=0;
karakter.onload=function(){
    var intervalku=setInterval(function(){
        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;
                
        //background
        var panjang=karakter.width/jposisi, tinggi=karakter.height;
        if(pkarakter>=jposisi)pkarakter=0;
        ykarakter=gambar.height-karakter.height;
        ct.drawImage(karakter, pkarakter*panjang, 0, panjang, tinggi, xkarakter, ykarakter, panjang, tinggi);
        pkarakter++;
    }, 50);
}