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>JS
main.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);
}
}
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;
}
素材圖片
