Link : http://mobilestore09b4.freeiz.com/mobilestore/Canvas/AnimatedSprite.htm
ấn từ từ kẻo bug , tớ chưa bắt hết lỗi đâu 
file ảnh nhân vật http://mobilestore09b4.freeiz.com/mobilestore/Canvas/nhan_vat_chinh.png
Đầu tiên tạo class TiledTexture.js , file này để lưu hình ảnh của nhân vật
function TiledTexture(filename, width, height) {
this.image=new Image();
this.image.src=filename;
this.width = width;
this.height = height;
}
1 class Frame.js để lưu cột và hàng của ảnh cho dễ quản lý
function Frame(rows, cols) {
this.rows = rows;
this.cols = cols;
}
class Map.js , tạo 1 ma trận 0 1 0 0 0 0 1 1 trong đó 1 là ô gạch , 0 là đất
method collection để kiểm tra va chạm của nhân vật với ô gạch
method update để vẽ lại màn hình liên tục ( sẽ gọi trong main)
function Map(context){
this.matrix;
this.rectangle;
this.init = function () {
this.matrix=new Array();
this.matrix[0]=new Array("0","1","1","0","1");
this.matrix[1]=new Array("0","1","0","1","0");
this.matrix[2]=new Array("0","0","1","0","1");
this.matrix[3]=new Array("1","0","0","1","0");
this.rectangle=new Array();
widthCanvas=canvas.width;
heightCanvas=canvas.height;
tiledMapWidth=widthCanvas/5;
tiledMapHeight=heightCanvas/4;
for(i=0;i<this.matrix.length;i++){
for(j=0;j<this.matrix[i].length;j++){
if(this.matrix[i][j]=="1"){
x=i*tiledMapHeight;
y=j*tiledMapWidth;
width=tiledMapWidth;
height=tiledMapHeight;
rec={
x:x,y:y,width:width,height:height
};
this.rectangle.push(rec);
}
}
}
}
this.collection=function(x,y,sprite){
x=x+sprite.width/2;
y=y+sprite.height/2;
if(x < 0 || x > canvas.width || y < 0 || y > canvas.height) return true;
for(i=0;i<this.rectangle.length;i++){
rec=this.rectangle[i];
if( (x >= rec.x && x <= rec.x+rec.width) && (y >=rec.y && y <= rec.y+rec.height) ){
return true;
}
}
return false;
}
this.update = function () {
for(i=0;i<this.rectangle.length;i++){
rec=this.rectangle[i];
context.fillRect(rec.x,rec.y,rec.width,rec.height);
}
}
}
class Player.js có nhiệm vụ tạo nhân vật , xác định các hướng đi , xác định va chạm
function Player(context,map){
this.tiled = new TiledTexture("nhan_vat_chinh.png", 30, 30);
this.animatedSprite = new AnimatedSprite(this.tiled, 0, 0);
this.map=map;
this.direction = "unDown";
this.movex = this.animatedSprite.posx;
this.movey = this.animatedSprite.posy;
this.init = function () {
var arrFrameForward = [];
var arrFrameDown = [];
var arrFrameLeft = [];
var arrFrameRight = [];
var unForward = [];
var unDown = [];
var unLeft = [];
var unRight = [];
arrFrameForward.push(new Frame(4, 3)); arrFrameForward.push(new Frame(3, 0)); arrFrameForward.push(new Frame(5, 0));
unForward.push(new Frame(3, 0));
arrFrameDown.push(new Frame(5, 2)); arrFrameDown.push(new Frame(5, 1)); arrFrameDown.push(new Frame(5, 3));
unDown.push(new Frame(5, 1));
arrFrameLeft.push(new Frame(3, 1)); arrFrameLeft.push(new Frame(3, 2)); arrFrameLeft.push(new Frame(3, 3));
unLeft.push(new Frame(3, 2));
arrFrameRight.push(new Frame(4, 1)); arrFrameRight.push(new Frame(4, 0)); arrFrameRight.push(new Frame(4, 2));
unRight.push(new Frame(4, 0));
this.animatedSprite.addArrayFrame("runForward", arrFrameForward);
this.animatedSprite.addArrayFrame("unForward", unForward);
this.animatedSprite.addArrayFrame("runDown", arrFrameDown);
this.animatedSprite.addArrayFrame("unDown", unDown);
this.animatedSprite.addArrayFrame("runRight", arrFrameRight);
this.animatedSprite.addArrayFrame("unRight", unRight);
this.animatedSprite.addArrayFrame("runLeft", arrFrameLeft);
this.animatedSprite.addArrayFrame("unLeft", unLeft);
}
this.update = function () {
this.animatedSprite.animate(this.direction, context);
this.animatedSprite.moveXY(this.movex, this.movey);
}
this.handleInputs = function (keyStates, stateKeyboard) {
if (stateKeyboard == "keydown") {
switch (keyStates) {
case Keys.UP_ARROW:
if(!map.collection(this.movex,this.movey-10,this.tiled)){
this.direction = "runForward";
this.movex = this.movex;
this.movey = this.movey - 10;
}
break;
case Keys.DOWN_ARROW:
if(!map.collection(this.movex,this.movey+10,this.tiled)){
this.direction = "runDown";
this.movex = this.movex;
this.movey = this.movey + 10;
}
break;
case Keys.LEFT_ARROW:
if(!map.collection(this.movex-10,this.movey,this.tiled)){
this.direction = "runLeft";
this.movex = this.movex - 10;
this.movey = this.movey;
}
break;
case Keys.RIGHT_ARROW:
if(!map.collection(this.movex+10,this.movey,this.tiled)){
this.direction = "runRight";
this.movex = this.movex + 10;
this.movey = this.movey;
}
break;
default:
break;
}
}
else if (stateKeyboard == "keyup") {
if (this.direction == "runForward") this.direction = "unForward";
else if (this.direction == "runDown") this.direction = "unDown";
else if (this.direction == "runLeft") this.direction = "unLeft";
else if (this.direction == "runRight") this.direction = "unRight";
this.movex = this.animatedSprite.posx;
this.movey = this.animatedSprite.posy;
}
}
}
Cuối cùng là file HTML thân yêu :)
<html><object id="__IDM__" type="application/x-idm-downloader" width="1" height="1" style="visibility: hidden !important; display: block !important; position: absolute !important; top: 0px !important; left: 0px !important; width: 1px !important; height: 1px !important; border-width: 0px !important;"></object><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="mootools-core-1.4.5-nocompat.js"></script>
<script type="text/javascript" src="TiledTexture.js"></script>
<script type="text/javascript" src="AnimatedSprite.js"></script>
<script type="text/javascript" src="Frame.js"></script>
<script type="text/javascript" src="Player.js"></script>
<script type="text/javascript" src="Map.js"></script>
<script type="text/javascript">
var Keys = {
UP_ARROW: 38,
DOWN_ARROW: 40,
LEFT_ARROW: 37,
RIGHT_ARROW: 39
};
window.addEvent('load', function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var map=new Map(context,canvas);
var player = new Player(context,map);
player.init();
map.init();
var int=setInterval(function () {
canvas.width = canvas.width;
player.update();
map.update();
}, 100);
canvas.onkeydown = function (e) {
player.handleInputs(e.keyCode,"keydown");
}
canvas.onkeyup = function (e) {
player.handleInputs(e.keyCode, "keyup");
}
});
</script>
</head>
<body>
<canvas id="canvas" width="450" height="500" tabindex="0" style="border:1px solid black"></canvas>
<div id="dv"></div>
</body></html>
Xem source bằng trình duyệt luôn nhé , cái này chắc ko cần share :D
http://mobilestore09b4.freeiz.com/mobilestore/Canvas/
CHƠI THỬ NÀOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO