印度尼西亚网站后缀,深圳东道建设集团网站,网页页面设计叫什么,北京做网站开发的公司本文介绍了如何利用HTML5技术来打造一款非常酷的斯诺克桌球游戏#xff0c;文章中详细地列出了开发的全过程#xff0c;并解说了实现这个游戏的几个关键点。在文章末尾我向大家提供了游戏的在线实例页面和源码下载链接#xff0c;如果你只是想玩玩(需要使用支持HTML5的浏览器…本文介绍了如何利用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下面的这段代码展示了我是如何来计算犯规的varstrokenBallsCount0;console.log(strokenBalls.length: strokenBalls.length);for (vari0; ivarballstrokenBalls[i];//causing the cue ball to first hit a ball other than the ball onif (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.Points4) {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 ballsif (strokenBallsCount 0) {teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1].FoulList.length] 4;$(#gameEvents).append(Foul 4 points : causing the cue ballto miss all object balls);}for (vari0; ivarballpottedBalls[i];//causing the cue ball to enter a pocketif (ball.Points 0) {teams[playingTeamID - 1].FoulList[teams[playingTeamID - 1].FoulList.length] 4;$(#gameEvents).append(Foul 4 points : causing the cue ballto enter a pocket);}else {//causing a ball different than the target ball to enter a pocketif (ball.Points ! teams[playingTeamID - 1].BallOn.Points) {if (ball.Points 1 || teams[playingTeamID - 1].BallOn.Points 1||fallenRedCount redCount) {if (teams[playingTeamID - 1].BallOn.Points4) {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 (vari0; ivarballpottedBalls[i];//legally potting reds or colorswonPoints ball.Points;$(#gameEvents).append(Potted ball.Points points.);}}else {teams[playingTeamID - 1].FoulList.sort();lostPointsteams[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() {varotherPlayerImageId0;if (playingTeamID 1)otherPlayerImageIdplayer2Image;elseotherPlayerImageIdplayer1Image;varplayerImageIdplayer 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, );varxe.pageX - left;strength (x / 150.0);$(#strengthBar).val(strength * 100);});在当前选手的头像框里面你会注意到有一个小球我叫他“ball on”就是当前选手在规定时间内应该要击打的那个球。如果这个球消失了那选手将失去4分。同样如果选手第一次击中的球不是框内显示的球那他也将失去4分。这个“ball on”是直接将canvas元素覆盖在用户头像上的所以你在头像上看到的那个球他看起来像是在标准的div上盖了一个img元素但是这个球并不是img实现的。当然我们也不能直接在div上画圆弧和直线这就是为什么我要将canvas覆盖到头像上的原因了。看看代码吧varplayer1BallOnContextplayer1BallOnCanvas.getContext(2d);varplayer2BallOnContextplayer2BallOnCanvas.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;}...
