use EASELJS to building a canvas

canvaseaseljs_base.js

/*------canvas building------*/
var canvas_width,
	canvas_height,
	stage,
	imgs = ['https://cdn.tutsplus.com/net/uploads/2014/01/character2.png','http://images.669pic.com/element_min_new_pic/61/53/95/63/485904e3a0a661184c55b4817f293c18.png!/fw/320/quality/90/unsharp/true/canvas/320x302/compress/true/cvscolor/ffffffff'];

function init(){
	stage = new createjs.Stage("canvas");
	responsiveCanvas();
	canvas_width = stage.canvas.width;
	canvas_height = stage.canvas.height;
	
	//createjs幫助監聽每個新增的物件，確保物件都能夠push到Canvas中
	createjs.Ticker.addEventListener("tick", tick);
	custom_material();
}

// Update stage will render next frame
function tick(event) {
  // Other stuff
	responsiveCanvas();
	obj_animate();
	stage.update(event);
}
/*------canvas resize------*/
var originalW,
	scale = 1,
	parentW,
	parentH;
function responsiveCanvas(){
	parentW = $('canvas').parent().outerWidth();
	parentH =  $('canvas').parent().outerHeight();
	scale =  parentW/originalW;
	$('canvas').attr('width', parentW);
	$('canvas').attr('height', parentH);
}
$(function(){
	init();
	originalW = $('canvas').parent().outerWidth();
})
$(window).resize(function(){
	obj_rwd();
})
/*------canvas custom------*/
var font_size = 20,
	ani_objx = 0,
	groundW = 320,
	groundH = 302,
	animate_obj_oriW = 44,
	animate_obj_oriH = 57,
	animate_objW = animate_obj_oriW*scale,
	animate_objH = animate_obj_oriH*scale;
function custom_material(){
	txt = new createjs.Text("Use keyboard(← /  →) to control the astronauts. ",font_size+"px Times","#fff");
	stage.addChild(txt);
	txt.x = 10;
	txt.y = 10;
	
	ground = new createjs.Bitmap(imgs[1]);
	
	ground.scaleY = canvas_height/groundH;
	ground.scaleX = ground.scaleY;
	ground.x = canvas_width - groundW;
	stage.addChild(ground);
	
	var animate_obj_data = {
		images: [imgs[0]],
		frames: {'height': animate_objH, 'count': 10, 'width': animate_objW},
		animations: {
			run: [0,9]
		}
	};
	animate_obj_img = new createjs.SpriteSheet(animate_obj_data);
	animate_obj = new createjs.Sprite(animate_obj_img);
	animate_obj.framerate = 30;
	animate_obj.x = ani_objx;
	animate_obj.y = canvas_height - animate_objH*2;
	stage.addChild(animate_obj);
	document.onkeydown = KeyDown;
	document.onkeyup = KeyUp;
}
var KEYCODE_SPACE = 32,
	KEYCODE_LEFT = 37,
	KEYCODE_RIGHT = 39,
	isJumping = false,
	moveLeft = false,
	moveRight = false;
	jumpSpeed = 1000,
	xVel = animate_objW/4,
	yVel = 0;
function KeyDown(e) {
	switch (e.keyCode) {
		case KEYCODE_LEFT:
			moveLeft = true;
			animate_obj.play();
			break;
		case KEYCODE_RIGHT:
			moveRight = true;
			animate_obj.play();
			break;
	}
 
}

function KeyUp(e) {
	switch (e.keyCode) {
		case KEYCODE_LEFT:
			moveLeft = false;
			animate_obj.gotoAndStop(0);
			break;
		case KEYCODE_RIGHT:
			moveRight = false;
			animate_obj.gotoAndStop(0);
			break;
			
	}
}


function obj_animate(){
	scale =  parentW/originalW;
	if (moveLeft) {
		if(animate_obj.x>animate_objW/(4*scale)){
			animate_obj.x -= xVel;
		}else{
			animate_obj.x = 0;
		}
        
    }else if (moveRight) {
		if(animate_obj.x<parentW-(animate_objW*scale)){
			animate_obj.x += xVel;
		}else{
			animate_obj.x = parentW-(animate_objW*scale);
		}
	}
}
function obj_rwd(){
	scale =  parentW/originalW;
	
	txt_p = font_size * scale;
	txt.font = txt_p+'px Times';
	ground.scaleY = parentH/groundH;
	ground.scaleX = ground.scaleY;
	ground.x = parentW - groundW*scale;
	
	
	animate_obj.scaleX = scale;
	animate_obj.scaleY = animate_obj.scaleX;
	animate_obj.y = parentH-(animate_objH*2)*scale;

}