软件工程师-用HTML5打造斯诺克桌球俱乐部设计案例

星期八职场经验网（）【现成经验助你快速完成工作】用HTML5打造斯诺克桌球俱乐部设计案例本文介绍了如何利用HTML5技术来打造一款非常酷的斯诺克桌球游戏，文章中详细地列出了开发的全过程，并解说了实现这个游戏的几个关键点。在文章末尾我向大家提供了游戏的在线实例页面和源码下载链接，如果你只是想玩玩(需要使用支持HTML5的浏览器，建议使用Chrome12,InternetExplorer9或者FireFox5及其以上版本)，那你可以跳过正文拉到页面最底端去玩玩那个游戏或者下载源码，但我建议你好好看看实现过程，对我们学习HTML5非常有帮助。毫无疑问，我们已经目睹了HTML5背后的那场伟大的Web开发革命。经过那么多年HTML4的统治，一场全新的运动即将完全改变现在的Web世界。正是他释放出来的现代化气息和丰富的用户体验，让它很快地成为了一个独特的插件运行在类似Flash和Silverlight的框架之上。如果你是一个非常年轻的开发者，也许你是刚刚在开始学习HTML5，所以可能你并没有注意到他有太大的变化。在任何时候，我希望这篇文章能够帮助到你，当然，也希望像我一样的老手能从中学到一些新的花样。你的点评对我来说非常重要，所以我很期待你的来信。当然能让我更兴奋的是当你在那个游戏画面上右击时暗暗地说一句“Hey，这居然不是Flash!也不是Silverlight!”系统要求想要使用本文提供的HTML5桌球应用，你必须安装下面的这些浏览器：Chrome12,InternetExplorer9orFireFox5游戏规则星期八职场经验网（）【现成经验助你快速完成工作】也许你已经知道这是一个什么样的游戏了，是的，这是“英式斯诺克”，实际上更确切的说是“简易版英式斯诺克”，因为没有实现所有的斯诺克游戏规则。你的目标是按顺序将目标球灌入袋中，从而比其他选手得到更多的分数。轮到你的时候，你就要出杆了：根据提示，你必须先打进一个红色球得到1分，如果打进了，你就可以继续打其他的球-但是这次你只能打彩色球了(也就是除红色球以外的球)。如果成功打进，你将会得到各自彩球对应的分数。然后被打进的彩球会回到球桌上，你可以继续击打其他的红球。这样周而复始，直到你失败为止。当你把所有的红球都打完以后，球桌上就只剩下6个彩球了，你的目标是将这6个彩球按以下顺序依次打入袋中：黄(2分)、绿(3分)、棕(4分)、蓝(5分)、粉(6分)、黑(7分)。如果一个球不是按上面顺序打进的，那它将会回到球桌上，否则，它最终会留在袋里。当所有球都打完后，游戏结束，得分最多的人胜出。犯规处理为了处罚你的犯规，其他选手将会得到你的罚分：◆白球掉入袋中罚4分◆白球第一次击中的球是错误的话罚第一个球的分值◆第一个错误的球掉入袋中罚第一个球的分值◆处罚的分数至少是4星期八职场经验网（）【现成经验助你快速完成工作】下面的这段代码展示了我是如何来计算犯规的：1.varstrokenBallsCount=0;2.console.log('strokenBalls.length:'+strokenBalls.length);3.for(vari=0;istrokenBalls.length;i++){4.varball=strokenBalls[i];5.//causingthecueballtofirsthitaballotherthantheballon6.if(strokenBallsCount==0){7.if(ball.Points!=teams[playingTeamID-1].BallOn.Points){8.if(ball.Points==1||teams[playingTeamID-1].BallOn.Points==1||9.fallenRedCount==redCount){10.if(teams[playingTeamID-1].BallOn.Points4){11.teams[playingTeamID-1].FoulList[teams[playingTeamID-1]12..FoulList.length]=4;13.$('#gameEvents').append('14.Foul4points:Expected'+15.teams[playingTeamID-1].BallOn.Points+',buthit'+ball.Points);16.}17.else{18.teams[playingTeamID-1].FoulList[teams[playingTeamID-1]19..FoulList.length]=teams[playingTeamID-1].BallOn.Points;20.$('#gameEvents').append('21.Foul'+teams[playingTeamID-1]22..BallOn.Points+'points:Expected'+teams[playingTeamID-1]23..BallOn.Points+',buthit'+ball.Points);24.}25.break;26.}27.}28.}29.30.strokenBallsCount++;星期八职场经验网（）【现成经验助你快速完成工作】31.}32.33.//Foul:causingthecueballtomissallobjectballs34.if(strokenBallsCount==0){35.teams[playingTeamID-1].FoulList[teams[playingTeamID-1].FoulList.length]=4;36.$('#gameEvents').append('37.Foul4points:causingthecueball38.tomissallobjectballs');39.}40.41.for(vari=0;ipottedBalls.length;i++){42.varball=pottedBalls[i];43.//causingthecueballtoenterapocket44.if(ball.Points==0){45.teams[playingTeamID-1].FoulList[teams[playingTeamID-1].FoulList.length]=4;46.$('#gameEvents').append('47.Foul4points:causingthecueball48.toenterapocket');49.}50.else{51.//causingaballdifferentthanthetargetballtoenterapocket52.if(ball.Points!=teams[playingTeamID-1].BallOn.Points){53.if(ball.Points==1||teams[playingTeamID-1].BallOn.Points==154.||fallenRedCount==redCount){55.if(teams[playingTeamID-1].BallOn.Points4){56.teams[playingTeamID-1].FoulList[teams[playingTeamID-1]57..FoulList.length]=4;58.$('#gameEvents').append('59.Foul4points:'60.+ball.Points+'waspotted,while'+teams[playingTeamID-1]61..BallOn.Points+'wasexpected');62.$('#gameEvents').append('63.ball.Points:'+ball.Points);星期八职场经验网（）【现成经验助你快速完成工作】64.$('#gameEvents').append('65.teams[playingTeamID-1]66..BallOn.Points:'+teams[playingTeamID-1].BallOn.Points);67.$('#gameEvents').append('68.fallenRedCount:'+fallenRedCount);69.$('#gameEvents').append('70.redCount:'+redCount);71.}72.else{73.teams[playingTeamID-1].FoulList[teams[playingTeamID-1]74..FoulList.length]=teams[playingTeamID-1].BallOn.Points;75.$('#gameEvents').append('76.Foul'+teams[playingTeamID-1]77..BallOn.Points+'points:'+ball.Points+'waspotted,while'78.+teams[playingTeamID-1].BallOn.Points+'wasexpected');79.}80.}81.}82.}83.}得分我们根据下面的规则来计算得分：红(1分)、黄(2分)、绿(3分)、棕(4分)、蓝(5分)、粉(6分)、黑(7分)。代码如下：1.if(teams[playingTeamID-1].FoulList.length==0){2.for(vari=0;ipottedBalls.length;i++){3.varball=pottedBalls[i];4.//legallypottingredsorcolors5.wonPoints+=ball.Points;6.$('#gameEvents').append('7.Potted+'+ball.Points+'points.');8.}星期八职场经验网（）【现成经验助你快速完成工作】9.}10.else{11.teams[playingTeamID-1].FoulList.sort();12.lostPoints=teams[playingTeamID-1].FoulList[teams[playingTeamID-1].FoulList.length-1];13.$('#gameEvents').append('14.Lost'+lostPoints+'points.');15.}16.teams[playingTeamID-1].Points+=wonPoints;17.teams[awaitingTeamID-1].Points+=lostPoints;选手的闪动动画头像游戏是有两位选手参与的，每一位选手都有自己的昵称和头像，选手的昵称我们就简单地以“player1”和“player2”来命名了(也许让用户自己输入会更漂亮)。每位选手的头像是一只正在打桌球的可爱小狗。当轮到其中一位选手时，他的头像就会有一闪一闪的动画效果，同时对手的头像会停止闪动。这个效果我们是通过改变img元素的CSS3属性opacity的值来实现的：我们使用jquery的animatio函数让opacity的值在0-1.0之间变化。1.functionanimateCurrentPlayerImage(){2.varotherPlayerImageId=0;3.if(playingTeamID==1)4.otherPlayerImageId='player2Image';5.else6.otherPlayerImageId='player1Image';7.varplayerImageId='player