                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /HTML5小游戲---愛心魚（上）

有沒有大神分享一下完整版代碼的？菜鳥求幫助！??！

有沒有大神分享一下完整版代碼的？菜鳥求幫助?。。D片一直顯示在左下角，并且報錯ane.js，提示Uncaught TypeError: Object #<CanvasRenderingContext2D> has no method 'LineTO' 。

小智啊

2017-10-19

源自：HTML5小游戲---愛心魚（上） 1-2

關注問題我要回答

1385

操作

收起

3 回答

性別男愛好女
2017-12-20

我靠，復制上去腫么成這鬼樣子了。。。。

0 回復有任何疑惑可以回復我~

收起回答

性別男愛好女
2017-12-20

var?can1;
var?can2;

var?ctx1,ctx2;

var?lastTime;
var?deltaTime;

var?mx,my;

var?bgpic=new?Image();
$(function(){
	init();
	lastTime=Date.now();
	deltaTime=0;
	gameloop();
});

function?init(){
	can1=document.getElementById('cs1');
	can2=document.getElementById('cs2');
	ctx1=can1.getContext('2d');
	ctx2=can2.getContext('2d');
	
	can1.addEventListener('mousemove',onMouseMove,false);
	
	bgpic.src='./img/background.jpg';
	aneObj.init();
	fruit.init();
	dayu.init();
	xiaoyu.init();
	
	mx=can1.width/2;
	my=can1.height/2;
}

function?gameloop(){
	window.requestAnimationFrame(gameloop);
	var?now=Date.now();
	deltaTime=(now-lastTime>20?18:now-lastTime);
	lastTime=now;
	ctx2.drawImage(bgpic,0,0,can1.width,can1.height);
	aneObj.draw();
	fruit.draw();
	fruit.fruitMonitor();
	
	ctx1.clearRect(0,0,can1.width,can1.height);
	dayu.draw();
	xiaoyu.draw();
	chi.chile();
}

function?onMouseMove(e){
	if(e.offSetX||e.layerX){
		mx=e.offSetX==undefined?e.layerX:e.offSetX;
		my=e.offSetY==undefined?e.layerY:e.offSetY;
	}
}

window.aneObj={
	param:{
		x:[],
		len:[],
		num:50
	},
	
	init:function(){
		for(i=0;i<aneObj.param.num;i++){
			aneObj.param.x[i]=i*16+Math.random()*20;
			aneObj.param.len[i]=200+Math.random()*50;
		}
	},
	
	draw:function(){
		ctx2.save();
		ctx2.globalAlpha=0.6;
		ctx2.lineWidth=20;
		ctx2.lineCap="round";
		ctx2.strokeStyle="#3b154e";
		for(i=0;i<aneObj.param.num;i++){
			ctx2.beginPath();
			ctx2.moveTo(aneObj.param.x[i],can1.height);
			ctx2.lineTo(aneObj.param.x[i],can1.height-aneObj.param.len[i]);
			ctx2.stroke();
		}
		ctx2.restore();
	}
}

window.fruit={
	param:{
		alive:[],
		x:[],
		y:[],
		spd:[],
		l:[],
		max:[],
		orange:new?Image(),
		blue:new?Image(),
		num:30,
		thisImg:[]
	},
	
	init:function(){
		for(i=0;i<fruit.param.num;i++){
			fruit.param.alive[i]=false;
			fruit.param.x[i]=0;
			fruit.param.y[i]=0;
			fruit.param.spd[i]=Math.random()*0.017+0.003;
			fruit.param.max[i]=Math.random()*21;
			fruit.param.thisImg[i]=new?Image();
			for(;true;){
				if(fruit.param.max[i]<10){
					fruit.param.max[i]=Math.random()*21;
				}else{
					break;
				}
			}
		}
		fruit.param.orange.src='./img/fruit.png';
		fruit.param.blue.src='./img/blue.png';
	},
	
	draw:function(){
		for(i=0;i<fruit.param.num;i++){
			if(fruit.param.alive[i]){
				if(fruit.param.l[i]<=fruit.param.max[i]){
					fruit.param.l[i]+=fruit.param.spd[i]*deltaTime;
				}else{
					fruit.param.y[i]-=fruit.param.spd[i]*7*deltaTime;	
				}
				ctx2.drawImage(fruit.param.thisImg[i],fruit.param.x[i]-fruit.param.l[i]/2,fruit.param.y[i]-fruit.param.l[i]/2,fruit.param.l[i],fruit.param.l[i]);
				if(fruit.param.y[i]<0){
					fruit.param.alive[i]=false;
				}
			}
		}
	},
	
	born:function(i){
		fruit.param.thisImg[i].src=Math.random()>0.1?fruit.param.orange.src:fruit.param.blue.src;
		var?aneObjid=Math.floor(Math.random()*aneObj.param.num);
		fruit.param.x[i]=aneObj.param.x[aneObjid];
		fruit.param.y[i]=can1.height-aneObj.param.len[aneObjid];
		fruit.param.l[i]=0;
		fruit.param.alive[i]=true;
	},
	
	fruitMonitor:function(){
		var?num=0;
		for(i=0;i<fruit.param.num;i++){
			if(fruit.param.alive[i]){
				num++;
			}
		}
		if(num<15){
			fruit.sendFruit()
			return;
		}
	},
	
	sendFruit:function(){
		for(i=0;i<fruit.param.num;i++){
			if(!fruit.param.alive[i]){
				fruit.born(i);
				return;
			}
		}
	}
}

window.dayu={
	param:{
		x:0,
		y:0,
		bigEye:new?Image(),
		bigBody:new?Image(),
		bigTail:new?Image(),
		angle:0
	},
	
	init:function(){
		dayu.param.x=can1.width/2;
		dayu.param.y=can1.height/2;
		dayu.param.bigEye.src='./img/bigEye0.png';
		dayu.param.bigBody.src='./img/bigSwim0.png';
		dayu.param.bigTail.src='./img/bigTail0.png';
	},
	
	draw:function(){
		dayu.param.x=lerpDistance(mx,dayu.param.x,0.98);
		dayu.param.y=lerpDistance(my,dayu.param.y,0.99);
		var?daltaY=my-dayu.param.y;
		var?daltaX=mx-dayu.param.x;
		var?beta=Math.atan2(daltaY,daltaX)+Math.PI;
		
		dayu.param.angle=lerpAngle(beta,dayu.param.angle,0.6);
		
		ctx1.save();
		ctx1.translate(dayu.param.x,dayu.param.y);
		ctx1.rotate(dayu.param.angle);
		
		ctx1.drawImage(dayu.param.bigBody,-dayu.param.bigBody.width/2,-dayu.param.bigBody.height/2);
		ctx1.drawImage(dayu.param.bigTail,-dayu.param.bigTail.width/2+30,-dayu.param.bigTail.height/2);
		ctx1.drawImage(dayu.param.bigEye,-dayu.param.bigEye.width/2,-dayu.param.bigEye.height/2);
		ctx1.restore();
	}
}

window.xiaoyu={
	param:{
		x:0,
		y:0,
		bigEye:new?Image(),
		bigBody:new?Image(),
		bigTail:new?Image(),
		angle:0
	},
	
	init:function(){
		xiaoyu.param.x=can1.width/2-50;
		xiaoyu.param.y=can1.height/2+50;
		xiaoyu.param.bigEye.src='./img/babyEye0.png';
		xiaoyu.param.bigBody.src='./img/babyFade0.png';
		xiaoyu.param.bigTail.src='./img/babyTail0.png';
	},
	
	draw:function(){
		xiaoyu.param.x=lerpDistance(dayu.param.x,xiaoyu.param.x,0.99);
		xiaoyu.param.y=lerpDistance(dayu.param.y,xiaoyu.param.y,0.99);
		var?daltaY=dayu.param.y-xiaoyu.param.y;
		var?daltaX=dayu.param.x-xiaoyu.param.x;
		var?beta=Math.atan2(daltaY,daltaX)+Math.PI;
		
		xiaoyu.param.angle=lerpAngle(beta,xiaoyu.param.angle,0.6);
		
		ctx1.save();
		ctx1.translate(xiaoyu.param.x,xiaoyu.param.y);
		ctx1.rotate(xiaoyu.param.angle);
		ctx1.drawImage(xiaoyu.param.bigBody,-xiaoyu.param.bigBody.width/2,-xiaoyu.param.bigBody.height/2);
		ctx1.drawImage(xiaoyu.param.bigTail,-xiaoyu.param.bigTail.width/2+25,-xiaoyu.param.bigTail.height/2);
		ctx1.drawImage(xiaoyu.param.bigEye,-xiaoyu.param.bigEye.width/2,-xiaoyu.param.bigEye.height/2);
		ctx1.restore();
	}
}

window.chi={
	chile:function(){
		for(i=0;i<fruit.param.num;i++){
			if(fruit.param.alive[i]){
				var?l=calLength2(fruit.param.x[i],fruit.param.y[i],dayu.param.x,dayu.param.y);
				if(l<900){
					fruit.param.alive[i]=false;
				}
			}
		}
	}
}


//放一個文件中就可以了