黑马程序员技术交流社区

标题: 简单的鼠标响应事件 [打印本页]
作者: 南国之南    时间: 2016-7-8 22:58
标题: 简单的鼠标响应事件
今天有看到一个一个挺好用的鼠标事件，就是鼠标移动或者点击时会有很多小星星散出来，就跟着敲了一下代码，但是完了发现界面不显示，哪路大神给我指点一下，谢谢
<body >
        <script src="easeljs-0.8.2.min.js"></script>
        <canvas id="canvas" width=1000px height=500px></canvas>
        <script src="mouse.js"></script>
</body>
这里边的easeljs-0.8.2.min.js是引用的createjs中的文件
js代码部分：
mouse.js:
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:["0.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.vX +=1;
                        s.vY +=2;
                        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.hieght){
                                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;//scale
                        s.vA=-Math.random()*0.05-0.01;//alpha
                        stage.addChild(s);
                }
        }
作者: 小柴天雅    时间: 2017-3-5 17:46
收藏了，谢啦



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2