在线斯诺克html5,用HTML 5打造斯诺克桌球俱乐部
本文介紹了如何利用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打造斯诺克桌球俱乐部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言中 各种括号应成对出现,C语言::
- 下一篇： java将HTML文件转化为pdf文件,