思洋互动网站建设学前班

推拉球杆

这个球杆动画模仿了真实人类的特征：你是否看到过斯诺克选手在瞄准的时候会推拉球杆?我们通过HTML5改变母球和球杆的距离实现了这一效果。当达到一个极点是球杆会被拉回来，然后到达另一个极点时又会被向前推。这样周而复始，知道选手停止移动鼠标。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. var cueDistance = 0;  
2. var cuePulling = true;  
3. .  
4. .  
5. .  
6.         function render() {  
7.             .  
8.             .  
9.             .  
10.    
11.             if (cuePulling) {  
12.                 if (lastMouseX == mouseX ||  
13.                 lastMouseY == mouseY) {  
14.                     cueDistance += 1;  
15.                 }  
16.                 else {  
17.                     cuePulling = false;  
18.                     getMouseXY();  
19.                 }  
20.             }  
21.             else {  
22.    
23.                 cueDistance -= 1;  
24.             }  
25.    
26.             if (cueDistance > 40) {  
27.                 cueDistance = 40;  
28.                 cuePulling = false;  
29.             }  
30.             else if (cueDistance < 0) {  
31.                 cueDistance = 0;  
32.                 cuePulling = true;  
33.             }  
34.             .  
35.             .  
36.             . 

显示目标路径

当选手移动鼠标时，我们会在母球和当前鼠标点之间画一条虚线。这对选手们长距离瞄准相当的便利。

这条目标路径只有在等待用户击球时才会显示：

1. if (!cueBall.pocketIndex) {  
2.     context.strokeStyle = '#888';  
3.     context.lineWidth = 4;  
4.     context.lineCap = 'round';  
5.     context.beginPath();  
6.    
7.     //here we draw the line  
8.     context.dashedLine(cueBall.position.x, cueBall.position.y, targetX, targetY);  
9.    
10.     context.closePath();  
11.     context.stroke();  
12. } 

需要注意的是在HTML5 canvas中并没有内置函数来画虚线。幸运的是有一个叫phrogz的家伙在StackOverflow网站上发布了一个关于这个画虚线的帖子：

1. //function kindly provided by phrogz at:  
2. //http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas  
3. var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;  
4. if (CP && CP.lineTo) {  
5.     CP.dashedLine = function (x, y, x2, y2, dashArray) {  
6.         if (!dashArray) dashArray = [10, 5];  
7.         var dashCount = dashArray.length;  
8.         this.moveTo(x, y);  
9.         var dx = (x2 - x), dy = (y2 - y);  
10.         var slope = dy / dx;  
11.         var distRemaining = Math.sqrt(dx * dx + dy * dy);  
12.         var dashIndex = 0, draw = true;  
13.         while (distRemaining >= 0.1) {  
14.             var dashLength = dashArray[dashIndex++ % dashCount];  
15.             if (dashLength > distRemaining) dashLength = distRemaining;  
16.             var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));  
17.    
18.             var signal = (x2 > x ? 1 : -1);  
19.    
20.             x += xStep * signal;  
21.             y += slope * xStep * signal;  
22.             this[draw ? 'lineTo' : 'moveTo'](x, y);  
23.             distRemaining -= dashLength;  
24.             draw = !draw;  
25.         }  
26.     }  
27. } 

显示跟踪路径

当选手击打母球后，母球会在球桌上留下一条跟踪线，用来标明其上一个点的位置。

创建这个跟踪路径比前面提到的目标路径复杂一点。首先我必须去实例化一个Queue对象，这个项目中的Queue对象原型由Stephen Morley提供。

1. var tracingQueue = new Queue(); 

一旦球开始运动，我们就将母球的实时位置压入这个Queue中：

1. if (renderStep % 2 == 0) {  
2.     draw();  
3.     enqueuePosition(new Vector2D(cueBall.position.x, cueBall.position.y));  
4. } 

enqueuePosition函数确保了我们只保存前20个点的位置，这也就是为什么我们只让显示最近的母球的运动路径的原因。

1. function enqueuePosition(position) {  
2.     tracingQueue.enqueue(position);  
3.     var len = tracingQueue.getLength();  
4.    
5.     if (len > 20) {  
6.         tracingQueue.dequeue();  
7.     }  
8. } 

接下来，我们要遍历Queue中的数据，从而来创建这条跟踪路径：

1. //drawing the tracing line  
2. var lastPosX = cueBall.position.x;  
3. var lastPosY = cueBall.position.y;  
4.    
5. var arr = tracingQueue.getArray();  
6.    
7. if (!cueBall.pocketIndex) {  
8.     context.strokeStyle = '#363';  
9.     context.lineWidth = 8;  
10.     context.lineCap = 'round';  
11.    
12.     context.beginPath();  
13.     var i = arr.length;  
14.     while (--i > -1) {  
15.         var posX = arr[i].x;  
16.         var posY = arr[i].y;  
17.         context.dashedLine(lastPosX, lastPosY, posX, posY, [10,200,10,20]);  
18.         lastPosX = posX;  
19.         lastPosY = posY;  
20.     }  
21.    
22.     context.closePath();  
23.     context.stroke();  
24. } 

绘制小球

小球和他们的投影都是呈现在一个特殊的canvas上(在球杆canvas下方)。

在呈现小球时，我们先要呈现其投影，这样做主要是为了模拟3D的环境。每一个小球必须有投影，我们对每个小球的投影位置都会有一点细微的不同，这些细微差别表明了小球是在不同方向被投射的，也说明了光源所在的位置。

每个小球是由一个公共函数来画的，函数有两个参数：1)canvas context;2)小球对象。函数先画出一个完整的圆弧然后根据小球对象提供的颜色将这个圆弧线性填充。

每一个小球对象有3中颜色：光亮色、中色和暗色，这些颜色就是用来创建线性渐变颜色的，3D效果也是这样做出来的。

1. function drawBall(context, ball, newPosition, newSize) {  
2.     var position = ball.position;  
3.     var size = ball.size;  
4.    
5.     if (newPosition != null)  
6.         position = newPosition;  
7.    
8.     if (newSize != null)  
9.         size = newSize;  
10.    
11.     //main circle  
12.     context.beginPath();  
13.     context.fillStyle = ball.color;  
14.     context.arc(position.x, position.y, size, 0, Math.PI * 2, true);  
15.    
16.     var gradient = context.createRadialGradient(  
17.         position.x - size / 2, position.y - size / 2, 0, position.x,  
18.         position.y, size );  
19.    
20.     //bright spot  
21.     gradient.addColorStop(0, ball.color);  
22.     gradient.addColorStop(1, ball.darkColor);  
23.     context.fillStyle = gradient;  
24.     context.fill();  
25.     context.closePath();  
26.    
27.     context.beginPath();  
28.     context.arc(position.x, position.y, size * 0.85, (Math.PI / 180) * 270,   
29.     (Math.PI / 180) * 200, true);  
30.     context.lineTo(ball.x, ball.y);  
31.     var gradient = context.createRadialGradient(  
32.         position.x - size * .5, position.y - size * .5,  
33.         0, position.x, position.y, size);  
34.    
35.     gradient.addColorStop(0, ball.lightColor);  
36.     gradient.addColorStop(0.5, 'transparent');  
37.     context.fillStyle = gradient;  
38.     context.fill();  
39. }  
40.    
41. function drawBallShadow(context, ball) {  
42.     //main circle  
43.     context.beginPath();  
44.     context.arc(ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
45.      ball.size * 2, 0, Math.PI * 2, true);  
46.    
47.     try {  
48.         var gradient = context.createRadialGradient(  
49.             ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
50.             0, ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
51.             ball.size * 1.5 );  
52.     }  
53.     catch (err) {  
54.         alert(err);  
55.         alert(ball.position.x + ',' + ball.position.y);  
56.     }  
57.    
58.     gradient.addColorStop(0, '#000000');  
59.     gradient.addColorStop(1, 'transparent');  
60.     context.fillStyle = gradient;  
61.     context.fill();  
62.     context.closePath();  
63. } 

检测小球之间的碰撞

小球以快速和连续的方式呈现在canvas上：首先，我们清空canvas，然后在上面绘制投影，再绘制小球，最后更新小球的位置坐标，这样周而复始。在这个期间，我们需要检查小球是否与另一个小球发生了碰撞，我们通过对小球的碰撞检测来完成这些的。

1. function isColliding(ball1, ball2) {  
2.     if (ball1.pocketIndex == null && ball2.pocketIndex == null) {  
3.         var xd = (ball1.position.x - ball2.position.x);  
4.         var yd = (ball1.position.y - ball2.position.y);  
5.    
6.         var sumRadius = ball1.size + ball2.size;  
7.         var sqrRadius = sumRadius * sumRadius;  
8.    
9.         var distSqr = (xd * xd) + (yd * yd);  
10.    
11.         if (Math.round(distSqr) <= Math.round(sqrRadius)) {  
12.    
13.             if (ball1.Points == 0) {  
14.                 strokenBalls[strokenBalls.length] = ball2;  
15.             }  
16.             else if (ball2.Points == 0) {  
17.                 strokenBalls[strokenBalls.length] = ball1;  
18.             }  
19.             return true;  
20.         }  
21.     }  
22.     return false;  
23. }