js实现桌球游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js实现桌球游戏效果代码，按住左键，移动鼠标进行瞄准，左键不放选择力度，然后松开左键。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {margin:0; padding:0}
    body {background:black; text-align:center}
    h1 {font-size:12px; color:gray; font-weight:normal; line-height:200%}
    h1 .sub {vertical-align:super; color:red; font-size:9px; }
    .info {position:absolute; right:0}
    #table {position:relative; width:800px; margin:20px auto 10px; height:544px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/table.jpg) no-repeat}
    .ball {position:absolute; width:30px; height:30px}
    #dotWrap {position:absolute; z-index:2; left:32px; top:32px; width:736px; height:480px}
    .guide {z-index:3; background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/dashed_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/dashed_ball.png"); background-repeat:no-repeat}
    .target {left:500px; top:250px; background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/yellow_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/yellow_ball.png"); background-repeat:no-repeat}
    .cue {background-image:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/white_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/white_ball.png"); background-repeat:no-repeat}
    .bot {position:relative; width:800px; margin:10px auto 10px; height:70px}
    .ctrl {position:absolute; top:0; right:0; width:200px; height:80px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/bg_controler.png) no-repeat}
    #force {position:absolute; left:0; top:18px; width:75px; height:20px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/force_conver.png) no-repeat}
    #shootPos {position:absolute; top:0; right:14px; width:52px; height:52px}
    #dot {position:absolute; top:22px; left:22px; width:8px; height:8px; background:url(//repo.bfw.wiki/bfwrepo/images/game/zuoqiu/bule_dot.png) no-repeat; font-size:1px}
    #scoreBoard {position:absolute; z-index:3; top:230px; left:346px; font-size:50px; color:white; filter:alpha(opacity=0); -moz-opacity:0; opacity:0}
    #tips {padding:15px 0 0 20px; text-align:left; color:red; font-size:12px}
    </style>
    <script type="text/javascript">
        // common 
    function $(str) {
    	return document.getElementById(str);
    }
    
    function $tag(str,target) {
    	target = target || document;
    	return target.getElementsByTagName(str);
    }
    
    function addEventHandler(obj,eType,fuc){
    	if(obj.addEventListener){ 
    		obj.addEventListener(eType,fuc,false); 
    	}else if(obj.attachEvent){ 
    		obj.attachEvent("on" + eType,fuc); 
    	}else{ 
    		obj["on" + eType] = fuc; 
    	} 
    } 
    
    function removeEventHandler(obj,eType,fuc){
    	if(obj.removeEventListener){ 
    		obj.removeEventListener(eType,fuc,false); 
    	}else if(obj.attachEvent){ 
    		obj.detachEvent("on" + eType,fuc); 
    	} 
    }
    
    function randowNum(start,end) {
    	return Math.floor(Math.random()*(end - start)) + start;
    }
    
    Array.prototype.remove=function(dx) {
    	if(isNaN(dx)||dx>this.length){return false;}
    	for(var i=0,n=0;i<this.length;i++)
    	{
    		if(this[i]!=this[dx])
    		{
    			this[n++]=this[i]
    		}
    	}
    	this.length-=1
    }
    
    //const
    var TOTALR = 15, //球的半径(包括阴影)
    	R = 12, //球真实半径
    	POKER = 20,
    	W = 736, //案宽
    	H = 480, //案高
    	THICKNESS =  32, //边缘厚度
    	RATE = 100, //刷新频率
    	F = 0.01, //摩擦力
    	LOSS = 0.2, // 碰撞速度损失
    	TIPS = ["Tip1: 参考球，目标球，目标袋，三点一线，这是最基本的进球方法","Tip2: 右下角蓝条代表击球力度，小的力度更便于控制母球位置","Tip3: 右下角白球上的蓝点控制击球点，高杆，低杆，加塞都由它控制，高手与菜鸟的区别往往在此","Tip4: 桌球，其实打的不是目标球，是母球"];
    var table, //案子
    	cueBall, //母球
    	guideBall, //参考球
    	dotWrap, //参考线
    	speed = 12,
    	rollUp = 0,
    	rollRight = 0,
    	timer,
    	forceTimer,
    	balls = [],
    	movingBalls = [],
    	pokes = [[0,0],[W/2,-5],[W,0],[0,H],[W/2,H+5],[W,H]],
    	hasShot = false;
    	shots = 0; //连击次数
    	
    window.onload = function() {
    	initTable();
    	initShootPos();
    	showTips();
    	startGame();
    }
    
    function startGame() {
    	initBall();
    	addEventHandler(table,"mousemove",dragCueBall);
    	addEventHandler(table,"mouseup",setCueBall);
    }
    
    function initTable() {
    	table = $("table");
    	var dotWrapDiv = document.createElement("div"),
    		guideBallDiv = document.createElement("div");
    	dotWrapDiv.id = "dotWrap";
    	guideBallDiv.className = "guide ball";
    	setStyle(guideBallDiv,"display","none");
    	dotWrap = table.appendChild(dotWrapDiv);
    	guideBall = table.appendChild(guideBallDiv);
    }
    
    function initBall() {
    
    	//添加母球
    	cueBall = new Ball("cue",170,H/2);
    	balls.push(cueBall);
    	
    	//添加目标球
    	for(var i = 0; i < 5; i++) {
    		for(var j = 0; j <= i; j++)	{
    			var ball = new Ball("target",520 + i*2*R, H/2 - R*i + j*2*R);
    			balls.push(ball);
    		}
    	}
    }
    
    function initShootPos() {
    	var wrap = $("shootPos"),
    		handler = $("dot"),
    		arrowR = 18;
    	addEventHandler(wrap,"mousedown",selectDot);
    	function selectDot(e) {
    		e = e || event;
    		var pos = getElemPos(wrap),
    			x = e.clientX - pos[0] - handler.offsetWidth/2,
    			y = e.clientY - pos[1] - handler.offsetHeight/2;
    			
    		if(Math.sqrt((x-22)*(x-22) + (y-22)*(y-22)) > arrowR) {
    			var angle = Math.atan2(x-22,y-22);
    			x = arrowR*Math.sin(angle) + 22;
    			y = arrowR*Math.cos(angle) + 22;
    		}
    		setPos(handler,x,y);		
    	}
    }
    
    function getElemPos(target,reference) {
    	reference = reference || document;
    	var left = 0,top = 0;
    	return getPos(target);
    	function getPos(target) {
    		if(target != reference) {
    			left += target.offsetLeft;
    			top += target.offsetTop;
    			return getPos(target.parentNode);
    		} else {
    			return [left,top];
    		}
    	}
    }
    
    // ball class
    function Ball(type,x,y) {
    	var div = document.createElement("div");
    	div.className = type + " ball";
    	this.elem = table.appendChild(div);
    	this.type = type;
    	this.x = x; //位置
    	this.y = y;
    	this.angle = 0; //角度
    	this.v = 0; //速度(不包含方向)
    	setBallPos(this.elem,x,y);
    	return this;
    }
    
    function setCueBall() {
    	removeEventHandler(table,"mousemove",dragCueBall);
    	removeEventHandler(table,"mouseup",setCueBall);
    	startShot();
    }
    
    function startShot() {
    	show(cueBall.elem);
    	addEventHandler(table,"mousemove",showGuide);
    	addEventHandler(table,"mousedown",updateForce);
    	addEventHandler(table,"mouseup",shotCueBall);
    	
    }
    
    function dragCueBall(e) {
    	var toX,toY;
    	e = e || event;
    	toX = e.clientX - table.offsetLeft - THICKNESS,
    	toY = e.clientY - table.offsetTop - THICKNESS;
    	
    	toX = toX >= R ? toX : R;
    	toX = toX <= 170 ? toX : 170;
    	toY = toY >= R ? toY : R;
    	toY = toY <= H - R ? toY : H - R;
    		
    	setBallPos(cueBall,toX,toY);
    }
    
    function shotCueBall() {
    	removeEventHandler(table,"mousemove",showGuide);
    	removeEventHandler(table,"mousedown",updateForce);
    	removeEventHandler(table,"mouseup",shotCueBall);
    	window.clearInterval(forceTimer);
    	speed = $("force").offsetWidth * 0.15;
    	var dotDisX = $("dot").offsetLeft-22,
    		dotDisY = $("dot").offsetTop-22,
    		dotDis = Math.sqrt(dotDisX*dotDisX + dotDisY*dotDisY),
    		dotAngle = Math.atan2(dotDisX,dotDisY);
    	rollRight = Math.round(dotDis*Math.sin(dotAngle))/5;
    	rollUp = -Math.round(dotDis*Math.cos(dotAngle))/5;
    
    	var formPos = getBallPos(cueBall.elem),
    		toPos = getBallPos(guideBall),
    		angle = Math.atan2(toPos[0] - formPos[0],toPos[1] - formPos[1]);
    		
    	hide(dotWrap);
    	hide(guideBall);
    	cueBall.v = speed;
    	cueBall.angle = angle;
    	movingBalls.push(cueBall);
    	
    	timer = window.setInterval(roll,1000 / RATE);
    }
    
    function showGuide(e) {
    	var fromX,fromY,toX,toY;
    	e = e || event;
    	toX = e.clientX - table.offsetLeft - THICKNESS,
    	toY = e.clientY - table.offsetTop - THICKNESS;
    	setBallPos(guideBall,toX,toY);
    	show(dotWrap);
    	show(guideBall);
    	drawLine();
    	
    	//参考线
    	function drawLine() {
    		var dotNum = 16,
    			pos = getBallPos(cueBall.elem);
    		dotWrap.innerHTML = "";
    		fromX = pos[0];
    		fromY = pos[1];
    		var partX = (toX - fromX) / dotNum,
    			partY = (toY - fromY) / dotNum;
    		for(var i = 1; i < dotNum; i++) {
    			var x = fromX + partX * i,
    				y = fromY + partY * i;
    			drawDot(dotWrap, x, y);
    		}		
    	}
    }
    
    function roll() {
    	if(movingBalls.length <= 0) {
    		if(!hasShot) shots = 0;
    		else shots ++; //累计连击
    
    		hasShot = false;
    		setStyle($("force"),"width",80+"px");
    		setPos($("dot"),22,22);		
    		window.clearInterval(timer);
    		
    		if(shots > 1) showScore(shots); //显示连击数
    		startShot();
    	}
    	for(var i = 0; i < movingBalls.length; i++) {
    		var ball = movingBalls[i],
    			sin = Math.sin(ball.angle),
    			cos = Math.cos(ball.angle);
    		ball.v -= F;
   .........完整代码请登录后点击上方下载按钮下载查看