找了好久的bug 还是不知到哪里错了 求解

来源:7-4 返回星期方法

慕数据9493197

2016-10-31 13:17

有问题的代码:

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序列  数据
       images:["1.jpg"],
       frames:{width:20,height:20,regX:10,regY:10}  //reg? 变化区域?这里怎么理解呢???

   };

   sprite=new createjs.Sprite(new createjs.SpriteSheet(data));  //css精灵 网页图片应用处理方式 它将一个页面涉及到的所有零星图片都包含到一张大图中去
   createjs.Ticker.setFPS(20); //设置和获取getFPS帧频的函数
   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){  //透明度<=0 或者 超出容器的的底部 >height  //消除小方块
           stage.removeChildAt(i);  //移除当前的
       }

   }

   stage.update(e);  //舞台更新
}

function clickCanvas(e) {
   //function addS(count,x,y,speed)  点击事件/ /
   addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);  //数量多
   
}

function moveCanvas(e) {
   //function addS(count,x,y,speed)  点击事件//
   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();//clone克隆/复制方法作用是执行后将复制一份当前对象,并返回
       s.x=x;  //出现的位置  X
       s.y=y;  //   Y
       s.alpha=Math.random()*0.5+0.5;  // 透明度 alpha; math.random 随机数; 产生的数乘以 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个同样的小方块出现

       s.vX=Math.cos(a)*v;  // X坐标; +y坐标 得到曲线的变化  这里怎么理解呢?
       s.vY=Math.sin(a)*v;   // Y坐标   同上    这里怎么理解呢?
       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);  //切记 添加在舞台


   }

   
}

















写回答 关注

1回答

  • qq_蘋果绿乀微笑_0
    2016-10-31 14:16:59

    你想呈现出什么样子

    慕数据949...

    一个比较炫酷的效果 当点击和滑动鼠标的时候 会出现一系列的小方块

    2016-11-01 12:43:25

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题