先不說createJs的起源，基礎什麽的，直接說createJs的用法。先從官網的createJs下載。createJs分為四個部分:easelJs(圖形動畫)、preloadJs(文件加載)、soundJs(音頻控制)和tweenJs(補間動畫)。下載時，建議下載兩個文件，壹個是壓縮文件，供項目中參考，壹個是源文件，用於查看用法、API、demo等。
接下來，開始分析代碼:首先，介紹js文件
？功能？init(){？舞臺？=?新的？createjs。階段(“cas”)；？C_W？=?stage . canvas . width；？C_H？=?stage . canvas . height；var？清單？=?[?{src:"image/man.png "？,?id:“man”}，？{src:"image/ground.png "？,?id:“地”}，？{src:"image/bg.png "？,?id:“BG”}，？{src:"image/high.jpg "？,?id:“高”}，？{src:"image/coins.png "？,?id:“幣”}？]裝載機？=?新的？createjs。load queue(false)；？loader . addevent listener(" complete "？,?handle complete)；？loader . load manifest(manifest)；draw loading()；？}上面用preloadJs中的方法實例化壹個加載器，把要加載的鏡像文件放到manifest中，加載，加載完成後調用回調handleCompelete函數:
？功能？HandleComplete(){//圖片素材加載時，執行此方法？var？manImage？=?loader.getResult("man ")，？低地？=?loader.getResult("ground ")，？高地？=?loader.getResult("high ")，？bgImage？=?loader.getResult("bg ")，？硬幣？=?loader . get result(" coin ")；天空？=?新的？createjs。shape()；？sky.graphics.bf(bgImage)。drawRect(0，0，C_W，C _ H)；？sky.setTransform(0，？0,?1?,?c _ H/bgimage . height)；？stage.addChild(天空)；男人？=?createMan(200，326，man image)；//這個框就是判斷角色的判斷區？匡？=?新的？createjs。shape()；？Kuang . graphics . begin stroke(" rgba(255，0，0，0.5)")。drawRect(0？,?0?,?man.size()。w？,?man.picsize()。h * 1.5)；？//?stage.addChild(匡)；mapHandle(lowground？,?高地？,?硬幣)；createjs。Ticker.timingMode？=?createjs。Ticker . RAF//設置循環方法，可以是requestAnimationFrame或者setTimeout？createjs。ticker . setfps(30)；//舞臺幀率控制？createjs。Ticker.addEventListener("tick "，打勾)；//綁定邏輯生成函數窗口。addeventlistener ("keydown "？,?函數(事件){？事件？=?event | | window.event？if(event . key code = = = 32 & amp；& ampman.jumpNum & ltman.jumpMax){？man . jump()；？}?})?}加載後得到後端的圖像數據，直接用loader.getResult就可以得到，跑酷遊戲需要背景，所以我們實例化壹個天空，然後畫壹個位圖。bf方法是beginBitmapFill的縮寫，就是開始繪制位圖。後面的drawRect是位圖的繪制區域，區域當然是整個畫布，所以是drawrect (0，0，c _ w，c _實例化sky後，直接添加到舞臺上就可以了。下壹步是實例化壹個角色，該角色被自己封裝，稍後在createMan方法中會提到。然後設置舞臺循環。