html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>star</title> </head> <body> <div> <canvas id="canvas" width = "800" height="600"></canvas> </div> <script src="js/main.js"></script> <script type="text/javascript" src="js/commonFunctions.js" ></script> <script type="text/javascript" src="js/starts.js" ></script> </body> </html> JSmain.js
var can; var ctx; var w,h; var girlPic = new Image(); var starPic = new Image(); var num = 60; var stars = []; var lastTime,deltaTime; var switchy; var life = 0; function init(){ can = document.getElementById("canvas"); ctx = can.getContext("2d"); w = can.width; h = can.height; document.addEventListener("mousemove",mousemove,false); girlPic.src = "img/girl.jpg"; starPic.src = "img/star.png"; for(var i=0;i<num;i++){ var obj = new starObj(); stars.push(obj); stars[i].init(); } lastTime = Date.now(); gameloop(); } document.body.onload = init; function gameloop(){ window.requestAnimationFrame(gameloop); var now = Date.now(); deltaTime = now - lastTime; lastTime = now; drawBackground(); drawGril(); drawStars(); aliveUpdate(); } function drawBackground(){ ctx.fillStyle ="#393550"; ctx.fillRect(0,0,w,h); } function drawGril(){ //drawImage(img,x,y,width,height) ctx.drawImage(girlPic,100,150,600,300); } function mousemove(e){ if(e.offsetX||e.layerX){ var px = e.offsetX == undefined?e.layerX:e.offsetX; var py = e.offsetY == undefined?e.layerY:e.offsetY; //判断px py在范围内 if(px>100&&px<700&&py>150&&py<450){ switchy =true; } else{ switchy =false; } // console.log(switchy); } } commonFunctions.js window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { return window.setTimeout(callback, 1000 / 60); }; })(); stars.js var starObj = function(){ this.x; this.y; this.picNo; this.timer; this.xSpd; this.ySpd; } starObj.prototype.init = function(){ this.x = Math.random()*600+100; this.y = Math.random()*300+150; this.picNo =Math.floor(Math.random()*7); this.timer = 0; this.xSpd = Math.random()*3-1.5; this.ySpd = Math.random()*3-1.5; } starObj.prototype.update = function(){ this.x += this.xSpd*deltaTime*0.01; this.y += this.ySpd*deltaTime*0.01; //this.x 超过范围 if(this.x<100||this.x>693){ this.init(); return; } //this.y超出范围 重生 if(this.y<150||this.y>443){ this.init(); return; } this.timer +=deltaTime; if(this.timer>60){ this.picNo += 1; this.picNo %= 7; this.timer = 0; } } starObj.prototype.draw = function(){ // save() ctx.save(); //globalAlpha 全局透明度 ctx.globalAlpha = life; //drawImage(img,sx,sy,swidth,sheight,x,y,width,height); ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7); //restore() ctx.restore(); } function drawStars(){ for(var i = 0;i<num;i++){ stars[i].update(); stars[i].draw(); } } function aliveUpdate(){ if(switchy){ //in area //show stars life +=0.3*deltaTime*0.05; if(life>1){ life = 1; } }else{ //out area //hide stars life -=0.3*deltaTime*0.05; if(life<0){ life=0; } 效果图
素材图片
