Game canvas

EaselJS

http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html

var stage;

        function init() {
  stage = new createjs.Stage(document.getElementById("mycanvas"));

  var spriteSheet = new createjs.SpriteSheet({
   // số lượng frame hiện ra trong mỗi giây
   framerate: 8,
   // hình ảnh
   "images": ["img/runningcat.png"],
   // width: chiều rộng của 1 sprite, height: chiều cao của 1 sprite
   // count: số lượng sprite sẽ được duyệt
   // có thể có thêm regX: 0, regY:0 : là canh tọa độ hiển thị (không bắt buộc)
   "frames": {width:512, height:256, count: 8, regX: 0, regY:0},
   "animations": {
    // 0 - 7 sẽ hiện sprite từ 0 đến 7
    "run": [0, 7, "run", 1],
    // 5 - 7 là sẽ hiện sprite từ 5 - 7 rồi quay lại "run"
    "jump": [5, 7, "run"]
   }
  });

  var grant = new createjs.Sprite(spriteSheet, "run");
  grant.x = 0;
  grant.y = 0;

  stage.addChild(grant);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  createjs.Ticker.addEventListener("tick", stage);
 }


Trang html: 
Thẻ body: thêm vào onload = init();
Trong body, thêm thẻ canvas:



TẠO ÂM THANH CHO CANVAS

        sounds = [
  {src: "R-Damage.ogg", id: 1}
 ];
 createjs.Sound.alternateExtensions = ["mp3"];
        // nếu cho hàm này chạy sẽ gọi function soundLoaded khi âm thanh hoàn tất
 //createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this));
 createjs.Sound.registerSounds(sounds, "audio/");
// gọi hàm này playSound(); ở nơi mà ta cần phát âm thanh, truyền vào id của âm thanh đó
// ví dụ : playSound(1);
function playSound(target) {
 var soundInstance = createjs.Sound.play(target, createjs.Sound.INTERRUPT_NONE, 0, 0, false, 1);
}

Note : Âm thanh gồm 2 file mp3 và ogg




CÁCH LƯU HÌNH ẢNH TRONG 1 LIST

/**
* Khai bao vùng trời, mặt đất
*/
function createMain() {
 manifest = [
  {src: "ground.png", id: "ground"},
  {src: "sky.png", id: "sky"},
  {src: "BlockA0.png", id: "BlockA0"}
 ];

 loader = new createjs.LoadQueue(false);
 loader.addEventListener("complete", handleComplete);
 loader.loadManifest(manifest, true, "img/");
}
​
- chức năng của hàm này là lưu lại những hình ảnh ta cần sử dụng sau này, được lấy từ thư mục /img

Cách sử dụng : 

//khai báo bầu trời
var skyImg = loader.getResult("sky");
sky = new createjs.Shape();
sky.graphics.beginBitmapFill(skyImg).drawRect(0, 0, wCanvas, hCanvas - 79);

stage.addChild(sky);

Note : Khi cần viết 1 hàm nào đê thực hiện chức năng sau này thì hãy viết trong function handleComplete();




CÁCH TẠO BẢN ĐỒ (GAME MÊ CUNG)

ví dụ sử dụng 1 mảng ma trận : 

23224252562826272290
31.2..............23
7.2..24.2.2323.24.25
4.5.2...2.2....2..26
2.9.2.3.0.2.22.2.227
3.6.3.2.9...22....28
4.2.2.8.2825762.2..6
4...2.6.22......22.6
02.2..9.22.2.2.2...9
9..2.22...23.2.2.220
8.22.29.2.3..2.2.223
5.22..0.0.27.2.2...4
6...2.206.40.02922.5
6...5............8.5
232942529628262722.x

'1': nơi hiện ra của nhân vật
'x': exit (hoàn thành vòng chơi)

'.': nơi nhân vật có thể di chuyển được

2 -> 9, 0: là các bức tường
//Loop over every tile position,
function parseLevelLines(levelLine) {
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 20; j++) {
            loadTile(levelLine.charAt((i * 20) + j), j, i);
        }
    }
}
// levelLine là toàn bộ dữ liệu của ma trận

function loadTile(tileType, x, y) {
 switch (tileType) {
  case '.':
   break;
  case '2':
   createTile("BlockA0", x, y);
   break;
                ...
}

function createTile(blockTile, x, y) {
 var blockImg = loader.getResult(blockTile);
 var block = new createjs.Shape();
 block.graphics.beginBitmapFill(blockImg).drawRect(x * 40, y * 32, 40, 32);
 stage.addChild(block);
}

vậy là được 1 bản đồ


ĐỌC BẢN ĐỒ TỪ FILE TXT

/**
* lấy file levels
* 0.txt, 1.txt,...
* mặc định levelIndex = -1
*/
function loadNextLevel() {
 this.levelIndex = (this.levelIndex + 1) % numberOfLevels;

    // Searching where we are currently hosted
    var nextLevelUrl = window.location.href.replace('index.html', '') + "levels/" + this.levelIndex + ".txt";
    try {
        var request = new XMLHttpRequest();
        request.open('GET', nextLevelUrl, true);

        // Little closure
        request.onreadystatechange = function () {
            onLevelReady(this);
        };
        request.send(null);
    }
    catch (e) {
        // Probably an access denied if you try to run from the file:// context
        // Loading the hard coded error level to have at least something to play with
        parseLevelLines(textLevelError);
    }
}

/**
* kiểm tra xem có lấy được file từ server k
* nếu không lây được sẽ tạo maps tỉnh từ code textLevelError
*/
function onLevelReady(eventResult) {
 var newTextLevel = "";

    if (eventResult.readyState == 4) {
        // If everything was OK
        if (eventResult.status == 200)
            newTextLevel = eventResult.responseText.replace(/[\n\r\t]/g, '');
        else {
            console.log('Error', eventResult.statusText);
            // Loading a hard coded level in case of error
            newTextLevel = textLevelError;
        }

        parseLevelLines(newTextLevel);
    }
}