jquery实现30个关卡闯关跳跃类游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：jquery实现30个关卡闯关跳跃类游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * { margin:0; padding:0; }
        #canvas { display:block; margin:10px auto; border:1px solid #bbb; outline:none; }
        .box { position:relative; }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
</head>

<body>
    <div class="box">
        <canvas id="canvas" tabindex="0"></canvas>
    </div>

    <script type="text/javascript">
        $(document).ready(function(e) {
            var canvas = document.getElementById("canvas");
        	var ctx = canvas.getContext("2d");
        	var c = $("#canvas");
        	var cur = c.css('cursor');
        	var w = 600, h = 600, dx = 0, dy = 0, x = 0, y = 0;
        	var x2 = x;
        	var y2 = y;
        	var w2 = w/2;
        	var h2 = h/2;
        	var mf = [w2,h2];
        	var fadewh = 0;
        	var le = 1;
        	var lea = 30;
        	var tle = le;
        	var lv = '';
        	var mr = 20;
        	var mr2 = mr/2;
        	var start = true, fade = false, level1 = false, lev = false, mov = false, choose = false, pause = false;
        	var kaishisize = '20px';
        	var tm = 1;
        	var ya = [];
        	var chu = [];
        	var bu = [];
        	var yd = [];
        	var bd = [];
        	var yc = [];
        	var ly = [];
        	var yq = [];
        	var zb = [];
        	var bc = [];
        	var lt = [];
        	var th = [];
        	var cs = [];
        	var cd = [];
        	var ty = [];
        	var hb = [];
        	var zz = [];
        	var v = 0;
        	var a = .2;
        	var mxl = 0, mxr = 0;
        	var xv = 2;
        	var sv = -7;
        	var sx = 0;
        	var sy = 0;
        	var sx2 = 0;
        	var sy2 = 0;
        	var xa = 0;
        	var xaj = .2;
        	var bingf = 1;
        	var pi2 = Math.PI/2;
        	var jian = false;
        	var kong = false;
        	var isStart = true;
        	var ov = false;
        	var nanc = false;
        	var fa = 10;
        	var yi = true;
        	var dkong = false;
        	var choosestyle = '#fff';
        	var menustyle = '#999';
        	var restyle = '#999';
        	var tingstyle = '#999';
        	var backstyle = '#fff'; 
        	var cox = 100, coy = 100, cow = 60, coh = 30, coxk = 85, coyk = 40;
        	var coy2 = coy;
        	var cox2 = cox;
        	var cohang = 0;
        	var choo = [];
        	canvas.width = w;
        	canvas.height = h;
        	ctx.fillStyle = '#000';
        	ctx.fillRect(0,0,w,h);
        	function begin(){
        		ctx.fillStyle = '#fff';
        		ctx.fillRect(0,0,w,h);
        		if(start)toStart();
        		if(choose)toChoose();
        		if(level1)toLevel1();
        		if(lev)toLev();
        		if(mov)move();
        		if(ov)over();
        		if(fade)toFade();
        		if(pause)toPause();
        		if(isStart)window.requestAnimationFrame(begin);
        	}
        	c.mousemove(function(e){
        		dx = e.pageX - c.offset().left - parseInt(c.css('border-left-width'));
        		dy = e.pageY - c.offset().top - parseInt(c.css('border-top-width'));
        		mm();
        	});
        	function mm(){
        		if(start){
        			if(dx >= 250 && dx <= 350 && dy >= 288 && dy <= 318){
        				kaishisize = '22px';
        				c.css('cursor','pointer');
        			}else if(dx >= 270 && dx <= 330 && dy >= 362 && dy <= 386){
        				c.css('cursor','pointer');
        				choosestyle = '#000';
        			}
        			else{
        				kaishisize = '20px';
        				choosestyle = '#fff';
        				c.css('cursor',cur);
        			}
        		}
        		if(choose && choo.length){
        			if(dx >= 270 && dx <= 330 && dy >= 482 && dy <= 506){
        				backstyle = '#000';
        				c.css('cursor','pointer');
        			}else{
        				backstyle = "#fff";
        				for(var i=0;i<lea;i++){
        					if(dx >= choo[i].x && dx <= choo[i].x+cow && dy >= choo[i].y && dy <= choo[i].y+coh){
        						choo[i].c = "#000";
        						c.css('cursor','pointer');
        						break;
        					}else{
        						choo[i].c = "#fff";
        						c.css('cursor',cur);
        					}
        				}
        			}
        		}
        		if(level1){
        			if(dx >= 560 && dx <= 590 && dy >= 10 && dy <= 35){
        				menustyle = '#bbb';
        				c.css('cursor','pointer');
        			}else if(dx >= 520 && dx <= 540 && dy >= 12 && dy <= 32){
        				restyle = '#bbb';
        				c.css('cursor','pointer');
        			}else if(dx >= 478 && dx <= 502 && dy >= 9 && dy <= 37){
        				tingstyle = '#bbb';
        				c.css('cursor','pointer');
        			}else{
        				menustyle = '#999';
        				restyle = '#999';
        				tingstyle = '#999';
        				c.css('cursor',cur);
        			}
        		}
        		if(pause){
        			if(Math.sqrt(Math.pow(dx-300,2)+Math.pow(dy-300,2)) <= 100){
        				c.css('cursor','pointer');
        			}else{
        				c.css('cursor',cur);
        			}
        		}
        	}
        	c.click(function(){
        		if(start){
        			if(dx >= 250 && dx <= 350 && dy >= 288 && dy <= 318){
        				start = false;
        				kaishisize = '20px';
        				c.css('cursor',cur);
        				fade = true;
        			}else if(dx >= 270 && dx <= 330 && dy >= 362 && dy <= 386){
        				start = false;
        				kaishisize = '20px';
        				choosestyle = '#fff';
        				c.css('cursor',cur);
        				choose = true;
        			}
        		}
        		if(choose && choo.length){
        			for(var i=0;i<lea;i++){
        				if(dx >= choo[i].x && dx <= choo[i].x+cow && dy >= choo[i].y && dy <= choo[i].y+coh){
        					le = i+1;
        					c.css('cursor',cur);
        					fade = true;
        					choose = false;
        					break;
        				}
        			}
        			if(dx >= 270 && dx <= 330 && dy >= 482 && dy <= 506){
        				choose = false;
        				start = true;
        			}
        		}
        		if(level1){
        			if(dx >= 560 && dx <= 590 && dy >= 10 && dy <= 35){
        				start = true;
        				mov = false;
        				level1 = false;
        				lev = false;
        				le = 1;
        				tle = 1;
        			}else if(dx >= 520 && dx <= 540 && dy >= 12 && dy <= 32){
        				xuan();
        			}else if(dx >= 478 && dx <= 502 && dy >= 9 && dy <= 37){
        				isStart = false;
        				pause = true;
        			}
        		}
        		if(pause){
        			if(Math.sqrt(Math.pow(dx-300,2)+Math.pow(dy-300,2)) <= 100){
        				isStart = true;
        				pause = false;
        				level1 = true;
        				mov = true;
        				begin();
        			}
        		}
        	});
        	function toPause(){
        		level1 = false;
        		mov = false;
        		ctx.fillStyle = 'rgba(0,0,0,.5)';
        		ctx.fillRect(0,0,w,h);
        		ctx.beginPath();
        		ctx.fillStyle = '#000';
        		ctx.arc(300,300,100,0,4*pi2);
        		ctx.closePath();
        		ctx.fill();
        		ctx.beginPath();
        		ctx.fillStyle = '#fff';
        		ctx.arc(300,300,96,0,4*pi2);
        		ctx.closePath();
        		ctx.fill();
        		ctx.beginPath();
        		ctx.fillStyle = '#000';
        		ctx.moveTo(370,300);
        		ctx.lineTo(250,230);
        		ctx.lineTo(250,370);
        		ctx.closePath();
        		ctx.fill();
        	}
        	function toChoose(){
        		ctx.fillStyle = '#999';
        		ctx.fillRect(0,0,w,h);
        		for(var i=0;i<lea;i++){
        			if(!choo[i]){
        				choo[i] = {};
        			}
        			choo[i].x = cox+(cohang*coxk);
        			choo[i].y = coy;
        			ctx.beginPath();
        			ctx.strokeStyle = choo[i].c ||'#fff';
        			ctx.strokeRect(cox+(cohang*coxk),coy,cow,coh);
        			ctx.closePath();
        			ctx.fillStyle = choo[i].c ||'#fff';
        			ctx.font = '16px 微软雅黑';
        			ctx.fillText(i+1, cox+(cohang*coxk)+cow/2,coy+coh*2/3);
        			cohang++;
        			if((i+1)%5 == 0 && i != 1){
 .........完整代码请登录后点击上方下载按钮下载查看