createJsçç±æ¥ï¼åºç¡ä»ä¹çå°±ä¸è¯´äºï¼å°±ç´æ¥è¯´createJsçç¨æ³å§ã
é¦å
å°createJså®ç½ä¸è½½ï¼createJsåæeaselJsï¼å¾å½¢å¨ç»ï¼ãpreloadJsï¼æ件å è½½ï¼ãsoundJsï¼é³é¢æ§å¶ï¼ä»¥åtweenJsï¼è¡¥é´å¨ç»ï¼åé¨åï¼å¤§å®¶ä¸è½½çæ¶åï¼å»ºè®®ä¸è½½ä¸¤ä¸ªæ件ï¼ä¸ä¸ªæ¯å缩çæ件ï¼ç¨äºé¡¹ç®ä¸çå¼ç¨ï¼åä¸è½½ä¸ªæºç æ件ï¼ç¨äºæ¥çç¨æ³ãAPIãdemoçãå 为楼主ç®ååªç¨äºeaselJsåpreloadJsï¼æ以ææ¶å°±åªè¯´è¿ä¸¤ä¸ªï¼å
¶å®å°±è¿ä¸¤ä¸ªå·²ç»é常å¤ç¨äºã
æ¥ä¸æ¥å¼å§åæ代ç ï¼
é¦å
å¼å
¥jsæ件
<script src="easeljs-0.7.1.min.js"></script>
<script src="preloadjs-0.4.1.min.js"></script>
ç¶åè¿è¡èå°åå§åæä½ï¼
function init(){
stage = new createjs.Stage("cas");
C_W = stage.canvas.width;
C_H = stage.canvas.height;
var manifest = [
{src:"image/man.png" , id:"man"},
{src:"image/ground.png" , id:"ground"},
{src:"image/bg.png" , id:"bg"},
{src:"image/high.jpg" , id:"high"},
{src:"image/coins.png" , id:"coin"}
]
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete" , handleComplete);
loader.loadManifest(manifest);
drawLoading();
}
ä¸é¢å°±ç¨å°äºpreloadJsä¸çæ¹æ³ï¼å®ä¾åä¸ä¸ªloaderï¼æéè¦å è½½çå¾çæ件æ¾å¨manifestéé¢ï¼è¿è¡å è½½ï¼å è½½å®æåè°ç¨åè°handleCompeleteå½æ°ï¼
function handleComplete(){ //å½å¾çç´ æloadå®åæ§è¡è¯¥æ¹æ³
var manImage = loader.getResult("man"),
lowground = loader.getResult("ground"),
highground = loader.getResult("high"),
bgImage = loader.getResult("bg"),
coins = loader.getResult("coin");
sky = new createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0, 0, 1 , C_H/bgImage.height);
stage.addChild(sky);
man = createMan(200,326,manImage);
//该æ¡ä¸ºå¤å®è§è²çå¤å®åºå
kuang = new createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
// stage.addChild(kuang);
mapHandle(lowground , highground , coins);
createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循ç¯æ¹æ³ï¼å¯ä»¥æ¯requestAnimationFrameæè
æ¯setTimeout
createjs.Ticker.setFPS(30);//èå°å¸§çæ§å¶
createjs.Ticker.addEventListener("tick", tick);//ç»å®èå°æ¯ä¸å¸§çé»è¾åçå½æ°
window.addEventListener("keydown" , function(event){
event = event||window.event;
if(event.keyCode===32&&man.jumpNum<man.jumpMax){
man.jump();
}
})
}
è·å¾å è½½å®æå端çå¾çæ°æ®å°±ç´æ¥ç¨loader.getResultå°±å¯ä»¥è·åäºï¼è·é
·æ¸¸æéè¦ä¸ä¸ªèæ¯ï¼æ以ï¼æ们å®ä¾åä¸ä¸ªskyï¼ç¶åè¿è¡ä½å¾ç»å¶ï¼bfæ¹æ³æ¯beginBitmapFillç缩åï¼è¯¥æ¹æ³å°±æ¯å¼å§ç»å¶ä½å¾ï¼åé¢çdrawRectæ¯ä½å¾çç»å¶åºåï¼åºåå½ç¶æ¯æ´ä¸ªç»å¸å¦ï¼æ以就æ¯drawRect(0,0,C_W,C_H)ãå®ä¾ååºæ¥skyåå°±ç´æ¥æ·»å å°èå°stageéé¢å°±è¡äºãæ¥ä¸æ¥æ¯å®ä¾åä¸ä¸ªè§è²ï¼createManæ¹æ³åé¢æ说ï¼æ¯èªå·±å°è£
çã
ç¶åè¿è¡èå°å¾ªç¯è®¾ç½®ï¼ä¸é¢æ注éäºï¼å°±ä¸è¯´äºã
温馨提示:答案为网友推荐,仅供参考