最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
 
  
  
  
  
var strokenBallsCount = 0;  
  
  
  
  
console.log('strokenBalls.length: ' + strokenBalls.length);  
  
  
  
  
    for (var i = 0; i < strokenBalls.length; i++) {  
  
  
  
  
        var ball = strokenBalls[i];  
  
  
  
  
        //causing the cue ball to first hit a ball other than the ball on  
  
  
  
  
        if (strokenBallsCount == 0) {  
  
  
  
  
            if (ball.Points != teams[playingTeamID - 1].BallOn.Points) {  
  
  
  
  
                if (ball.Points == 1 || teams[playingTeamID - 1].BallOn.Points == 1 ||   
  
  
  
  
                fallenRedCount == redCount) {  
  
  
  
  
                    if (teams[playingTeamID - 1].BallOn.Points < 4) {  
  
  
  
  
                        teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1]  
  
  
  
  
                        .FoulList.length] = 4;  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
Foul 4 points :  Expected ' +  
  
  
  
  
                         teams[playingTeamID - 1].BallOn.Points + ', but hit ' + ball.Points);  
  
  
  
  
                    }  
  
  
  
  
                    else {  
  
  
  
  
                        teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1]  
  
  
  
  
                        .FoulList.length] = teams[playingTeamID - 1].BallOn.Points;  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
Foul ' + teams[playingTeamID - 1]  
  
  
  
  
                        .BallOn.Points + ' points :  Expected ' + teams[playingTeamID - 1]  
  
  
  
  
                        .BallOn.Points + ', but hit ' + ball.Points);  
  
  
  
  
                    }  
  
  
  
  
                    break;  
  
  
  
  
                }  
  
  
  
  
            }  
  
  
  
  
        }  
  
  
  
  
   
  
  
  
  
        strokenBallsCount++;  
  
  
  
  
    }  
  
  
  
  
   
  
  
  
  
    //Foul: causing the cue ball to miss all object balls  
  
  
  
  
    if (strokenBallsCount == 0) {  
  
  
  
  
        teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1].FoulList.length] = 4;  
  
  
  
  
        $('#gameEvents').append('  
  
  
  
  
Foul 4 points :  causing the cue ball   
  
  
  
  
        to miss all object balls');  
  
  
  
  
    }  
  
  
  
  
   
  
  
  
  
    for (var i = 0; i < pottedBalls.length; i++) {  
  
  
  
  
        var ball = pottedBalls[i];  
  
  
  
  
        //causing the cue ball to enter a pocket  
  
  
  
  
        if (ball.Points == 0) {  
  
  
  
  
            teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1].FoulList.length] = 4;  
  
  
  
  
            $('#gameEvents').append('  
  
  
  
  
Foul 4 points :  causing the cue ball  
  
  
  
  
             to enter a pocket');  
  
  
  
  
        }  
  
  
  
  
        else {  
  
  
  
  
            //causing a ball different than the target ball to enter a pocket  
  
  
  
  
            if (ball.Points != teams[playingTeamID - 1].BallOn.Points) {  
  
  
  
  
                if (ball.Points == 1 || teams[playingTeamID - 1].BallOn.Points == 1  
  
  
  
  
                 || fallenRedCount == redCount) {  
  
  
  
  
                    if (teams[playingTeamID - 1].BallOn.Points < 4) {  
  
  
  
  
                        teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1]  
  
  
  
  
                        .FoulList.length] = 4;  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
Foul 4 points : '  
  
  
  
  
                         + ball.Points + ' was potted, while ' + teams[playingTeamID - 1]  
  
  
  
  
                         .BallOn.Points + ' was expected');  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
ball.Points: ' + ball.Points);  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
teams[playingTeamID - 1]  
  
  
  
  
                        .BallOn.Points: ' + teams[playingTeamID - 1].BallOn.Points);  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
fallenRedCount: ' + fallenRedCount);  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
redCount: ' + redCount);  
  
  
  
  
                    }  
  
  
  
  
                    else {  
  
  
  
  
                        teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1]  
  
  
  
  
                        .FoulList.length] = teams[playingTeamID - 1].BallOn.Points;  
  
  
  
  
                        $('#gameEvents').append('  
  
  
  
  
Foul ' + teams[playingTeamID - 1]  
  
  
  
  
                        .BallOn.Points + ' points : ' + ball.Points + ' was potted, while '  
  
  
  
  
                         + teams[playingTeamID - 1].BallOn.Points + ' was expected');  
  
  
  
  
                    }  
  
  
  
  
                }  
  
  
  
  
            }  
  
  
  
  
        }  
  
  
  
  
    } 
 
 
 

 
 
 
 
  
  
  
  
if (teams[playingTeamID - 1].FoulList.length == 0) {  
  
  
  
  
           for (var i = 0; i < pottedBalls.length; i++) {  
  
  
  
  
               var ball = pottedBalls[i];  
  
  
  
  
               //legally potting reds or colors  
  
  
  
  
               wonPoints += ball.Points;  
  
  
  
  
               $('#gameEvents').append('  
  
  
  
  
Potted +' + ball.Points + ' points.');  
  
  
  
  
           }  
  
  
  
  
       }  
  
  
  
  
       else {  
  
  
  
  
           teams[playingTeamID - 1].FoulList.sort();  
  
  
  
  
           lostPoints = teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1].FoulList.length - 1];  
  
  
  
  
           $('#gameEvents').append('  
  
  
  
  
Lost ' + lostPoints + ' points.');  
  
  
  
  
       }  
  
  
  
  
       teams[playingTeamID - 1].Points += wonPoints;  
  
  
  
  
       teams[awaitingTeamID - 1].Points += lostPoints; 
 
 
 

 
 
 
 
  
  
  
  
function animateCurrentPlayerImage() {  
  
  
  
  
    var otherPlayerImageId = 0;  
  
  
  
  
    if (playingTeamID == 1)  
  
  
  
  
        otherPlayerImageId = 'player2Image';  
  
  
  
  
    else  
  
  
  
  
        otherPlayerImageId = 'player1Image';  
  
  
  
  
    var playerImageId = 'player' + playingTeamID + 'Image';  
  
  
  
  
    $('#' + playerImageId).animate({  
  
  
  
  
        opacity: 1.0  
  
  
  
  
    }, 500, function () {  
  
  
  
  
        $('#' + playerImageId).animate({  
  
  
  
  
            opacity: 0.0  
  
  
  
  
        }, 500, function () {  
  
  
  
  
            $('#' + playerImageId).animate({  
  
  
  
  
                opacity: 1.0  
  
  
  
  
            }, 500, function () {  
  
  
  
  
            });  
  
  
  
  
        });  
  
  
  
  
    });  
  
  
  
  
   
  
  
  
  
    $('#' + otherPlayerImageId).animate({  
  
  
  
  
        opacity: 0.25  
  
  
  
  
    }, 1500, function () {  
  
  
  
  
    });  
  
  
  
  
}  
 
 
 

 
 
 
 
  
  
  
  
#strengthBar { position: absolute; margin:375px 0 0 139px;   
  
  
  
  
    width: 150px; color: lime; background-color: orange;   
  
  
  
  
    z-index: 5;} 
 
 
 

 
 
 
 
  
  
  
  
$('#strengthBar').click(function (e) {  
  
  
  
  
    var left = $('#strengthBar').css('margin-left').replace('px', '');  
  
  
  
  
    var x = e.pageX - left;  
  
  
  
  
    strength = (x / 150.0);  
  
  
  
  
    $('#strengthBar').val(strength * 100);  
  
  
  
  
});  
 
 
 

 
 
 
 
  
  
  
  
var player1BallOnContext = player1BallOnCanvas.getContext('2d');  
  
  
  
  
var player2BallOnContext = player2BallOnCanvas.getContext('2d');  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
function renderBallOn() {  
  
  
  
  
    player1BallOnContext.clearRect(0, 0, 500, 500);  
  
  
  
  
    player2BallOnContext.clearRect(0, 0, 500, 500);  
  
  
  
  
    if (playingTeamID == 1) {  
  
  
  
  
        if (teams[0].BallOn != null)  
  
  
  
  
            drawBall(player1BallOnContext, teams[0].BallOn, new Vector2D(30, 120), 20);  
  
  
  
  
    }  
  
  
  
  
    else {  
  
  
  
  
        if (teams[1].BallOn != null)  
  
  
  
  
            drawBall(player2BallOnContext, teams[1].BallOn, new Vector2D(30, 120), 20);  
  
  
  
  
        player1BallOnContext.clearRect(0, 0, 133, 70);  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 

 
 
 
 
  
  
  
  
#roofFan { position:absolute; left: 600px; top: -100px; width: 500px; height: 500px;   
  
  
  
  
    border: 2px solid transparent; background-image: url('/Content/Images/roofFan.png');   
  
  
  
  
    background-size: 100%; opacity: 0.3; z-index: 2;}  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
 

為了獲得更為逼真的氣氛，我用Paint.Net軟件將電扇圖片平滑化了，現(xiàn)在你再也看不到電扇的邊緣了。我覺得這是達(dá)到如此酷的效果最為簡(jiǎn)單的辦法。

除了用了這圖像處理的把戲，我們僅僅使用了一個(gè)帶背景圖的普通的div元素，這并沒有什么特別。既然我們已經(jīng)得到了電扇圖片，我們就要讓它開始旋轉(zhuǎn)了。這里我們使用CSS3的rotate屬性來實(shí)現(xiàn)這一切。

球桿動(dòng)畫

球桿的動(dòng)畫對(duì)于這個(gè)游戲也不是必需的，但是這的確為此添加了不少樂趣。當(dāng)你開始用鼠標(biāo)在球桌上移動(dòng)時(shí)，你會(huì)注意到球桿的確是跟著你的鼠標(biāo)在轉(zhuǎn)動(dòng)。這就是說球桿會(huì)一直保持跟隨鼠標(biāo)的移動(dòng)，就像你身臨其境一般真實(shí)。因?yàn)檫x手只能用他的眼睛來瞄準(zhǔn)，所以這個(gè)效果也會(huì)對(duì)選手有所幫助。

球桿是單獨(dú)一張PNG圖片，圖片本身不直接以img的形式展現(xiàn)，也不以背景的形式展現(xiàn)，相反，它是直接展現(xiàn)在一個(gè)專門的canvas上的。當(dāng)然我們也可以用div和css3來達(dá)到同樣的效果，但我覺得這樣能更好的說明如何在canvas上展現(xiàn)圖片。

首先，canvas元素會(huì)占據(jù)幾乎整個(gè)頁面的寬度。請(qǐng)注意這個(gè)特別的canvas有一個(gè)很大的z-index值，這樣球桿就可以一直在每個(gè)球的上方而不會(huì)被球遮蓋。當(dāng)你在球桌上移動(dòng)鼠標(biāo)時(shí)，目標(biāo)點(diǎn)會(huì)實(shí)時(shí)更新，這時(shí)候球桿圖片會(huì)進(jìn)行2次轉(zhuǎn)換：首先，通過計(jì)算得到母球的位置，其次翻轉(zhuǎn)母球周圍的球桿，通過這2步我們就得到了鼠標(biāo)所在點(diǎn)和母球的中心點(diǎn)。

 
 
 
 
  
  
  
  
#cue { position:absolute; }  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
if (drawingtopCanvas.getContext) {  
  
  
  
  
    var cueContext = drawingtopCanvas.getContext('2d');  
  
  
  
  
}  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
var cueCenter = [15, -4];  
  
  
  
  
var cue = new Image;  
  
  
  
  
cue.src = '<%: Url.Content("../Content/Images/cue.PNG") %>';  
  
  
  
  
   
  
  
  
  
var shadowCue = new Image;  
  
  
  
  
shadowCue.src = '<%: Url.Content("../Content/Images/shadowCue.PNG") %>';  
  
  
  
  
cueContext.clearRect(0, 0, topCanvasWidth, topCanvasHeight);  
  
  
  
  
   
  
  
  
  
    if (isReady) {  
  
  
  
  
        cueContext.save();  
  
  
  
  
        cueContext.translate(cueBall.position.x + 351, cueBall.position.y + 145);  
  
  
  
  
        cueContext.rotate(shadowRotationAngle - Math.PI / 2);  
  
  
  
  
        cueContext.drawImage(shadowCue, cueCenter[0] + cueDistance, cueCenter[1]);  
  
  
  
  
        cueContext.restore();  
  
  
  
  
        cueContext.save();  
  
  
  
  
        cueContext.translate(cueBall.position.x + 351, cueBall.position.y + 140);  
  
  
  
  
        cueContext.rotate(angle - Math.PI / 2);  
  
  
  
  
        cueContext.drawImage(cue, cueCenter[0] + cueDistance, cueCenter[1]);  
  
  
  
  
        cueContext.restore();  
  
  
  
  
    } 
 
 
 

為了讓球桿變得更真實(shí)我們?yōu)榍驐U添加了投影，并且我們故意讓球桿投影的旋轉(zhuǎn)角度和球桿的角度不一樣，我們這樣做是為了讓球桿有3D的效果。最終的效果實(shí)在是太酷了。

#p#

推拉球桿

這個(gè)球桿動(dòng)畫模仿了真實(shí)人類的特征：你是否看到過斯諾克選手在瞄準(zhǔn)的時(shí)候會(huì)推拉球桿?我們通過HTML5改變母球和球桿的距離實(shí)現(xiàn)了這一效果。當(dāng)達(dá)到一個(gè)極點(diǎn)是球桿會(huì)被拉回來，然后到達(dá)另一個(gè)極點(diǎn)時(shí)又會(huì)被向前推。這樣周而復(fù)始，知道選手停止移動(dòng)鼠標(biāo)。

 
 
 
 
  
  
  
  
var cueDistance = 0;  
  
  
  
  
var cuePulling = true;  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
.  
  
  
  
  
        function render() {  
  
  
  
  
            .  
  
  
  
  
            .  
  
  
  
  
            .  
  
  
  
  
   
  
  
  
  
            if (cuePulling) {  
  
  
  
  
                if (lastMouseX == mouseX ||  
  
  
  
  
                lastMouseY == mouseY) {  
  
  
  
  
                    cueDistance += 1;  
  
  
  
  
                }  
  
  
  
  
                else {  
  
  
  
  
                    cuePulling = false;  
  
  
  
  
                    getMouseXY();  
  
  
  
  
                }  
  
  
  
  
            }  
  
  
  
  
            else {  
  
  
  
  
   
  
  
  
  
                cueDistance -= 1;  
  
  
  
  
            }  
  
  
  
  
   
  
  
  
  
            if (cueDistance > 40) {  
  
  
  
  
                cueDistance = 40;  
  
  
  
  
                cuePulling = false;  
  
  
  
  
            }  
  
  
  
  
            else if (cueDistance < 0) {  
  
  
  
  
                cueDistance = 0;  
  
  
  
  
                cuePulling = true;  
  
  
  
  
            }  
  
  
  
  
            .  
  
  
  
  
            .  
  
  
  
  
            . 
 
 
 

顯示目標(biāo)路徑

當(dāng)選手移動(dòng)鼠標(biāo)時(shí)，我們會(huì)在母球和當(dāng)前鼠標(biāo)點(diǎn)之間畫一條虛線。這對(duì)選手們長(zhǎng)距離瞄準(zhǔn)相當(dāng)?shù)谋憷?/p>

這條目標(biāo)路徑只有在等待用戶擊球時(shí)才會(huì)顯示：

 
 
 
 
  
  
  
  
if (!cueBall.pocketIndex) {  
  
  
  
  
    context.strokeStyle = '#888';  
  
  
  
  
    context.lineWidth = 4;  
  
  
  
  
    context.lineCap = 'round';  
  
  
  
  
    context.beginPath();  
  
  
  
  
   
  
  
  
  
    //here we draw the line  
  
  
  
  
    context.dashedLine(cueBall.position.x, cueBall.position.y, targetX, targetY);  
  
  
  
  
   
  
  
  
  
    context.closePath();  
  
  
  
  
    context.stroke();  
  
  
  
  
} 
 
 
 

需要注意的是在HTML5 canvas中并沒有內(nèi)置函數(shù)來畫虛線。幸運(yùn)的是有一個(gè)叫phrogz的家伙在StackOverflow網(wǎng)站上發(fā)布了一個(gè)關(guān)于這個(gè)畫虛線的帖子：

 
 
 
 
  
  
  
  
//function kindly provided by phrogz at:  
  
  
  
  
//http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas  
  
  
  
  
var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;  
  
  
  
  
if (CP && CP.lineTo) {  
  
  
  
  
    CP.dashedLine = function (x, y, x2, y2, dashArray) {  
  
  
  
  
        if (!dashArray) dashArray = [10, 5];  
  
  
  
  
        var dashCount = dashArray.length;  
  
  
  
  
        this.moveTo(x, y);  
  
  
  
  
        var dx = (x2 - x), dy = (y2 - y);  
  
  
  
  
        var slope = dy / dx;  
  
  
  
  
        var distRemaining = Math.sqrt(dx * dx + dy * dy);  
  
  
  
  
        var dashIndex = 0, draw = true;  
  
  
  
  
        while (distRemaining >= 0.1) {  
  
  
  
  
            var dashLength = dashArray[dashIndex++ % dashCount];  
  
  
  
  
            if (dashLength > distRemaining) dashLength = distRemaining;  
  
  
  
  
            var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));  
  
  
  
  
   
  
  
  
  
            var signal = (x2 > x ? 1 : -1);  
  
  
  
  
   
  
  
  
  
            x += xStep * signal;  
  
  
  
  
            y += slope * xStep * signal;  
  
  
  
  
            this[draw ? 'lineTo' : 'moveTo'](x, y);  
  
  
  
  
            distRemaining -= dashLength;  
  
  
  
  
            draw = !draw;  
  
  
  
  
        }  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 

顯示跟蹤路徑

當(dāng)選手擊打母球后，母球會(huì)在球桌上留下一條跟蹤線，用來標(biāo)明其上一個(gè)點(diǎn)的位置。

創(chuàng)建這個(gè)跟蹤路徑比前面提到的目標(biāo)路徑復(fù)雜一點(diǎn)。首先我必須去實(shí)例化一個(gè)Queue對(duì)象，這個(gè)項(xiàng)目中的Queue對(duì)象原型由Stephen Morley提供。

 
 
 
 
  
  
  
  
var tracingQueue = new Queue(); 
 
 
 

一旦球開始運(yùn)動(dòng)，我們就將母球的實(shí)時(shí)位置壓入這個(gè)Queue中：

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

enqueuePosition函數(shù)確保了我們只保存前20個(gè)點(diǎn)的位置，這也就是為什么我們只讓顯示最近的母球的運(yùn)動(dòng)路徑的原因。

 
 
 
 
  
  
  
  
function enqueuePosition(position) {  
  
  
  
  
    tracingQueue.enqueue(position);  
  
  
  
  
    var len = tracingQueue.getLength();  
  
  
  
  
   
  
  
  
  
    if (len > 20) {  
  
  
  
  
        tracingQueue.dequeue();  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 

接下來，我們要遍歷Queue中的數(shù)據(jù)，從而來創(chuàng)建這條跟蹤路徑：

 
 
 
 
  
  
  
  
//drawing the tracing line  
  
  
  
  
var lastPosX = cueBall.position.x;  
  
  
  
  
var lastPosY = cueBall.position.y;  
  
  
  
  
   
  
  
  
  
var arr = tracingQueue.getArray();  
  
  
  
  
   
  
  
  
  
if (!cueBall.pocketIndex) {  
  
  
  
  
    context.strokeStyle = '#363';  
  
  
  
  
    context.lineWidth = 8;  
  
  
  
  
    context.lineCap = 'round';  
  
  
  
  
   
  
  
  
  
    context.beginPath();  
  
  
  
  
    var i = arr.length;  
  
  
  
  
    while (--i > -1) {  
  
  
  
  
        var posX = arr[i].x;  
  
  
  
  
        var posY = arr[i].y;  
  
  
  
  
        context.dashedLine(lastPosX, lastPosY, posX, posY, [10,200,10,20]);  
  
  
  
  
        lastPosX = posX;  
  
  
  
  
        lastPosY = posY;  
  
  
  
  
    }  
  
  
  
  
   
  
  
  
  
    context.closePath();  
  
  
  
  
    context.stroke();  
  
  
  
  
} 
 
 
 

繪制小球

小球和他們的投影都是呈現(xiàn)在一個(gè)特殊的canvas上(在球桿canvas下方)。

在呈現(xiàn)小球時(shí)，我們先要呈現(xiàn)其投影，這樣做主要是為了模擬3D的環(huán)境。每一個(gè)小球必須有投影，我們對(duì)每個(gè)小球的投影位置都會(huì)有一點(diǎn)細(xì)微的不同，這些細(xì)微差別表明了小球是在不同方向被投射的，也說明了光源所在的位置。

每個(gè)小球是由一個(gè)公共函數(shù)來畫的，函數(shù)有兩個(gè)參數(shù)：1)canvas context;2)小球?qū)ο蟆：瘮?shù)先畫出一個(gè)完整的圓弧然后根據(jù)小球?qū)ο筇峁┑念伾珜⑦@個(gè)圓弧線性填充。

每一個(gè)小球?qū)ο笥?中顏色：光亮色、中色和暗色，這些顏色就是用來創(chuàng)建線性漸變顏色的，3D效果也是這樣做出來的。

 
 
 
 
  
  
  
  
function drawBall(context, ball, newPosition, newSize) {  
  
  
  
  
    var position = ball.position;  
  
  
  
  
    var size = ball.size;  
  
  
  
  
   
  
  
  
  
    if (newPosition != null)  
  
  
  
  
        position = newPosition;  
  
  
  
  
   
  
  
  
  
    if (newSize != null)  
  
  
  
  
        size = newSize;  
  
  
  
  
   
  
  
  
  
    //main circle  
  
  
  
  
    context.beginPath();  
  
  
  
  
    context.fillStyle = ball.color;  
  
  
  
  
    context.arc(position.x, position.y, size, 0, Math.PI * 2, true);  
  
  
  
  
   
  
  
  
  
    var gradient = context.createRadialGradient(  
  
  
  
  
        position.x - size / 2, position.y - size / 2, 0, position.x,  
  
  
  
  
        position.y, size );  
  
  
  
  
   
  
  
  
  
    //bright spot  
  
  
  
  
    gradient.addColorStop(0, ball.color);  
  
  
  
  
    gradient.addColorStop(1, ball.darkColor);  
  
  
  
  
    context.fillStyle = gradient;  
  
  
  
  
    context.fill();  
  
  
  
  
    context.closePath();  
  
  
  
  
   
  
  
  
  
    context.beginPath();  
  
  
  
  
    context.arc(position.x, position.y, size * 0.85, (Math.PI / 180) * 270,   
  
  
  
  
    (Math.PI / 180) * 200, true);  
  
  
  
  
    context.lineTo(ball.x, ball.y);  
  
  
  
  
    var gradient = context.createRadialGradient(  
  
  
  
  
        position.x - size * .5, position.y - size * .5,  
  
  
  
  
        0, position.x, position.y, size);  
  
  
  
  
   
  
  
  
  
    gradient.addColorStop(0, ball.lightColor);  
  
  
  
  
    gradient.addColorStop(0.5, 'transparent');  
  
  
  
  
    context.fillStyle = gradient;  
  
  
  
  
    context.fill();  
  
  
  
  
}  
  
  
  
  
   
  
  
  
  
function drawBallShadow(context, ball) {  
  
  
  
  
    //main circle  
  
  
  
  
    context.beginPath();  
  
  
  
  
    context.arc(ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
  
  
  
  
     ball.size * 2, 0, Math.PI * 2, true);  
  
  
  
  
   
  
  
  
  
    try {  
  
  
  
  
        var gradient = context.createRadialGradient(  
  
  
  
  
            ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
  
  
  
  
            0, ball.position.x + ball.size * .25, ball.position.y + ball.size * .25,  
  
  
  
  
            ball.size * 1.5 );  
  
  
  
  
    }  
  
  
  
  
    catch (err) {  
  
  
  
  
        alert(err);  
  
  
  
  
        alert(ball.position.x + ',' + ball.position.y);  
  
  
  
  
    }  
  
  
  
  
   
  
  
  
  
    gradient.addColorStop(0, '#000000');  
  
  
  
  
    gradient.addColorStop(1, 'transparent');  
  
  
  
  
    context.fillStyle = gradient;  
  
  
  
  
    context.fill();  
  
  
  
  
    context.closePath();  
  
  
  
  
} 
 
 
 

檢測(cè)小球之間的碰撞

小球以快速和連續(xù)的方式呈現(xiàn)在canvas上：首先，我們清空canvas，然后在上面繪制投影，再繪制小球，最后更新小球的位置坐標(biāo)，這樣周而復(fù)始。在這個(gè)期間，我們需要檢查小球是否與另一個(gè)小球發(fā)生了碰撞，我們通過對(duì)小球的碰撞檢測(cè)來完成這些的。

 
 
 
 
  
  
  
  
function isColliding(ball1, ball2) {  
  
  
  
  
    if (ball1.pocketIndex == null && ball2.pocketIndex == null) {  
  
  
  
  
        var xd = (ball1.position.x - ball2.position.x);  
  
  
  
  
        var yd = (ball1.position.y - ball2.position.y);  
  
  
  
  
   
  
  
  
  
        var sumRadius = ball1.size + ball2.size;  
  
  
  
  
        var sqrRadius = sumRadius * sumRadius;  
  
  
  
  
   
  
  
  
  
        var distSqr = (xd * xd) + (yd * yd);  
  
  
  
  
   
  
  
  
  
        if (Math.round(distSqr) <= Math.round(sqrRadius)) {  
  
  
  
  
   
  
  
  
  
            if (ball1.Points == 0) {  
  
  
  
  
                strokenBalls[strokenBalls.length] = ball2;  
  
  
  
  
            }  
  
  
  
  
            else if (ball2.Points == 0) {  
  
  
  
  
                strokenBalls[strokenBalls.length] = ball1;  
  
  
  
  
            }  
  
  
  
  
            return true;  
  
  
  
  
        }  
  
  
  
  
    }  
  
  
  
  
    return false;  
  
  
  
  
} 
 
 
 

                                                本文名稱：用HTML 5打造斯諾克桌球俱樂部                                                

                                                當(dāng)前地址：http://m.fisionsoft.com.cn/article/cocppce.html