Viết file main.js

File main.js sẽ là file chứa những đoạn mã ta cần để chạy ứng dụng. Ta sẽ kiểm tra khi nào ứng dụng load xong tất cả các file js thì bắt đầu chạy function onDeviceReady. Trong function onDeviceReady ta sẽ tạo 1 preload và load các file ảnh và âm thanh, khi load xong thì sẽ chạy function windowLoad với argument chỉnh là preload.

window.addEventListener("load", onDeviceReady, false);//Khi load xong tất cả file js ở trên head
function onDeviceReady() { 
        ((typeof(cordova) == 'undefined') && (typeof(phonegap) == 'undefined')) ? BKGM._isCordova=false : BKGM._isCordova=true;            	
        var preload= new BKGM.preload();//preload
        preload.load("image","chim","img/chuotngu.png")
		.load("image","lol_blit","img/LOL/LOL_Blit.png")
		.load("image","lol_hand","img/LOL/LOL_2.png")
		.load("audio","slap","audio/slap.mp3");
		preload.onloadAll= function(){
			windowLoad(preload);  
        }
}

Ta viết tiếp hàm windowLoad

function windowLoad(preload) {
}

Trong hàm windowLoad ta sẽ thêm các thứ cần thiết Tạo mới Game=new BKGM();

var director;
var Game = new BKGM({
    setup:function(){
        director = new BKGM.States();
	var Game = this;
	Game.addStates(director);
	Game.addRes(preload);
    },
    update:function(){
	director.run();
    },
    draw:function(){
        director.draw(Game);
    });
Game.run();

Ta thiết lập các thứ của ứng dụng trong hàm setup, hàm update và draw nhằm thiết lập sự kiện update và draw. Trong hàm setup sẽ là các thiết lập của ta trong ứng dụng, nó chỉ chạy duy nhất 1 lần lúc khởi tạo. Hàm update sẽ chạy liên tục với mỗi bước thời gian luôn cố đinh là 1000/60 ms; Hàm draw sẽ vẽ liên tục ~ requestAnimationFrame Sau khi thiết lập xong, ta sẽ chạy hàm run(); Tiếp đến ta sẽ thêm các lệnh vào trong setup để thiết lập trò chơi. Ở đây ta có

        
director = new BKGM.States();
var Game = this;

director chính là phần quản lý các states của ứng dụng, những gì sẽ vẽ ra và những gì tính toán. Game chỉnh là đối tượng cung cấp những công cụ căn bản cho ta làm việc với framework. Ta sẽ thêm director và dữ liệu preload và Game bằng lệnh

	Game.addStates(director);
	Game.addRes(preload);

Ta sẽ sử dụng states để bắt đầu gọi các sự kiện của game ra. Cú pháp của state là director.state("_tenstates_", [task1,task2]);

        
        director.state("menu", [
	        "background",
	        "scenemenu"				    	
	]);
	director.state("ready", [
		"setup",
		"background",				    	
		"count",
		"charactor.draw"
	]);

để chuyển sang state nào ta sẽ dùng lệnh director.switch("_tenstates_"); ví dụ chuyển sang state ready ta dùng lệnh director.switch("menu"); Các states được gọi ra sẽ chạy lần lượt các task và lặp lại. Task có các dạng chính: taskOnce: chỉ chạy 1 lần duy nhất trong state, và chạy lại nếu được switch đến state đó. Thường dùng cho việc setup các biến lúc đầu như score, thời gian đếm,...

director.taskOnce("setup",function(){
	Game._count=4000;
})

task update và task draw: Được gọi ra liên tục ở các vòng lặp trong state. Khác biệt cách gọi chỉ là thêm biến true ở cuối cho các task dùng để draw. task update luôn có vòng lặp cố đinh là 1000/60 ms, và có giá trị argument là giá trị return của task update trước nó. Phù hợp cho việc tính toàn thuật toán chuyển động, animation, điểm,... task draw chạy liên tục, vòng lặp tùy theo tốc độ máy, có giá trị argument chính là Game. Phù hợp cho việc hiển thị hình ảnh. *Note: chỉ task draw mới vẽ ra hình được, và không nhất thiết task phải có cả task draw lẫn task update

director.task("count",function(){//task update
	Game._count-=1000/60;
	if(Game._count<0){
		director.switch("run");
	}
})
director.task("count",function(){//task draw
	Game.fill(222,222,222,1);
	Game.text("GET READY!",Game.WIDTH/2,Game.HEIGHT/2-100,60,1)
	var count=(Game._count/1000-0.1)>>0;
	var text=(count==0)?"GO":(count+"");
	Game.text(text,Game.WIDTH/2,Game.HEIGHT/2,60,1);
},true);//co bien true

Ngoài ra còn taskActor sẽ nói đến sau. Đến đây ta có thể sử dụng các hàm của BKGM để làm 1 số game đơn giản ko cần hình ảnh như WhiteDrop. Một số hàm vẽ trong BKGM.

//Kich thuoc cua ung dung
Game.WIDTH
Game.HEIGHT

//Do gian so voi kich thuoc khai bao
Game.SCALE

//Cam ung trong luc
Game.gravity={x:0,y:0,z:0};

//Canvas va context chinh
Game.canvas
Game.ctx

//Dat mau nen
Game.background(R, G, B)

//Fill mau
Game.fill(R, G, B, A)

//Ve hinh chu nhat 
Game.rect(x, y, width, height)

//Mode ve hinh chu nhat - input: CENTER hoac DEFAULT
Game.rectMode(input)

//Ve hinh tron
Game.circle( x, y, diameter)

//Ve chu
Game.text( string, x, y, fontSize)

//Ve duong thang
Game.line:function(x1, y1, x2, y2)