包含createjs繪製路徑的詞條

本文目錄一覽：

• 1、如何在網頁點擊按鈕創建一個js文件
• 2、如何使用Createjs來編寫HTML5遊戲EaselJS簡介
• 3、如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫

如何在網頁點擊按鈕創建一個js文件

input type=”button” onclick=”createjs()”/

function createjs()

{

var fso,f1

fso=new ActiveXObject(“Scripting.FileSystemObject”);

f1=fso.CreateTextFile(“e:\\js.js”,true); //路徑自行定義，也可以能過參數

f1.WriteLine(“js代碼”);

f1.WriteBlankLines(1);

f1.Close();

}

如何使用Createjs來編寫HTML5遊戲EaselJS簡介

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

,

,

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===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

獲得載入完成後端的圖片數據就直接用loader.getResult就可以獲取了，跑酷遊戲需要一個背景，所以，我們實例化一個sky，然後進行點陣圖繪製，bf方法是beginBitmapFill的縮寫，該方法就是開始繪製點陣圖，後面的drawRect是點陣圖的繪製區域，區域當然是整個畫布啦，所以就是drawRect(0,0,C_W,C_H)。實例化出來sky後就直接添加到舞台stage裡面就行了。接下來是實例化一個角色，createMan方法後面有說，是自己封裝的。

然後進行舞台循環設置，上面有注釋了，就不說了。

如何使用Createjs來編寫HTML5遊戲TweenJS和Tick動畫

CreateJS包含4個部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了開發Html5遊戲的所有功能，僅僅使用EaselJS幾乎可以完成所有的開發工作，其餘三項可以看作EaselJS的輔助工具。比如響應tick事件然後改變元素坐標就可以實現動畫功能，而使用TweenJS來創建補間動畫，則可以省去你很多代碼，簡化了操作。

一個簡單的tick動畫看起來是這樣的：

var stage, circle;  

   function init(){  

       stage = new createjs.Stage(document.getElementById(‘game’));  

       createjs.Ticker.addEventListener(“tick”, handleTick);  

       createjs.Ticker.setFPS(60);  

       circle = new createjs.Shape();  

       circle.graphics.f(“red”).dc(0,0,50);  

       circle.x = 0;  

       circle.y = 100;  

       stage.addChild(circle);  

       circle.addEventListener(“click”, function(event){  

           createjs.Ticker.setPaused(!createjs.Ticker.getPaused());  

       });  

   }  

   function handleTick(event){  

   if(!event.paused){  

       circle.x +=5;  

       if(circle.x  1000){  

           circle.x = 0;  

       }  

   }  

       stage.update();  

   }