canvas打飞机小游戏-html代码-BFW代码库

代码语言：html

所属分类：游戏

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BallFight</title>
<style>
    *{margin:0;padding:0}html,body{height:100%;overflow:hidden}#container{margin:0 auto;text-align:center;width:100%;height:100%}#bt{display:none;width:100px;height:auto;position:absolute;background:#2365a7;font:1.5em Arial;font-color:#ceceec;border-radius:15px}#bt:hover{background:#3c4e61}
</style>
</head>
<body>
<div id="container">
<canvas id="mycanvas" style="border:1px solid #cecece">
浏览器不支持canvas
</canvas>
</div>
<input type="button" id="bt" value="restart" onclick="restart();">
<script>
		document.getElementById('mycanvas').width=document.body.clientWidth;
		document.getElementById('mycanvas').height=document.body.clientHeight;
		window.onresize=function(){
			document.getElementById('mycanvas').width=document.body.clientWidth;
			document.getElementById('mycanvas').height=document.body.clientHeight;
		}
		var ctx=document.getElementById('mycanvas').getContext("2d");
		var W=ctx.canvas.width;
		var H=ctx.canvas.height;
		var RESTART=document.getElementById('bt');
		var SCORE=0;

		function windowTocanvas(dx,dy){
			var p={};
			var bbox=ctx.canvas.getBoundingClientRect();
			p.x=dx-bbox.left;
			p.y=dy-bbox.top;
			return p;
		}
		var isDown=false;
		var curp={x:W/2,y:H*0.75};
		ctx.canvas.onmousemove=function(e){
			e.preventDefault();
			if (isDown) {
				var p=windowTocanvas(e.clientX,e.clientY);
				hero.x=p.x;
				hero.y=p.y;
				curp=p;
			}
		}
		ctx.canvas.onmousedown=function(e){
			e.preventDefault();
			var p=windowTocanvas(e.clientX,e.clientY);
			var s=Math.sqrt((p.x-curp.x)*(p.x-curp.x)+(p.y-curp.y)*(p.y-curp.y))
			if (s-hero.r<hero.r/3) {
				isDown=true;
			}
		}
		ctx.canvas.onmouseup=function(e){
			e.preventDefault();
			isDown=false;
		}

    	ctx.canvas.addEventListener('touchstart',touchstart,false);
	    ctx.canvas.addEventListener('touchmove',touchmove,false);
	    ctx.canvas.addEventListener('touchend',touchend,false);
		function touchmove(e){
			e.preventDefault();
			if (isDown) {
				var p=windowTocanvas(e.touches[0].clientX,e.touches[0].clientY);
				hero.x=p.x;
				hero.y=p.y;
				curp=p;
			}
		}
		function touchstart(e){
			e.preventDefault();
			var p=windowTocanvas(e.touches[0].clientX,e.touches[0].clientY);
			var s=Math.sqrt((p.x-curp.x)*(p.x-curp.x)+(p.y-curp.y)*(p.y-curp.y))
			if (s-hero.r<hero.r/3) {
				isDown=true;
			}
		}
		function touchend(e){
			e.preventDefault();
			isDown=false;
		}
		function getRandom(a,b){
			if (a<b) {
				var c=b;
				b=a;
				a=c;
			}
			return Math.random()*(a-b+1)+b;
		}
		/*敌人*/
		var ememys=[];
		var ememycolors=["rgba(0, 153, 255, 1)","rgba(102, 255, 255, 1)","rgba(204, 153, 255, 1)"];
		var ememy=function(dx,dy,dr,ds,sc,l){
			this.x=dx;
			this.y=dy;
			this.r=dr;
			this.c=ememycolors[Math.floor(getRandom(3,1))-1];
			this.s=ds;
			this.sc=sc;
			this.life=l;
			this.boom=false;
			this.die=false;
			this.o=1;//透明度
		}
		var createEmemy=function(){
			var x,y,r,s,sc,l;
			r=Math.floor(getRandom(30,16));
			x=Math.floor(getRandom(W-r,r));
			y=-r;
			sc=r*10;
			var ds=SCORE<30000?0:SCORE<60000?1:SCORE<120000?2:3;
			s=Math.floor(8-r/5)+ds;
			if (r<20)
				l=2;
			else if(r<26)
				l=4;
			else if (r<31)
				l=6;
			var e=new ememy(x,y,r,s,sc,l);
			ememys.push(e);
			console.log(ememys);
		}
		setInterval(createEmemy,500);

		function setcolor(c,i){
			var ac=c.split(' ');
			i-=0.2;
			ac[3]=i+')';
			var result = ac.reduce(function(x,y){
				return x+' '+y;
			});
			return result;
		}
		var flag=0;//模拟爆炸，淡出的刷新频率
		var drawEmemys=function(){
			if(ememys.length<=0){return;}
			for(var i=0;i<ememys.length;i++){
				if(ememys[i].boom && flag%3===0){
					var cc=setcolor(.........完整代码请登录后点击上方下载按钮下载查看