var WINDOW_WIDTH;
var WINDOW_HEIGHT;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var deltaTime;
var lastTime;

var starPic = new Image();

var stars = [];
var num = 30;
var starObj=function(){
? ?this.x;
? ?this.y;
? ?this.timer;
? ?this.picNo;
}
starObj.prototype.init=function(){
? ?this.x=Math.random()*canvas.width;
? ?this.y=Math.random()*canvas.height;
? ?this.picNo=Math.floor(Math.random()*7);
? ?this.timer=0;
}
starObj.prototype.update=function(){
? ?this.timer+=deltaTime;
? ?if(this.timer>30){
? ? ? ?this.picNo+=1;
? ? ? ?this.picNo%=7;
? ?}
}
starObj.prototype.draw=function(){
? ?context.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
}
window.onload=function() {
? ?WINDOW_WIDTH = document.body.scrollWidth || document.documentElement.scrollWidth;
? ?WINDOW_HEIGHT = document.body.scrollHeight || document.documentElement.scrollHeight;
? ?canvas.width = WINDOW_WIDTH;
? ?canvas.height = WINDOW_HEIGHT;

? ?context.fillStyle='black';
? ?context.fillRect(0,0,canvas.width,canvas.height);

? ?starPic.src='image/star.png';

? ?for(var i=0;i<num;i++){
? ? ? ?var obj=new starObj();
? ? ? ?stars.push(obj);
? ? ? ?stars[i].init();
? ?}
? ?lastTime=Date.now();
? ?gameLoop();
}
function gameLoop(){
? ?window.requestAnimationFrame(gameLoop);
? ?var now=Date.now();
? ?deltaTime=now-lastTime;
? ?lastTime=now;

? ?drawStars();
}
function drawStars(){
? ?for(var i=0;i<num;i++){
? ? ? ?stars[i].update();
? ? ? ?stars[i].draw();
? ?}
}