找了好久的bug 還是不知到哪里錯了 求解
有問題的代碼:
var canvas;
var stage;
var img=new Image();
var sprite;
window.onload=function () {
? ?canvas=document.getElementById("canvas");
? ?stage=new createjs.Stage("canvas");
? ?stage.addEventListener("stagemousedown",clickCanvas);
? ?stage.addEventListener("stagemousemove",moveCanvas);
? ?var data={
? ? ? ?images:["1.jpg"],
? ? ? ?frames:{width:20,height:20,regX:10,regY:10}
? ?};
? ?sprite=new createjs.Sprite(new createjs.SpriteSheet(data));
? ?createjs.Ticker.setFPS(20);
? ?createjs.Ticker.addEventListener("tick",tick);
}
function tick(e) {
? ?var t=stage.getNumChildren();
? ?for (var i=t-1;i>0;i--){
? ? ? ?var s=stage.getChildAt(i);
? ? ? ?s.vY+=2;
? ? ? ?s.vX+=1;
? ? ? ?s.x+=s.vX;
? ? ? ?s.y+=s.vY;
? ? ? ?s.scalex=s.scaleY=s.scalex+s.vS;
? ? ? ?s.alpha+=s.vA;
? ? ? ?if (s.alpha<=0||s.y>canvas.height){
? ? ? ? ? ?stage.removeChildAt(i);
? ? ? ?}
? ?}
? ?stage.update(e);
? ?
}
function clickCanvas(e) {
? ?addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);
? ?
}
function moveCanvas(e) {
? ?addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1);
? ?
}
function addS(count,x,y,speed) {
? ?for (var i=0;i<count;i++){
? ? ? ?var s=sprite.clone();
? ? ? ?s.x=x;
? ? ? ?s.y=y;
? ? ? ?s.alpha=Math.random()*0.5+0.5;
? ? ? ?s.scaleX=s.scaleY=Math.random()+0.3;
? ? ? ?var a=Math.PI*2*Math.random();
? ? ? ?var v=(Math.random()-0.5)*30*speed;
? ? ? ?s.vX=Math.cos(a)*v;
? ? ? ?s.vY=Math.sin(a)*v;
? ? ? ?s.vS=(Math.random()-0.5)*0.2;
? ? ? ?s.vA=-Math.random()*0.05-0.01;
? ? ? ?stage.addChild(s);
? ?}
? ?
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
以下是正確的代碼 可是自己找了很久的bug 還是沒有找到 不知道哪里錯了
var canvas;
var stage;
var img=new Image();
var sprite;
window.onload=function () {
? ?canvas=document.getElementById("canvas");
? ?stage=new createjs.Stage("canvas");
? ?stage.addEventListener("stagemousedown",clickCanvas); ?//點擊畫布
? ?stage.addEventListener("stagemousemove",moveCanvas); ? //在畫布上移動v
? ?var data={ ? //data序列 ?數(shù)據(jù)
? ? ? ?images:["1.jpg"],
? ? ? ?frames:{width:20,height:20,regX:10,regY:10} ?//reg? 變化區(qū)域?這里怎么理解呢???
? ?};
? ?sprite=new createjs.Sprite(new createjs.SpriteSheet(data)); ?//css精靈 網(wǎng)頁圖片應(yīng)用處理方式 它將一個頁面涉及到的所有零星圖片都包含到一張大圖中去
? ?createjs.Ticker.setFPS(20); //設(shè)置和獲取getFPS幀頻的函數(shù)
? ?createjs.Ticker.addEventListener("tick",tick);
}
function tick(e) { ? //最后編寫
? ?var t=stage.getNumChildren();// 移動或者點擊時候所產(chǎn)生的數(shù)量
? ?for (var i=t-1;i>0;i--){ ? //對每一個進(jìn)行設(shè)計 ; 不懂這個循環(huán)???
? ? ? ?var s=stage.getChildAt(i);
? ? ? ?s.vY+=2; ? //橫坐標(biāo)較寬
? ? ? ?s.vX+=1; ?//
? ? ? ?s.x+=s.vX; //
? ? ? ?s.y+=s.vY; ? //每一個小方塊出現(xiàn)的位置
? ? ? ?s.scaleX=s.scaleY=s.scaleX+s.vS; ?//同時變化 不變形
? ? ? ?s.alpha+=s.vA;
? ? ? ?if (s.alpha<=0||s.y>canvas.height){ ?//透明度<=0 或者 超出容器的的底部 >height ?//消除小方塊
? ? ? ? ? ?stage.removeChildAt(i); ?//移除當(dāng)前的
? ? ? ?}
? ?}
? ?stage.update(e); ?//舞臺更新
}
function clickCanvas(e) {
? ?//function addS(count,x,y,speed) ?點擊事件/ /
? ?addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2); ?//數(shù)量多
? ?
}
function moveCanvas(e) {
? ?//function addS(count,x,y,speed) ?點擊事件//
? ?addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1); ? //數(shù)量少
? ?
}
function addS(count,x,y,speed) { ?//首先定義移動和點擊的事件
? ?for (var i=0;i<count;i++){
? ? ? ?var s=sprite.clone();//clone克隆/復(fù)制方法作用是執(zhí)行后將復(fù)制一份當(dāng)前對象,并返回
? ? ? ?s.x=x; ?//出現(xiàn)的位置 ?X
? ? ? ?s.y=y; ?// ? Y
? ? ? ?s.alpha=Math.random()*0.5+0.5; ?// 透明度 alpha; math.random 隨機數(shù); 產(chǎn)生的數(shù)乘以 0.5 半透明 值越小越透明 ; +0.5 變化慢 值越大越慢
? ? ? ?s.scaleX=s.scaleY=Math.random()+0.3;//scale 縮放 x=y 不變形 ?;0.3 防止太小
? ? ? ?var a=Math.PI*2*Math.random(); ?//PI半圓; *2 全圓 ;滑動的曲線 ;變化的范圍 ?//arc ?。ǘ龋?
? ? ? ?var v=(Math.random()-0.5)*30*speed;//速度 v ;點擊速度和滑動速度不一樣 ; -0.5 范圍小 速度慢一半 ?;*30 表示有30個同樣的小方塊出現(xiàn)
? ? ? ?s.vX=Math.cos(a)*v; ?// X坐標(biāo); +y坐標(biāo) 得到曲線的變化 ?這里怎么理解呢?
? ? ? ?s.vY=Math.sin(a)*v; ? // Y坐標(biāo) ? 同上 ? ?這里怎么理解呢?
? ? ? ?s.vS=(Math.random()-0.5)*0.2; ?//scale 縮放 -0.5 總體值越小縮放越?。?//變化的小方塊
? ? ? ?s.vA=-Math.random()*0.05-0.01; //alpha ?透明度 ?總體值越大越透明 越好看;-0.01 速度慢 ? //變化的小方塊
? ? ? ?stage.addChild(s); ?//切記 添加在舞臺
? ?}
? ?
}
2016-10-31
你想呈現(xiàn)出什么樣子