JS实现2D桌球小游戏 - 网页制作

　JS实现2D桌球小游戏

作者：CNwander　时间： 2009-10-22　文档类型：原创　来自：蓝色理想

第 1 页 JS实现2D桌球小游戏 [1]
第 2 页 JS实现2D桌球小游戏 [2]

DEMO: http://cnwander.com/demo/billiards/
原文地址：http://cnwander.com/blog/?p=11

先贴上代码：

运行代码框
<!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>台球 by CNwander</title> <style type="text/css"> * {margin:0; padding:0} body {background:black; text-align:center; font-size:12px} 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; color:gray} #table {position:relative; width:800px; margin:20px auto 10px; height:544px; background:url(http://www.blueidea.com/articleimg/2009/10/7086/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(http://www.blueidea.com/articleimg/2009/10/7086/dashed_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://www.blueidea.com/articleimg/2009/10/7086/dashed_ball.png"); background-repeat:no-repeat} .target {left:500px; top:250px; background-image:url(http://www.blueidea.com/articleimg/2009/10/7086/yellow_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://www.blueidea.com/articleimg/2009/10/7086/yellow_ball.png"); background-repeat:no-repeat} .cue {background-image:url(http://www.blueidea.com/articleimg/2009/10/7086/white_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://www.blueidea.com/articleimg/2009/10/7086/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(http://www.blueidea.com/articleimg/2009/10/7086/bg_controler.png) no-repeat} #force {position:absolute; left:0; top:18px; width:75px; height:20px; background:url(http://www.blueidea.com/articleimg/2009/10/7086/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(http://www.blueidea.com/articleimg/2009/10/7086/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; //移除静止的小球 if(Math.round(ball.v) == 0) { ball.v = 0; movingBalls.remove(i); continue; } var vx = ball.v * sin, vy = ball.v * cos; ball.x += vx; ball.y += vy; //入袋 if(isPocket(ball.x,ball.y)) { hide(ball.elem); if(ball.type == "cue") { if(!hasShot) shots = 0; hasShot = false; window.setTimeout(function(){ ball.v = 0; setBallPos(ball,170,250); },500); }else { //移除入袋小球 hasShot = true; ball.v = 0; for(var k = 0, l =0; k < balls.length; k++) { if(balls[k] != ball) { balls[l++] = balls[k]; } } balls.length -= 1; } return; } //边缘碰撞 if(ball.x < R || ball.x > W - R) { ball.angle *= -1; ball.angle %= Math.PI; ball.v = ball.v * (1 - LOSS); vx = ball.v*Math.sin(ball.angle); vy = ball.v*Math.cos(ball.angle); if(ball.x < R) ball.x = R; if(ball.x > W - R) ball.x = W - R; //母球加塞 if(ball.type == "cue") { if(ball.angle > 0) vy -= rollRight; else vy += rollRight; vx += rollUp; rollUp *= 0.2; rollRight *= 0.2; ball.v = Math.sqrt(vx*vx + vy*vy); ball.angle = Math.atan2(vx,vy); } } if(ball.y < R || ball.y > H - R) { ball.angle = ball.angle > 0 ? Math.PI - ball.angle : - Math.PI - ball.angle ; ball.angle %= Math.PI; ball.v = ball.v * (1 - LOSS); vx = ball.v*Math.sin(ball.angle); vy = ball.v*Math.cos(ball.angle); if(ball.y < R) ball.y = R; if(ball.y > H - R) ball.y = H - R; //母球加塞 if(ball.type == "cue") { if(Math.abs(ball.angle) < Math.PI/2) vx += rollRight; else vx -= rollRight; vy += rollUp; rollUp *= 0.2; rollRight *= 0.2; ball.v = Math.sqrt(vx*vx + vy*vy); ball.angle = Math.atan2(vx,vy); } } //小球碰撞 for(var j = 0; j < balls.length; j++) { var obj = balls[j]; if(obj == ball) continue; var disX = obj.x - ball.x, disY = obj.y - ball.y, gap = 2 * R; if(disX <= gap && disY <= gap) { var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2)); if(dis <= gap) { //如果是静止的，则添加到数组movingBalls if(Math.round(obj.v) == 0) movingBalls.push(obj); //将坐标旋转到x轴进行碰撞计算 // 计算角度和正余弦值 - 精确值 //var c = (obj.x*ball.y - obj.y*ball.x)/(2*R), // d = Math.sqrt(ball.x*ball.x + ball.y*ball.y), // angle = Math.asin(ball.y/d) - Math.asin(c/d) - ball.angle%(Math.PI/2), //angle = Math.asin(oy / (2 * R)), //还原两球相切状态 - 近似值 ball.x -= (gap - dis)*sin; ball.y -= (gap - dis)*cos; disX = obj.x - ball.x; disY = obj.y - ball.y; // 计算角度和正余弦值 var angle = Math.atan2(disY, disX), hitsin = Math.sin(angle), hitcos = Math.cos(angle), objVx = obj.v * Math.sin(obj.angle), objVy = obj.v * Math.cos(obj.angle); //trace(angle*180/Math.PI); // 旋转坐标 var x1 = 0, y1 = 0, x2 = disX * hitcos + disY * hitsin, y2 = disY * hitcos - disX * hitsin, vx1 = vx * hitcos + vy * hitsin, vy1 = vy * hitcos - vx * hitsin, vx2 = objVx * hitcos + objVy * hitsin, vy2 = objVy * hitcos - objVx * hitsin; // 碰撞后的速度和位置 var plusVx = vx1 - vx2; vx1 = vx2; vx2 = plusVx + vx1; //母球加塞 if(ball.type == "cue") { vx1 += rollUp; rollUp *= 0.2; } x1 += vx1; x2 += vx2; // 将位置旋转回来 var x1Final = x1 * hitcos - y1 * hitsin, y1Final = y1 * hitcos + x1 * hitsin, x2Final = x2 * hitcos - y2 * hitsin, y2Final = y2 * hitcos + x2 * hitsin; obj.x = ball.x + x2Final; obj.y = ball.y + y2Final; ball.x = ball.x + x1Final; ball.y = ball.y + y1Final; // 将速度旋转回来 vx = vx1 * hitcos - vy1 * hitsin; vy = vy1 * hitcos + vx1 * hitsin; objVx = vx2 * hitcos - vy2 * hitsin; objVy = vy2 * hitcos + vx2 * hitsin; //最终速度 ball.v = Math.sqrt(vx*vx + vy*vy) * (1 - 0); obj.v = Math.sqrt(objVx*objVx + objVy*objVy) * (1 - 0); // 计算角度 ball.angle = Math.atan2(vx , vy); obj.angle = Math.atan2(objVx , objVy); //break; } } } setBallPos(ball,ball.x,ball.y); } } function isPocket(x,y) { if(y < POKER) return check(0,2); else if (y > H - POKER) return check(3,5); else return false; function check(m,n) { for(var i=m; i<=n; i++) { if(x >= pokes[i][0] - POKER && x <= pokes[i][0] + POKER) { var dis = Math.sqrt(Math.pow(x - pokes[i][0],2) + Math.pow(y - pokes[i][1],2)); if(dis <= POKER) return true; else return false; } } } } function getBallPos(obj) { var pos = []; pos.push(obj.offsetLeft - THICKNESS + TOTALR); pos.push(obj.offsetTop - THICKNESS + TOTALR); return pos; } function setPos(obj,x,y) { obj.style.left = x + "px"; obj.style.top = y + "px"; } function setBallPos(ball,x,y) { if(ball.constructor == Ball) { ball.x = x; ball.y = y; ball = ball.elem; } setPos(ball,x + THICKNESS - TOTALR,y + THICKNESS - TOTALR); } function drawDot(wrap,x,y) { var elem = document.createElement("div"); setStyle(elem,{ position: "absolute", width: "1px", height: "1px", fontSize: "1px", background: "white" }); setPos(elem,x,y); wrap.appendChild(elem); } function updateForce() { var obj = $("force"), len = 80, up = true; forceTimer = window.setInterval(update,10); function update() { if(up) setStyle(obj,"width",len+++"px"); else setStyle(obj,"width",len--+"px"); if(len > 136) up = false; if(len <= 0) up = true; } } function setStyle() { if(arguments.length == 2 && typeof arguments[1] == "object") { for(var key in arguments[1]) { arguments[0].style[key] = arguments[1][key]; } } else if (arguments.length > 2) { arguments[0].style[arguments[1]] = arguments[2]; } } function hide(obj) { setStyle(obj,"display","none"); } function show(obj) { setStyle(obj,"display","block"); } //输出信息 function trace(sth,who) { who = who || $("tips"); if(document.all) who.innerText = sth; else who.textContent = sth; return who; } function showScore(n) { var wrap = $("scoreBoard"); trace(n+"连杆",wrap); fadeIn(wrap); } function fadeIn(obj){ var fromY = 230, posStep = [8,14,19,23,26,28,29,29,30,30,30], opaStep = [0,0.05,0.1,0.15,0.2,0.25,0.3,0.4,0.5,0.6,0.8], fromOpa = 0, t = 0, step = posStep.length, inTimer = window.setInterval(showIn,20), outTimer; function showIn() { setOpacity(obj,opaStep[t]); obj.style.top = fromY + posStep[t] + "px"; t++; if(t>=step) { window.clearInterval(inTimer); outTimer = window.setInterval(fadeOut,50); } } function fadeOut() { t--; setOpacity(obj,opaStep[t]); obj.style.top = fromY + posStep[t] + "px"; if(t <= 0) { window.clearInterval(outTimer); hide(obj); } } } function setOpacity(obj,n) { obj.style.cssText = "filter:alpha(opacity="+ n*100 +"); -moz-opacity:"+ n +"; opacity:"+ n; } function showTips() { var i = 0; tip(); window.setInterval(tip,3000); function tip() { trace(TIPS[i++]); if(i >= TIPS.length) i = 0; } } </script> </head> <body> <div class="info">探讨： <a href="http://bbs.blueidea.com/thread-2951566-1-1.html">Blueidea</a>   <a href="http://cnwander.com/blog/?p=11">Wander's space</a></div> <h1>中国人民烎起来！<span class="sub">60周年</span></h1> <div id="table"> <div id="scoreBoard"></div> </div> <div class="bot"> <div id="tips"></div> <div class = "ctrl"> <div id="force"></div> <div id="shootPos"> <div id="dot"></div> </div> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

虽厚颜冠名桌球，其实与真实桌球还相差甚远，还有太多需要改进的地方。
具体待解决的问题：

由于浏览器上刷新频率不可能太高，可能当检测两球距离时，两球已经重叠了大部分，甚至完全越过。
完全越过的情况先不考虑，重叠部分如果还原到精确的相切状态，运行非常缓慢，所以我只采用了计算量较少的近似值，具体问题主要体现在开球时，多球碰撞时有些诡异。
(如果哪位有好的优化计算方法，可以拿出来与wander分享，那wander真的感激不尽)
球自身滚动与桌面摩擦力问题。如正中击球的瞬间，母球滑行状态的摩擦力会大于向前滚动时的摩擦力，小于缩杆时摩擦力等等。这个问题好解决，只是刚开始没考虑进去，之后也没添加了，具体体现在两球正撞后，撞击球将完全静止，这是不正确的。
能量损耗问题，无论与边沿碰撞还是球与球相撞，都是直接减去一个固定值，这肯定是存在很大问题的。

其它肯定还会有很多问题，担心假期把心玩油了，回头没心思继续，干脆一气呵成，赶得有些匆忙，问题回头再慢慢解决吧，先发上来，对这块有兴趣的同学一块儿探讨探讨。

大学数学基本是过场，高中的物理数学与忘得所剩无几，真正做东西才发现自己这块太薄弱，希望在这方面经验比较丰富的同学不吝赐教。

出处：蓝色理想
责任编辑：bluehearts

上一页下一页 JS实现2D桌球小游戏 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

14条最佳JS代码编写技巧

JavaScript颜色梯度和渐变效果改进

JavaScript组件之旅:测试组件

JavaScript组件之旅:用Ant构建组件

JavaScript图片放大效果详解

作者文章

JS小游戏贪吃蛇+详细注释


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule