本文介绍了如何利用HTML5技术来打造一款非常酷的斯诺克桌球游戏，文章中详细地列出了开发的全过程，并解说了实现这个游戏的几个关键点。在文章末尾我向大家提供了游戏的在线实例页面和源码下载链接，如果你只是想玩玩(需要使用支持HTML5的浏览器，建议使用Chrome 12, Internet Explorer 9 或者 Fire Fox 5及其以上版本)，那你可以跳过正文拉到页面最底端去玩玩那个游戏或者下载源码，但我建议你好好看看实现过程，对我们学习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
下面的这段代码展示了我是如何来计算犯规的：
varstrokenBallsCount=0;
console.log('strokenBalls.length: ' + strokenBalls.length);
for (vari=0; i
varball=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 (vari=0; i
varball=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分)。代码如下：
if (teams[playingTeamID - 1].FoulList.length== 0) {
for (vari=0; i
varball=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;
选手的闪动动画头像
游戏是有两位选手参与的，每一位选手都有自己的昵称和头像，选手的昵称我们就简单地以“player 1”和“player 2”来命名了(也许让用户自己输入会更漂亮)。每位选手的头像是一只正在打桌球的可爱小狗。当轮到其中一位选手时，他的头像就会有一闪一闪的动画效果，同时对手的头像会停止闪动。
这个效果我们是通过改变img元素的CSS3属性opacity的值来实现的：我们使用jquery的animatio函数让opacity的值在0-1.0之间变化。
function animateCurrentPlayerImage() {
varotherPlayerImageId=0;
if (playingTeamID== 1)
otherPlayerImageId='player2Image';
else
otherPlayerImageId='player1Image';
varplayerImageId='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 () {
});
}
力量控制条
一个优秀的斯诺克选手都能很好地把握住每一杆的力度.不同的技巧需要不同的击球方式：直接的，间接的，或者利用边角的等等。不同方向和不同力度的组合可以构造成千上万种可能的路径。幸运的是，这个游戏提供了一个非常漂亮的力度控制条，可以帮助选手在击球前调整他们的球杆。
为了达到这一点，我们使用了HTML5的meter元素标签，它可以完成测量距离的工作。meter标签最好在知道这次测量的最小值和最大值的情况下使用。在我们的这个例子中，这个值在0到100之间，因为IE9不支持meter，所以我用了一张背景图来替代，这样效果也是一样的。
#strengthBar { position: absolute; margin:375px 0 0 139px;
width: 150px; color: lime; background-color: orange;
z-index: 5;}
当你点击了力度条后，你实际上是选择了一个新的力度。一开始你可能不是很熟练，但在真实世界中，这是需要时间来训练自己的能力的。点击力度条的代码如下：
$('#strengthBar').click(function (e) {
varleft= $('#strengthBar').css('margin-left').replace('px', '');
varx=e.pageX - left;
strength= (x / 150.0);
$('#strengthBar').val(strength * 100);
});
在当前选手的头像框里面，你会注意到有一个小球，我叫他“ball on”，就是当前选手在规定时间内应该要击打的那个球。如果这个球消失了，那选手将失去4分。同样如果选手第一次击中的球不是框内显示的球，那他也将失去4分。
这个“ball on”是直接将canvas元素覆盖在用户头像上的，所以你在头像上看到的那个球，他看起来像是在标准的div上盖了一个img元素，但是这个球并不是img实现的。当然我们也不能直接在div上画圆弧和直线，这就是为什么我要将canvas覆盖到头像上的原因了。看看代码吧：
varplayer1BallOnContext=player1BallOnCanvas.getContext('2d');
varplayer2BallOnContext=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);
}
}
旋转屋顶上的电风扇
在这个游戏中这把电风扇纯属拿来玩玩有趣一把的。那为什么这里要放一把电风扇?是这样的，这个游戏的名字叫HTML5斯诺克俱乐部，放一把电风扇就有俱乐部的气氛了，当然，我也是为了说明如何实现CSS3的旋转。
实现这个非常简单：首先我们需要一张PNG格式的电扇图片。只是我们并没有用电扇本身的图片，我们用他的投影。通过显示风扇在球桌上的投影，让我们觉得它在屋顶上旋转，这样就达到了我们目的：
#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;}
.
.
.
