亚洲欧洲日本精品专线,亚洲天码中字一区

　JS實現(xiàn)2D桌球小游戲

作者：CNwander　時間： 2009-10-22　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁 JS實現(xiàn)2D桌球小游戲 [1]
第 2 頁 JS實現(xiàn)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://m.95time.cn/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://m.95time.cn/articleimg/2009/10/7086/dashed_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://m.95time.cn/articleimg/2009/10/7086/dashed_ball.png"); background-repeat:no-repeat} .target {left:500px; top:250px; background-image:url(http://m.95time.cn/articleimg/2009/10/7086/yellow_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://m.95time.cn/articleimg/2009/10/7086/yellow_ball.png"); background-repeat:no-repeat} .cue {background-image:url(http://m.95time.cn/articleimg/2009/10/7086/white_ball.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="http://m.95time.cn/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://m.95time.cn/articleimg/2009/10/7086/bg_controler.png) no-repeat} #force {position:absolute; left:0; top:18px; width:75px; height:20px; background:url(http://m.95time.cn/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://m.95time.cn/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: 參考球，目標(biāo)球，目標(biāo)袋，三點一線，這是最基本的進(jìn)球方法","Tip2: 右下角藍(lán)條代表擊球力度，小的力度更便于控制母球位置","Tip3: 右下角白球上的藍(lán)點控制擊球點，高桿，低桿，加塞都由它控制，高手與菜鳥的區(qū)別往往在此","Tip4: 桌球，其實打的不是目標(biāo)球，是母球"]; 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; //連擊次數(shù) 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); //添加目標(biāo)球 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); //顯示連擊數(shù) 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) { //如果是靜止的，則添加到數(shù)組movingBalls if(Math.round(obj.v) == 0) movingBalls.push(obj); //將坐標(biāo)旋轉(zhuǎn)到x軸進(jìn)行碰撞計算 // 計算角度和正余弦值 - 精確值 //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)), //還原兩球相切狀態(tài) - 近似值 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); // 旋轉(zhuǎn)坐標(biāo) 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; // 將位置旋轉(zhuǎn)回來 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; // 將速度旋轉(zhuǎn)回來 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 >Blueidea</a>   <a 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 全部選擇提示：你可先修改部分代碼，再按運行]

雖厚顏冠名桌球，其實與真實桌球還相差甚遠(yuǎn)，還有太多需要改進(jìn)的地方。
具體待解決的問題：

由于瀏覽器上刷新頻率不可能太高，可能當(dāng)檢測兩球距離時，兩球已經(jīng)重疊了大部分，甚至完全越過。
完全越過的情況先不考慮，重疊部分如果還原到精確的相切狀態(tài)，運行非常緩慢，所以我只采用了計算量較少的近似值，具體問題主要體現(xiàn)在開球時，多球碰撞時有些詭異。
(如果哪位有好的優(yōu)化計算方法，可以拿出來與wander分享，那wander真的感激不盡)
球自身滾動與桌面摩擦力問題。如正中擊球的瞬間，母球滑行狀態(tài)的摩擦力會大于向前滾動時的摩擦力，小于縮桿時摩擦力等等。這個問題好解決，只是剛開始沒考慮進(jìn)去，之后也沒添加了，具體體現(xiàn)在兩球正撞后，撞擊球?qū)⑼耆o止，這是不正確的。
能量損耗問題，無論與邊沿碰撞還是球與球相撞，都是直接減去一個固定值，這肯定是存在很大問題的。

其它肯定還會有很多問題，擔(dān)心假期把心玩油了，回頭沒心思繼續(xù)，干脆一氣呵成，趕得有些匆忙，問題回頭再慢慢解決吧，先發(fā)上來，對這塊有興趣的同學(xué)一塊兒探討探討。

大學(xué)數(shù)學(xué)基本是過場，高中的物理數(shù)學(xué)與忘得所剩無幾，真正做東西才發(fā)現(xiàn)自己這塊太薄弱，希望在這方面經(jīng)驗比較豐富的同學(xué)不吝賜教。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁下一頁 JS實現(xiàn)2D桌球小游戲 [2]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

更多相關(guān)鏈接

14條最佳JS代碼編寫技巧

JavaScript顏色梯度和漸變效果改進(jìn)

JavaScript組件之旅:測試組件

JavaScript組件之旅:用Ant構(gòu)建組件

JavaScript圖片放大效果詳解

作者文章

JS小游戲貪吃蛇+詳細(xì)注釋


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx