HTML5实现斯诺克桌球俱乐部的示例代码（图）

毫无疑问，我们已经目睹了HTML5背后的那场伟大的Web开发革命。经过那么多年HTML4的统治，一场全新的运动即将完全改变现在的Web世界。正是他释放出来的现代化气息和丰富的用户体验，让它很快地成为了一个独特的插件运行在类似Flash和Silverlight的框架之上。

如果你是一个非常年轻的开发者，也许你是刚刚在开始学习HTML5，所以可能你并没有注意到他有太大的变化。在任何时候，我希望这篇文章能够帮助到你，当然，也希望像我一样的老手能从中学到一些新的花样。

你的点评对我来说非常重要，所以我很期待你的来信。当然能让我更兴奋的是当你在那个游戏画面上右击时暗暗地说一句“Hey，这居然不是Flash！也不是Silverlight！”

系统要求

想要使用本文提供的HTML5桌球应用，你必须安装下面的这些浏览器：Chrome 12, Internet Explorer 9 or Fire Fox 5

游戏规则

也许你已经知道这是一个什么样的游戏了，是的，这是“英式斯诺克”，实际上更确切的说是“简易版英式斯诺克”，因为没有实现所有的斯诺克游戏规则。你的目标是按顺序将目标球灌入袋中，从而比其他选手得到更多的分数。轮到你的时候，你就要出杆了：根据提示，你必须先打进一个红色球得到1分，如果打进了，你就可以继续打其他的球 - 但是这次你只能打彩色球了（也就是除红色球以外的球）。如果成功打进，你将会得到各自彩球对应的分数。然后被打进的彩球会回到球桌上，你可以继续击打其他的红球。这样周而复始，直到你失败为止。当你把所有的红球都打完以后，球桌上就只剩下6个彩球了，你的目标是将这6个彩球按以下顺序依次打入袋中：黄（2 分）、绿（3分）、棕（4分）、蓝（5分）、粉（6分）、黑（7分）。如果一个球不是按上面顺序打进的，那它将会回到球桌上，否则，它最终会留在袋里。当所有球都打完后，游戏结束，得分最多的人胜出。

犯规处理

为了处罚你的犯规，其他选手将会得到你的罚分：

• 白球掉入袋中罚4分

• 白球第一次击中的球是错误的话罚第一个球的分值

• 第一个错误的球掉入袋中罚第一个球的分值

• 处罚的分数至少是4

下面的这段代码展示了我是如何来计算犯规的：

Code    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');
                    }
                }
            }
        }
    }

得分

我们根据下面的规则来计算得分：红（1分）、黄（2分）、绿（3分）、棕（4分）、蓝（5分）、粉（6分）、黑（7分）。代码如下：

Code       
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;

选手的闪动动画头像

游戏是有两位选手参与的，每一位选手都有自己的昵称和头像，选手的昵称我们就简单