//-----------------train.js----------------------------------
var?trainObj=function(){
	this.x=[];
	this.y=[];
	this.alive=[];//bool
	this.ifrun=[];
	this.ifturn=[];
	this.open=new?Image();
	this.close=new?Image();
}
trainObj.prototype.num=1;
trainObj.prototype.init=function(){
	for(var?i=0;i<this.num;i++){
		this.x[i]=50;
		this.y[i]=250;
		this.alive[i]=false;
		this.ifrun[i]=true;
		this.ifturn[i]=false;
		this.open.src="./src/trains.png";
		this.close.src="./src/trains.png";
	}
	console.log("火車初始化完成");
}
trainObj.prototype.draw=function(){
	for(var?i=0;i<this.num;i++){
		if(this.ifrun[i]==true){
			if(this.ifturn[i]==true){

			}else{
				this.x[i]+=0.1*deltaTime;
			}
		}
		ctx1.drawImage(this.close,this.x[i],this.y[i]);
	}
}
//---------------------main.js-----------------------------
var?can1;
var?can2;
var?ctx1;
var?ctx2;
var?lastTime;
var?deltaTime;
var?globW,globH;
var?train;
document.body.onload=game;
function?game(){
	init();
	lastTime=Date.now();
	deltaTime=0;
	gameloop();
}
function?init(){
	//獲得canvas?context
	can1=document.getElementById("canvas1");//繪制紅綠燈?UI??火車??文本框
	ctx1=can1.getContext('2d');
	can2=document.getElementById("canvas2");//繪制背景??軌道
	ctx2=can2.getContext('2d');
	globW=can1.width;
	globH=can1.height;
	train=new?trainObj();
	train.init();
	console.log("初始化完成");
}
function?gameloop(){
	window.requestAnimFrame(gameloop);//setInterval,setTimeout,fps
	var?now=Date.now();
	deltaTime=now-lastTime;
	lastTime=now;
	console.log(deltaTime);
	background();
	train.draw();
}

上面是我的部分代碼

后面是我的程序運(yùn)行的截圖