本文介紹了如何利用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;}

.

.

.

總結

以上是生活随笔為你收集整理的在线斯诺克html5,用HTML 5打造斯诺克桌球俱乐部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。